У цій статті ми задовольнимо потреби дизайнерів в ретельності оформлення тексту, залишаючи можливість користувачам масштабувати його так, як їм буде завгодно. Ми знайдемо найкращу реалізацію, яка підходить і дизайнерам, і користувачам, а також працездатну в будь-яких браузерах і ОС.
тестовий набір
Для тестування використовувалася розмітка. що складається з двох колонок - основний колонки зліва і врізки справа. Був обраний шрифт Arial з метою відповідності різним операційним системам і платформ.
Тестування проводилося на браузерах: Safari 2, Firefox 2 і Opera 9.5α на Mac OS X Tiger, а також Internet Explorer 6 (IE6) і Internet Explorer 7 (IE7) на Windows XP із згладжуванням шрифтів ClearType. Ясно, що це не вичерпний список браузерів, операційних систем і засобів візуалізації, але вони сьогодні відповідає потребам більшості користувачів.
Кожен з браузерів і ОС був запущений з настройками за замовчуванням. На кожному кроці перевірялося то, як браузер відображає маленький, середній, великий і величезний розміри шрифту, що відповідає 90%, 100%, 110% і 120% збільшення тексту в тих браузерах, де ця можливість існує.
вихідний приклад
Спочатку потрібно було впевнитися в тому, що всі браузери налаштовані однаково. У вихідному прикладі видно, що розмір тексту за умовчанням в кожному з браузерів дорівнює 16px і текст всюди масштабований однаково. Ця умова виконується, якщо не застосовані ніякі стилі (відмінні від стилів для браузерів за замовчуванням).
Розмір тексту в пікселях - крок 1
Розмір тексту за замовчуванням в вихідному прикладі - хороша відправна точка, але для більшості людей (дизайнерів, замовників і їх клієнтів) 16px занадто багато для тексту за замовчуванням. У нашому прикладі розмір основного тексту був зменшений до 14px, а тексту в урізанні до 12px. На першому кроці ми всього лише задали розмір тексту в пікселях:
В результаті Safari і Firefox і раніше, щоб змінити масштаб текст, тоді як IE6 та IE7 - немає. Розмір тексту в Opera і IE7 можна змінити, використовуючи інструмент масштабування сторінки, який збільшує як текст, так і зображення - тобто масштабує сторінку цілком.
Розмір тексту в em - крок 2
Хоча частка браузерів, яким користувачі віддають перевагу, різна для кожного окремо взятого сайту, можна з упевненістю сказати, що IE6 поки використовується більшістю людей. Таким чином, встановлюючи розмір тексту в пікселях, ми не даємо багатьом людям можливості його масштабувати. Ще один аргумент - від користувачів IE7, у яких також не буде можливості змінити розмір шрифту без використання інструменту масштабування.
За результатами видно, що розмір тексту при стандартних налаштуваннях браузерів відповідає розміру, заданому в пікселях. Ці результати також є доказом того, що текст, вказаний в em. може легко масштабуватися в будь-якому з браузерів. Однак IE6 та IE7, хоча і прийнятно, але все-таки перебільшують розміри тексту при його масштабуванні.
Основний текст, вказаний у відсотках - крок 3
Рішенням проблеми неправильного масштабування тексту в IE6 та IE7 є установка величини шрифту тега body в процентах. Так що, залишивши em для решти вмісту, протестуємо наступні стилі:
За результатом видно, що відмінності між IE6, IE7 та іншими браузерами стали менш вираженими. Тепер всі браузери відображають і масштабують текст однаково.
Установка висоти рядка в пікселях - крок 4
Для нашого прикладу підходяща висота рядка - 18px. Застосуємо ці параметри до основного тексту:
За результатом видно, що висота рядка в 18px успадковується всіма елементами на сторінці - зауважимо також, що текст врізки має таку ж висоту рядка, що і текст основної колонки. Після визначення одиниць розміру (в нашому випадку px) для висоти рядка, це значення успадковується всіма елементами сторінки. Якщо ми визначили висоту рядка без одиниць виміру. - цей коефіцієнт успадковується всіма елементами, але буде пропорційний розміру шрифту кожного з елементів, таким чином, порушуючи вертикальну узгодженість.
На жаль, результати говорять нам про те, що висота рядка в 18px що не масштабується в IE6 та IE7, в той час як розмір шрифту змінюється, і при збільшенні масштабу - рядки жахливо туляться один до одного.
Установка висоти рядка в em - крок 5
Якщо з пиксель не не вийшло - будемо використовувати em. Змінимо висоту рядка в наших стилях:
В результаті отримаємо правильне, пропорційне збільшення розміру шрифту і висоти рядка у всіх браузерах. Чудово. Ну або майже чудово.
Проблема з Моноширинний шрифтами в Safari - крок 6
Ви, напевно, помітили невелику проблему в Safari: моно шрифт основного тексту відображається по-різному. Для тексту в пікселях Safari вірно відображає моноширинний шрифт такого ж розміру, як і пропорційний шрифт, що оточує його. Якщо текст вказано в em, то Safari відображає моноширинний текст набагато менше навколишнього його тексту. Відмінності з'являються внаслідок різного розміру шрифта для пропорційного (16px) і моноширинного шрифту (13px). У Safari 3a на OS X такої проблеми не існує.
Ви можете вирішити, що невеликий моноширинний текст не дуже-то завадить вам і вашим читачам, що використовують Safari. Для тих, хто не може чекати, альтернативним рішенням є установка шрифту в пікселях для Safari.
За результатом видно, що тепер шрифт у всіх браузерах виглядає однаково, включаючи і моно текст в Safari 2.
висновок
Нашою метою був пошук способу завдання параметрів тексту, який би дозволив дизайнерам зберегти ретельний контроль над його оформленням, не жертвуючи при цьому можливостями користувача з налаштування тексту. Ми протестували різні одиниці вимірювання в популярних браузерах. Вказуючи величину шрифту і висоту рядка в em. з процентними значеннями для елемента body (і з додатковою умовою для Safari) було показано, як надати тексту акуратність і чіткість, при цьому залишаючи можливість його масштабування. Ці методи ви можете з упевненістю покласти в свій багаж знань і використовувати в якості одного з кращих способів по установці параметрів тексту в CSS, який задовольняє як дизайнерам, так і користувачам сайтів.