Jak różne przeglądarki renderują tekst PDF przy użyciu różnych silników czcionek
Kiedy otwierasz ten sam plik PDF w przeglądarkach Google Chrome i Mozilla Firefox na tym samym komputerze, dokument przetwarzają dwa zupełnie różne silniki renderujące PDF. Chrome korzysta z PDFium, biblioteki C++ pierwotnie opracowanej przez Foxit, a obecnie obsługiwanej przez Google w ramach projektu Chromium. Firefox korzysta z PDF.js, modułu renderującego opartego na JavaScript opracowanego przez Mozillę, który działa całkowicie w silniku JavaScript przeglądarki. Te dwa silniki zasadniczo różnią się podejściem do obsługi czcionek i różnice te powodują widoczne różnice w ostrości tekstu nawet podczas renderowania identycznych plików źródłowych PDF.
PDFium renderuje tekst przy użyciu natywnego stosu renderowania czcionek systemu operacyjnego. W systemie Windows oznacza to, że korzysta z funkcji DirectWrite, która stosuje antyaliasing subpikselowy zoptymalizowany dla wyświetlaczy LCD. Na komputerze Mac używa tekstu podstawowego, który stosuje inny algorytm wygładzania, który przedkłada wierność kształtu nad wyrównanie siatki pikseli. Te różnice w renderowaniu czcionek na poziomie systemu operacyjnego oznaczają, że Czcionki PDF w tym samym pliku PDF mogą wyglądać zauważalnie inaczej po otwarciu w przeglądarce Chrome w systemie Windows i w przeglądarce Chrome na komputerze Mac, nawet zanim uwzględni się różnice w różnych przeglądarkach.
PDF.js przyjmuje zupełnie inne podejście. Renderuje tekst na elemencie canvas HTML5 przy użyciu własnego interfejsu API renderowania tekstu canvas przeglądarki. Oznacza to, że jakość renderowania tekstu zależy od implementacji kanwy przeglądarki, która różni się w przeglądarkach Firefox i Chrome, oraz od logiki dopasowywania czcionek przeglądarki, która określa, w jaki sposób czcionki wymienione w pliku PDF są lokalizowane i ładowane. Czcionka, którą Chrome lokalizuje w systemowym katalogu czcionek i renderuje za pomocą przyspieszanej sprzętowo funkcji DirectWrite, może zostać dopasowana przez przeglądarkę Firefox do nieco innego wariantu czcionki lub wyrenderowana za pomocą innej ścieżki kodu antyaliasingu.
Wypróbuj opcję Edytuj plik PDF
Nie wymaga instalacji. Działa bezpośrednio w Twojej przeglądarce.
Osadzanie, zastępowanie czcionek i ich wpływ na ostrość tekstu
Plik PDF z całkowicie osadzonymi wszystkimi czcionkami powinien teoretycznie renderować się identycznie w każdej przeglądarce, ponieważ dokładne dane czcionki potrzebne do wyświetlenia tekstu znajdują się w pliku. W praktyce nawet w pełni osadzone czcionki renderują się inaczej w różnych przeglądarkach, ponieważ rasteryzator czcionek, komponent konwertujący kontury czcionek na piksele ekranu, jest inny w każdym silniku renderującym. PDFium używa FreeType lub rasteryzatora natywnego dla systemu operacyjnego, w zależności od platformy. Plik PDF.js opiera się na renderowaniu tekstu na płótnie przeglądarki, który wykorzystuje stos renderowania tekstu systemu operacyjnego pośrednio poprzez potok renderowania przeglądarki.
Jeśli czcionki nie są osadzone w pliku PDF, co jest powszechne w dokumentach tworzonych przez pakiety biurowe i sterowniki druku do formatu PDF, które odwołują się do czcionek systemowych, a nie je osadzają, doświadczenie Przeglądanie PDF różni się jeszcze bardziej w zależności od przeglądarki. Przeglądarki Chrome i Firefox mają własną logikę zastępowania czcionek i własny zestaw domyślnych czcionek zastępczych. Plik PDF odwołujący się do „Helvetica” bez osadzania go może być wyświetlany w formacie Arial w jednej przeglądarce, w innym zamienniku bezszeryfowym w innej i jako puste prostokąty w trzeciej, jeśli nie skonfigurowano odpowiedniego zamiennika.
Podpowiedzi dotyczące czcionek, czyli proces dopasowywania konturów czcionek do siatki pikseli przy małych rozmiarach w celu ostrzejszego wyświetlania na ekranie, to kolejne źródło różnic w ostrości w różnych przeglądarkach. Przeglądarki plików PDF na komputery stacjonarne stosują instrukcje dotyczące czcionek osadzone w pliku czcionki. Plik PDF.js renderowany za pośrednictwem obszaru roboczego przeglądarki może ignorować lub częściowo stosować instrukcje dotyczące podpowiedzi, ponieważ interfejs API kanwy nie udostępnia aplikacji kontroli podpowiedzi dotyczących czcionek. Oznacza to, że małe rozmiary tekstu, zwykle 10 punktów i mniejsze, mogą wydawać się bardziej miękkie lub mniej wyraźne w przeglądarkach przeglądarkowych niż w przeglądarkach stacjonarnych na tym samym komputerze.
Różnice w antyaliasingu i ich wpływ na postrzeganą ostrość
Wygładzanie wygładza postrzępione krawędzie znaków tekstowych, kolorując piksele krawędziowe w odcieniach pomiędzy kolorem tekstu a kolorem tła. Różne algorytmy antyaliasingu dają różne subiektywne wrażenia dotyczące ostrości, a różne silniki renderujące dokonują różnych wyborów algorytmów.
Wygładzanie subpikselowe, używane przez DirectWrite w systemie Windows, wykorzystuje fizyczne rozmieszczenie czerwonych, zielonych i niebieskich subpikseli na wyświetlaczach LCD, aby potroić efektywną rozdzielczość poziomą renderowania tekstu. Tekst renderowany przy użyciu wygładzania subpikselowego wygląda zauważalnie ostrzej przy małych rozmiarach niż tekst renderowany przy użyciu wygładzania w skali szarości, które traktuje każdy piksel jako jednolitą jednostkę. Przeglądarka Chrome w systemie Windows korzysta z antyaliasingu subpikselowego za pośrednictwem funkcji DirectWrite. Firefox w systemie Windows domyślnie używa wygładzania w skali szarości dla tekstu renderowanego na płótnie, który obejmuje dane wyjściowe w formacie PDF.js. Ten sam plik PDF wyświetlany w przeglądarkach Chrome i Firefox na tym samym komputerze z systemem Windows może wyglądać ostro w jednej przeglądarce i nieco miękko w drugiej wyłącznie ze względu na różnice w wygładzaniu krawędzi.
Na wyświetlaczach o wysokiej rozdzielczości różnice w wygładzaniu stają się mniej widoczne, ponieważ większa gęstość pikseli zapewnia wystarczającą rozdzielczość fizyczną, aby czysto renderować tekst nawet przy prostszych algorytmach wygładzania. Monitor 4K przy 200-procentowym skalowaniu systemu operacyjnego ma wystarczającą liczbę pikseli na znak, że różnice między wygładzaniem subpikselowym i w skali szarości są ledwo zauważalne. Na standardowych wyświetlaczach 1080p przy 100-procentowym skalowaniu, gdzie każdy znak jest renderowany przy użyciu stosunkowo niewielkiej liczby fizycznych pikseli, wybór wygładzania ma znacznie większy wpływ na postrzeganą jakość tekstu.
Praktyczne kroki zapewniające spójne renderowanie tekstu PDF w różnych przeglądarkach
Jeśli plik PDF będzie przeglądany głównie za pośrednictwem renderowania opartego na przeglądarce Web na PDF, kilka praktyk poprawia spójność tekstu w różnych przeglądarkach. Zamiast polegać na odniesieniach do czcionek systemowych, osadzaj wszystkie czcionki w pliku PDF. Osadzone czcionki gwarantują, że każdy silnik renderujący ma dostęp do dokładnie tych samych danych czcionek, eliminując zastępowanie czcionek jako źródło różnic w renderowaniu.
Używaj czcionek przeznaczonych do renderowania ekranu przy typowych rozmiarach tekstu. Czcionki z dobrymi instrukcjami podpowiedzi dają bardziej spójne wyniki w silnikach renderujących niż czcionki, które korzystają z rasteryzatora w celu uzyskania dobrych wyników bez podpowiedzi. Czcionki zoptymalizowane pod kątem sieci Web z usług takich jak Czcionki Google zazwyczaj dobrze nadają się do wyświetlania na ekranie w typowych rozmiarach tekstu, a osadzanie ich w plikach PDF przeznaczonych do przeglądania w przeglądarce zapewnia bardziej przewidywalne wyniki w różnych przeglądarkach niż użycie czcionek zoptymalizowanych pod kątem druku przeznaczonych do druku offsetowego.
Przetestuj plik PDF w przeglądarkach Chrome, Firefox i Edge przed opublikowaniem go w lokalizacji dostępnej w Internecie. Bezpośrednie porównanie przy 100-procentowym powiększeniu na wyświetlaczu o standardowej rozdzielczości ujawnia różnice w ostrości tekstu, którymi warto się zająć, zanim dokument dotrze do użytkowników końcowych. Jeśli jedna przeglądarka wyświetla znacznie bardziej miękki tekst niż inne, dostosowanie ustawień osadzania czcionek lub zwiększenie rozmiaru tekstu podstawowego o jeden punkt może często doprowadzić do akceptowalnej zgodności wizualnej wszystkich trzech przeglądarek.
Opcje eksportu do pliku PDF WukongPDF obejmują ustawienia osadzania czcionek, które zapewniają, że wszystkie czcionki zostaną w pełni osadzone w pliku wyjściowym, eliminując podstawianie czcionek jako źródło różnic w renderowaniu tekstu w różnych przeglądarkach.
Szerszy trend w renderowaniu plików PDF w przeglądarkach zmierza w kierunku zbieżności, a nie rozbieżności. Zarówno PDFium w przeglądarce Chrome, jak i PDF.js w przeglądarce Firefox otrzymują regularne aktualizacje, które poprawiają jakość i spójność renderowania tekstu. Dwa lata temu różnice w renderowaniu pomiędzy tymi silnikami były znacznie większe niż obecnie. Ciągły rozwój obu silników, napędzany rosnącym znaczeniem przeglądania dokumentów w Internecie, stopniowo zmniejsza różnice w jakości tekstu w różnych przeglądarkach. Dla wydawców dokumentów tendencja ta oznacza, że dzisiejsze inwestycje w testowanie renderowania w różnych przeglądarkach pozwalają uzyskać dokumenty, które będą renderowane jeszcze bardziej spójnie w miarę ciągłego ulepszania podstawowych silników.
Ze względu na dostępność różnice w renderowaniu tekstu między przeglądarkami mają efekt wtórny, wykraczający poza estetykę. Czytniki ekranu wyodrębniające tekst z plików PDF renderowanych w przeglądarce zależą od dokładności wyodrębniania tekstu przez przeglądarkę, która jest bezpośrednio powiązana z tym, jak silnik PDF przeglądarki reprezentuje tekst wewnętrznie. Przeglądarka, która ostro renderuje tekst, zwykle wyodrębnia go również dokładnie na potrzeby czytnika ekranu. Testowanie dostępności plików PDF za pomocą czytników ekranu w wielu przeglądarkach gwarantuje, że dokument będzie nie tylko spójny wizualnie, ale także programowo dostępny, niezależnie od przeglądarki preferowanej przez użytkownika czytnika ekranu.
Praktyczny wpływ tych różnic między przeglądarkami zależy w dużej mierze od odbiorców dokumentu i kanału dystrybucji. Plik PDF przeznaczony do pobrania i przeglądania w preferowanej aplikacji komputerowej odbiorcy, Acrobat, Preview lub Foxit, nie wymaga optymalizacji renderowania w przeglądarce. Plik PDF osadzony na stronie internetowej i przeglądany bezpośrednio w przeglądarce przez setki lub tysiące użytkowników znacznie czerpie korzyści z praktyk testowania i optymalizacji opisanych w tym artykule. Dopasowanie wysiłku optymalizacyjnego do głównego kontekstu oglądania gwarantuje, że zasoby zostaną wydane tam, gdzie mają największy wpływ na użytkownika.
Wybór formatu czcionki do osadzania plików PDF wpływa również na spójność renderowania w różnych przeglądarkach. Czcionki TrueType z dobrymi instrukcjami podpowiedzi zazwyczaj dają bardziej spójne wyniki w silnikach renderujących niż czcionki PostScript Type 1, które są starszym formatem i mniej wyrafinowaną obsługą podpowiedzi. Czcionki OpenType zawierające kontury TrueType i kontury PostScript w tym samym pliku (format zwany OpenType CFF) mogą dawać różne wyniki renderowania w zależności od formatu konturu wybranego przez silnik renderujący. Aby uzyskać maksymalną spójność między przeglądarkami, osadzaj czcionki OpenType o smaku TrueType z instrukcjami podpowiedzi zoptymalizowanymi pod kątem wyświetlania na ekranie przy typowych rozmiarach tekstu.
Zarządzanie kolorami współdziała z renderowaniem tekstu w subtelny sposób, wpływając na postrzeganą ostrość. Plik PDF z osadzonym profilem kolorów RGB może renderować tekst z nieco innym kontrastem na tle w porównaniu z tym samym plikiem PDF bez profilu kolorów lub z profilem CMYK. Przeglądarki różnią się obsługą zarządzania kolorami dla zawartości PDF, a interakcja między zarządzaniem kolorami przeglądarki, kalibracją wyświetlacza systemu operacyjnego i profilem kolorów osadzonym w pliku PDF może wpływać na to, czy czarny tekst będzie wyświetlany jako czysta czerń, czy jako nieco jaśniejszy ciemnoszary, co percepcyjnie wpływa na ostrość, mimo że rozdzielczość renderowania tekstu jest identyczna.
Wypróbuj opcję Edytuj plik PDF
Nie wymaga instalacji. Działa bezpośrednio w Twojej przeglądarce.