Как стать автором
Обновить

Война браузеров: рендеринг текста

Время на прочтение 3 мин
Количество просмотров 5.8K
Автор оригинала: www.graphicrating.com
В предыдущей статье вы получили представление о наиболее распространенных браузерах. В этой статье мы проанализируем работу браузеров в их основной функции — рендеринге текста. Занимаетесь ли вы поиском, читаете Wiki или пишите в блог, вы взаимодействуете с текстом и уделяете ему внимание. А раз так, то давайте посмотрим, как браузеры справляются с этой задачей [рендерингом текста].

Для этого теста мы пропустим через браузеры несколько страниц и посмотрим, какой из них лучше с ними справляется. Для тестирования использовалась машина с Windows XP без включенного ClearType. Все используемые для тестов страницы содержали XHTML 1.0 Strict Doctype. Так же нам необходимо определить требуемые результаты при тестировании рендеринга текста. Лучшим решением должен быть результат, предлагающий компромисс между размытыми и резкими краями. Чтобы быть читаемым текст должен иметь гладкие края, но в тоже время достаточно четкие.

Тест рендеринга заголовков


В первом тесте мы используем 6 заголовков HTML. Мы хотим увидеть как браузеры рендерят простейшие заголовки HTML без каких-либо CSS-стилей.



При рассмотрении H1 вы можете ясно видеть, что Safari использует слишком сильное размытие краев. Результат Internet Explorer, наоборот, выглядит не сглаженным. Chrome, Firefox и Opera имеют лучший результат. Касательно Chrome, мне не понравилось то, что, например, символы e и a имеют меньшую интенсивность по сравнению с результатом других браузеров. В результате, для H1 и H2 победителями становятся Opera и Firefox. При рассмотрении H3 у нас другой победитель — Internet Explorer. По сравнению с другими браузерам Internet Explorer предлагает более читаемый текст. Такого же результата Internet Explorer достиг и в остальных заголовках, где Opera, Firefox и Chrome показывают одинаковые результаты, а у Safari текст слишком размыт.

Тест амперсандом


Для определения лучших способностей рендеринга у бразуеров мы создали простой тест, основанный на символе амперсанда. Для теста был выбран амперсанд в силу того, что это сложный символ. В зависимости от шрифта, в композиции амперсанда присутствует горизонтальная, скругленная, скошенная и прямая линии.


[увеличенный вариант]

В этом тесте абсолютный победитель — это Safari. Safari единственный браузер с исключительным рендерингом даже на значениях более 351px. Во всех других браузерах значения более 351px приводили к очень примитивному рендерингу с грубыми краями без сглаживания. В этом тесте у IE самые худшие показатели. Как вы можете убедиться, посмотрев на картинку, движок рендеринга не способен приемлемо отобразить символ.

Тест на блоке текста


Этот тест состоит из трех блоков текста с разными шрифтами. Мы использовали популярные шрифты Arial 13px, Verdana 13px and Georgia 15px.


[увеличенный вариант]

В этом тесте очень просто определить победителя — это Internet Explorer. Его движок рендеринга наиболее сбалансированный в отображении разнообразных шрифтов. Даже для низких значений, вроде 13px, IE предлагает приятный эффект размытия. Вопреки всеобщему мнению, Safari убог [is lame] в рендеринге текста. Его движок отображает дополнительный вес в шрифтах, делая их тяжелее, ухудшая читаемость. Opera, Firefox и Chrome имеют схожее друг с другом поведение при отображении текста.

Заключение


Каждый браузер имеет свои недостатки и преимущества, но я бы не сказал, что все они одинаковы, напротив. Браузер, показавший себя лучшим в тестах рендеринга текста — это Internet Explorer. Заметно, что Microsoft возлагает надежды на свой продукт и его будущее. Молодцы! [Kudos!]

Второе место занимают Firefox и Opera, которые с небольшими различиями имеют примерно одинаковые способности в рендеринге. На третьем месте новичок Chrome. И на последнем месте в плане рендеринга текста — Safari.

Здесь вы можете почитать первую статью про используемые в тестировании браузеры.

Теги:
Хабы:
+22
Комментарии 96
Комментарии Комментарии 96

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн