Как разные браузеры отображают PDF-текст с использованием разных шрифтовых движков
Когда вы открываете один и тот же файл PDF в Google Chrome и Mozilla Firefox на одном компьютере, документ обрабатывается двумя совершенно разными механизмами рендеринга PDF. Chrome использует PDFium, библиотеку C++, первоначально разработанную Foxit и теперь поддерживаемую Google как часть проекта Chromium. Firefox использует PDF.js, средство визуализации на основе JavaScript, разработанное Mozilla и полностью работающее на движке JavaScript браузера. Эти два механизма имеют принципиально разные подходы к обработке шрифтов, и эти различия приводят к видимым различиям в резкости текста даже при рендеринге идентичных исходных PDF-файлов.
PDFium визуализирует текст, используя собственный стек рендеринга шрифтов операционной системы. В Windows это означает, что используется DirectWrite, который применяет субпиксельное сглаживание, оптимизированное для ЖК-дисплеев. На Mac он использует Core Text, который применяет другой алгоритм сглаживания, который отдает приоритет точности формы над выравниванием пиксельной сетки. Эти различия в рендеринге шрифтов на уровне ОС означают, что PDF Fonts в одном и том же PDF-файле может выглядеть заметно по-разному при открытии в Chrome в Windows и в Chrome на Mac, даже если не учитывать межбраузерные различия.
PDF.js использует совершенно другой подход. Он отображает текст на элементе холста HTML5, используя собственный API рендеринга текста холста браузера. Это означает, что качество рендеринга текста зависит от реализации холста браузера, которая различается в Firefox и Chrome, а также от логики сопоставления шрифтов браузера, которая определяет, как находятся и загружаются шрифты, на которые есть ссылки в PDF-файле. Шрифт, который Chrome находит в системном каталоге шрифтов и отображает с помощью DirectWrite с аппаратным ускорением, может быть сопоставлен Firefox с немного другим вариантом шрифта или отображен с помощью другого пути кода сглаживания.
Попробуйте редактировать PDF
Никакой установки не требуется. Работает прямо в вашем браузере.
Встраивание, замена шрифтов и их влияние на четкость текста
PDF-файл, в который полностью встроены все шрифты, теоретически должен отображаться одинаково во всех программах просмотра, поскольку точные данные шрифта, необходимые для отображения текста, находятся внутри файла. На практике даже полностью встроенные шрифты отображаются по-разному в разных браузерах, поскольку растеризатор шрифтов, компонент, который преобразует контуры шрифтов в пиксели экрана, различен в каждом механизме рендеринга. PDFium использует FreeType или собственный растеризатор ОС в зависимости от платформы. PDF.js опирается на рендеринг текста на холсте браузера, который использует стек рендеринга текста ОС косвенно через конвейер рендеринга браузера.
Когда шрифты не встроены в PDF-файл, что по-прежнему часто встречается в документах, созданных с помощью офисных пакетов и драйверов печати в PDF, которые ссылаются на системные шрифты, а не встраивают их, возможности PDF Viewing еще больше различаются в разных браузерах. Chrome и Firefox имеют собственную логику замены шрифтов и собственный набор заменяющих шрифтов по умолчанию. PDF-файл, который ссылается на «Helvetica» без встраивания, может отображаться в формате Arial в одном браузере, в другой замене без засечек в другом и в виде пустых прямоугольников в третьем, если подходящая замена не настроена.
Хинтинг шрифта, процесс настройки контуров шрифта для выравнивания с пиксельной сеткой небольших размеров для более четкого отображения на экране, является еще одним источником вариаций резкости в разных браузерах. Настольные программы просмотра PDF применяют инструкции по подсказке шрифта, встроенные в файл шрифта. PDF.js при рендеринге через холст браузера может игнорировать или частично применять инструкции хинтинга, поскольку API холста не предоставляет приложению управление хинтингом шрифтов. Это означает, что небольшой размер текста, обычно 10 пунктов и ниже, может выглядеть более мягким или менее отчетливым в браузерных программах просмотра, чем в настольных программах просмотра на том же компьютере.
Различия в сглаживании и их влияние на воспринимаемую резкость
Сглаживание сглаживает неровные края текстовых символов, окрашивая края пикселей в оттенки между цветом текста и цветом фона. Различные алгоритмы сглаживания производят разные субъективные впечатления от резкости, а разные механизмы рендеринга выбирают разные алгоритмы.
Субпиксельное сглаживание, используемое DirectWrite в Windows, использует физическое расположение красных, зеленых и синих субпикселей на ЖК-дисплеях, чтобы утроить эффективное горизонтальное разрешение рендеринга текста. Текст, визуализированный с помощью субпиксельного сглаживания, при небольших размерах выглядит заметно резче, чем текст, визуализированный с помощью сглаживания оттенков серого, при котором каждый пиксель рассматривается как единое целое. Chrome в Windows использует субпиксельное сглаживание через DirectWrite. Firefox в Windows по умолчанию использует сглаживание в оттенках серого для текста, отображаемого на холсте, который включает вывод PDF.js. Один и тот же PDF-файл, просмотренный в Chrome и Firefox на одном и том же компьютере с Windows, может выглядеть четким в одном браузере и слегка мягким в другом исключительно из-за различий в сглаживании.
На дисплеях с высоким разрешением различия в сглаживании становятся менее заметными, поскольку более высокая плотность пикселей обеспечивает достаточное физическое разрешение для четкой визуализации текста даже с помощью более простых алгоритмов сглаживания. Монитор 4K при 200-процентном масштабировании операционной системы имеет достаточно пикселей на символ, поэтому разница между субпиксельным и полутоновым сглаживанием едва заметна. На стандартных дисплеях с разрешением 1080p при 100-процентном масштабировании, где каждый символ отображается с использованием относительно небольшого количества физических пикселей, выбор сглаживания оказывает гораздо большее влияние на воспринимаемое качество текста.
Практические шаги по обеспечению согласованного рендеринга текста PDF в браузерах
Если PDF-файл будет просматриваться в основном посредством рендеринга Web в PDF в браузере, некоторые методы улучшат согласованность текста в разных браузерах. Встраивайте все шрифты в PDF-файл, а не полагайтесь на системные ссылки на шрифты. Встроенные шрифты гарантируют, что каждый механизм рендеринга имеет доступ к одним и тем же данным шрифта, исключая подстановку шрифтов как источник различий в рендеринге.
Используйте шрифты, предназначенные для отображения на экране, с типичными размерами текста. Шрифты с хорошими инструкциями по подсказкам дают более согласованные результаты в разных механизмах рендеринга, чем шрифты, которые полагаются на растеризатор для получения хороших результатов без подсказок. Оптимизированные для Интернета шрифты из таких сервисов, как Google Fonts, обычно хорошо подходят для отображения на экране с обычными размерами текста, а встраивание их в PDF-файлы, предназначенные для просмотра в браузере, дает более предсказуемые результаты в различных браузерах, чем использование оптимизированных для печати шрифтов, предназначенных для вывода на офсетной печати.
Проверьте PDF-файл в Chrome, Firefox и Edge, прежде чем публиковать его в Интернете. Параллельное сравнение при 100-процентном увеличении на дисплее со стандартным разрешением показывает различия в резкости текста, на которые стоит обратить внимание до того, как документ попадет к конечным пользователям. Если один браузер отображает значительно более мягкий текст, чем другие, корректировка настроек встраивания шрифта или увеличение размера основного текста на один пункт часто может привести все три браузера к приемлемому визуальному согласию.
Параметры экспорта PDF в WukongPDF включают настройки встраивания шрифтов, которые гарантируют, что все шрифты будут полностью встроены в выходной файл, исключая подстановку шрифтов как источник различий в рендеринге текста в разных браузерах.
Более широкая тенденция в рендеринге PDF-файлов в браузере направлена на сближение, а не на расхождение. И PDFium в Chrome, и PDF.js в Firefox регулярно получают обновления, которые улучшают качество и согласованность рендеринга текста. Два года назад различия в рендеринге между этими движками были значительно больше, чем сегодня. Постоянное развитие обоих движков, вызванное растущей важностью просмотра документов через Интернет, постепенно сокращает разрыв в качестве кросс-браузерного текста. Для издателей документов эта тенденция означает, что инвестиции в тестирование кросс-браузерного рендеринга сегодня позволяют создавать документы, которые будут отображаться еще более последовательно, поскольку базовые механизмы продолжают совершенствоваться.
В целях доступности различия в рендеринге текста между браузерами имеют второстепенный эффект, выходящий за рамки эстетики. Программы чтения с экрана, которые извлекают текст из PDF-файлов, отображаемых в браузере, зависят от точности извлечения текста браузера, которая напрямую связана с тем, как механизм PDF браузера представляет текст внутри себя. Браузер, который четко отображает текст, обычно также точно извлекает его для использования в программе чтения с экрана. Тестирование доступности PDF-файлов с помощью программ чтения с экрана в нескольких браузерах гарантирует, что документ не только визуально единообразен, но и доступен программно, независимо от того, какой браузер предпочитает пользователь программы чтения с экрана.
Практическое влияние этих межбраузерных различий во многом зависит от аудитории документа и канала распространения. PDF-файл, предназначенный для загрузки и просмотра в предпочитаемом получателем настольном приложении: Acrobat, Preview или Foxit, не требует оптимизации рендеринга в браузере. PDF-файл, встроенный в веб-страницу и просматриваемый непосредственно в браузере сотнями или тысячами пользователей, существенно выигрывает от методов тестирования и оптимизации, описанных в этой статье. Сопоставление усилий по оптимизации с основным контекстом просмотра гарантирует, что ресурсы будут расходоваться там, где они оказывают наибольшее влияние на пользователя.
Выбор формата шрифта для встраивания PDF также влияет на согласованность рендеринга в разных браузерах. Шрифты TrueType с хорошими инструкциями по хинтингу обычно дают более согласованные результаты в разных механизмах рендеринга, чем шрифты PostScript Type 1, которые представляют собой более старый формат с менее сложной поддержкой хинтинга. Шрифты OpenType, которые содержат контуры TrueType и PostScript в одном файле (формат OpenType CFF), могут давать разные результаты рендеринга в зависимости от того, какой формат контуров выбирает механизм рендеринга. Для максимальной совместимости между браузерами встраивайте шрифты OpenType со вкусом TrueType с инструкциями по подсказкам, оптимизированными для отображения на экране с обычными размерами текста.
Управление цветом тонко взаимодействует с рендерингом текста, влияя на воспринимаемую резкость. PDF-файл со встроенным цветовым профилем RGB может отображать текст с несколько иной контрастностью на фоне по сравнению с тем же PDF-файлом без цветового профиля или с профилем CMYK. Браузеры различаются по поддержке управления цветом для содержимого PDF, а взаимодействие между управлением цветом в браузере, калибровкой дисплея операционной системы и встроенным цветовым профилем PDF может влиять на то, будет ли черный текст отображаться как чисто черный или как немного более светлый темно-серый, что влияет на восприятие резкости, даже если разрешение рендеринга текста идентично.
Попробуйте редактировать PDF
Никакой установки не требуется. Работает прямо в вашем браузере.