Textwiedergabe: Wie kompliziert kann es sein? Es stellt sich als unglaublich herausfordernd heraus! Soweit ich weiß, zeigt buchstäblich kein System den Text „perfekt“ an. Irgendwo besser, irgendwo schlechter.

Angenommen, Sie möchten beliebigen Text mit beliebigen Schriftarten, Farben und Stilen mit Unterstützung für Zeilenumbruch und Texthervorhebung. Tatsächlich sind dies die Mindestanforderungen für die korrekte Anzeige von komplexem Text, einem Terminalfenster, einer Webseite usw.

Sagen wir im Allgemeinen sofort: Es gibt keine aufeinanderfolgenden richtigen Antworten, alles ist viel wichtiger als Sie denken und alles wirkt sich auf alles andere aus.

Wir werden Themen diskutieren, die nicht in einem einzigen Konzept zusammengefasst sind. Dies sind nur Probleme, mit denen ich mich während mehrerer Jahre der Arbeit am Rendern von Text in Firefox auseinandersetzen musste. Zum Beispiel werden wir die Probleme der Textsegmentierung oder der Verwaltung verschiedener Textbibliotheken für eine bestimmte Plattform nicht zu ausführlich diskutieren, da mich dies nicht allzu interessiert.

1. Terminologie

Die Art des Textes ist komplex und Englisch vermittelt schlecht alle Nuancen. In diesem Dokument werde ich versuchen, die folgenden Bedingungen einzuhalten. Bitte beachten Sie, dass diese Wörter nicht „korrekt“ sind. Ich finde sie nur nützlich, um englischen Muttersprachlern, die keine Erfahrung in der Linguistik haben, Schlüsselkonzepte zu vermitteln.

Charaktere:

Skalar (Skalar): Unicode-Skalar, die "kleinste Einheit" in Unicode (es ist auch ein Codepunkt).
Zeichen: Ein erweiterter Unicode-Graphemcluster (EGC), die „größte Einheit“ in Unicode (möglicherweise bestehend aus mehreren Skalaren).
Glyphe (Glyphe): Die atomare Einheit des Renderns in einer Schriftart. Es hat normalerweise eine eindeutige Kennung in der Schriftart.
Ligatur: Eine Glyphe, die aus mehreren Skalaren und möglicherweise sogar mehreren Zeichen besteht (Muttersprachler können eine Ligatur als mehrere Zeichen darstellen, für eine Schriftart jedoch nur ein Zeichen).
Emoji: "Vollfarb" -Glyphe.

Schriftarten

Schriftart: Ein Dokument, das Zeichen Glyphen zuordnet.
Schreiben / Schreiben (Skript): Eine Reihe von Glyphen, aus denen eine bestimmte Sprache besteht (Schriftarten implementieren in der Regel bestimmte Skripte).
Handschriftliche Schriftart (Kursivschrift): Jede Schriftart, in der Glyphen sich berühren und ineinander fließen (z. B. Arabisch).
Farbe: RGB- und Alpha-Werte für Schriftarten (für einige Anwendungsfälle nicht erforderlich, dies ist jedoch interessant).
Stil: Fett und kursiv für Schriftarten (in praktischen Implementierungen werden normalerweise auch Hinweise, Aliase und andere Einstellungen mitgeliefert).

2. Hängen Stil, Layout und Form voneinander ab?

Hier ist eine kurze Übersicht, um Ihnen eine Vorstellung davon zu geben, wie eine typische Text-Rendering-Pipeline funktioniert:

Stilisierung (Parsing-Markup, Abfragesystem für Schriftarten).
Layout (Aufteilen von Text in Zeilen).
Formen, Formen (Berechnung von Glyphen und ihrer Positionen).
Rasterisierung der erforderlichen Glyphen zum Texturatlas / Cache).
Zusammensetzung (Kopieren von Glyphen aus dem Atlas an die gewünschte Position).

Leider sind diese Schritte nicht so einfach, wie es scheint.

Die meisten Schriftarten produzieren bei Bedarf nicht alle möglichen Glyphen. Da es zu viele Glyphen gibt, implementieren Schriftarten normalerweise nur einen bestimmten Buchstaben. Endbenutzer wissen dies normalerweise nicht oder kümmern sich nicht darum. Daher sollte ein zuverlässiges System zu anderen Schriftarten wechseln, wenn keine Zeichen verfügbar sind.

Obwohl das Markup des folgenden Textes nicht mehrere Schriftarten impliziert , ist es für ein ordnungsgemäßes Rendern auf jedem System erforderlich: Hallo

मनी ب بسم 好. Wir nähern uns also gefährlich der Tatsache, dass Schritt 1 (Stilisierung) von Schritt 3 (Formgebung) abhängt!

(Alternativ können Sie den Noto-Ansatz verwenden und eine einzelne Uber-Schriftart verwenden, die alle Zeichen enthält. Obwohl Benutzer die Schriftart dann nicht konfigurieren können und Sie Benutzern auf allen Plattformen keine „native“ Textschnittstelle bereitstellen können. Angenommen, Sie benötigen eine zuverlässigere Entscheidung).

Ebenso müssen Sie für das Layout wissen, wie viel Platz jedes Textstück einnimmt, dies wird jedoch erst nach dem Formen bekannt! Hängt Schritt 2 von den Ergebnissen von Schritt 3 ab?

Aber um zu formen, muss man Layout und Stil kennen, also scheinen wir festzustecken. Was tun?

Erstens werden bei der Stilisierung Cheats angewendet. Obwohl wir wirklich vollständige Glyphen erhalten möchten, reichen Skalare für das Styling aus. Wenn die Schrift das Schreiben nicht richtig unterstützt, erhebt sie keinen Anspruch darauf, etwas über Skalare dieser Schrift zu wissen. So können Sie leicht die "beste" Schriftart wie folgt finden:

Für jedes Symbol (EGC) in unserem Text fragen wir jede Schriftart in der Liste (Kaskade) ab, ob alle Skalare, aus denen dieses Symbol besteht, bekannt sind. Wenn ja, verwenden Sie sie. Wenn wir ohne Ergebnis am Ende der Liste ankommen, erhalten wir Tofu (

fehlender Glyphenindikator).

Sie haben wahrscheinlich schon einen solchen Indikator gesehen, als Sie sich mit Emoji getroffen haben! Da einige Emojis tatsächlich Ligaturen mehrerer einfacherer Emojis sind, kann eine Schriftart die Unterstützung eines Zeichens anzeigen, indem nur einzelne Komponenten ausgegeben werden. Auf diese Weise,

kann buchstäblich so aussehen

wenn die Schriftart "zu alt" ist, um über die neue Ligatur Bescheid zu wissen. Dies kann auch passieren, wenn Sie eine "zu alte" Unicode-Implementierung haben, die nichts über das neue Zeichen weiß, und das Stilsystem dazu zwingen, eine solche teilweise Übereinstimmung zu akzeptieren.

Jetzt wissen wir genau, welche Schriftarten wir verwenden werden, ohne auf Layout oder Form verweisen zu müssen (obwohl die Formgebung unsere Farben ändern kann, mehr dazu in den nächsten Abschnitten). Können wir in ähnlicher Weise mit der gegenseitigen Abhängigkeit von Layout und Form umgehen? Nein! Dinge wie Absatzumbrüche geben Ihnen einen harten Zeilenumbruch, aber die einzige Möglichkeit zum Formen ist das iterative Formen!

Es muss davon ausgegangen werden, dass der Text in einer Zeile steht, und diese Zeile bilden, bis der Platz leer ist. An diesem Punkt können Sie Satzvorgänge ausführen und herausfinden, wo der Text unterbrochen werden soll, und die nächste Zeile beginnen. Wiederholen, bis alles erledigt ist.

3. Text besteht nicht aus separaten Zeichen

Nur nach Englisch zu urteilen, könnte man denken, dass Ligaturen eine Art bizarrer Unsinn sind. Ich meine, wen interessiert es wirklich, dass "æ" "ae" geschrieben wird? Es stellt sich jedoch heraus, dass einige Sprachen im Wesentlichen ausschließlich aus Ligaturen bestehen. Zum Beispiel besteht ड् ب بسم aus den einzelnen Zeichen «ب ب س م. In jedem erweiterten Textwiedergabesystem (dh in jedem der Hauptbrowser) sehen diese beiden Zeilen sehr unterschiedlich aus.

Und nein: Es geht nicht um den Unterschied zwischen Unicode-Skalaren und erweiterten Graphemclustern. Wenn Sie ein zuverlässiges Unicode-System (z. B. Swift) bitten, Cluster erweiterter Grapheme dieser Linie anzugeben, werden diese fünf Zeichen ausgegeben!

Die Form des Zeichens hängt von seinen Nachbarn ab: Der Text kann Zeichen für Zeichen nicht korrekt anzeigen .

Das heißt, Sie sollten eine Shaping-Bibliothek verwenden. Der Industriestandard hier ist HarfBuzz , und diese Aufgaben sind auf eigene Faust äußerst schwer zu lösen. Verwenden Sie also HarfBuzz.

3.1. Textüberlagerung

In handgeschriebenen Schriftarten überlappen sich Glyphen häufig, um Nähte zu vermeiden. Dies kann zu Problemen führen.

Schauen wir uns noch einmal मनी م منش an. Sieht es normal aus Jetzt erhöhen:

Es scheint immer noch schön, aber lassen Sie uns den Text teilweise transparent machen. Wenn Sie auf Safari oder Edge sind, sieht der Text möglicherweise gut aus! Aber auf Firefox oder Chrome ist die Aussicht schrecklich:

Das Problem ist, dass Chrome und Firefox versuchen zu betrügen . Sie haben den Text korrekt geformt, aber sobald sie auf solche Glyphen stoßen, versuchen sie immer noch, sie separat zu zeichnen. Dies funktioniert normalerweise einwandfrei, es sei denn, es gibt Transparenz und Überlappung, die ein solches Dimmen erzeugen.

Eine „korrekte“ Implementierung bringt den Text auf eine temporäre Oberfläche ohne Transparenz und dann auf die Szene mit Transparenz. Firefox und Chrome tun dies nicht, da es teuer ist und normalerweise nicht für wichtige westliche Sprachen benötigt wird. Interessanterweise verstehen sie das Problem wirklich, weil sie ein solches Skript speziell für Emoji verarbeiten (aber wir werden später darauf zurückkommen).

3.2. Der Stil kann die Ligatur verändern

Okay, dieses Beispiel analysieren wir hauptsächlich aus Neugier, wie Markups brechen können, obwohl ich keine vernünftigen Szenarien kenne, in denen es wirklich weh tun kann. Hier sind zwei Textteile mit demselben Inhalt, aber unterschiedlichen Farben:

So sehen sie in Safari aus:

So sehen sie in Chrome aus (bei Verwendung der neuen Modellimplementierung ):

Und hier sind sie in Firefox:

Zusammenfassend:

Safari ist unzureichend
Chrome analysiert Glyphen, lässt jedoch viele Farben fallen
Firefox analysiert gleichzeitig Glyphen und zeigt Farben an

Ich denke, jeder sollte auf Firefox sein, oder? Aber wenn Sie hineinzoomen, werden wir sehen, dass er etwas sehr Seltsames tut:

Er hat diese Ligatur einfach in vier gleiche Teile mit verschiedenen Farben geteilt!

Das Problem ist, dass es wirklich keine vernünftige Antwort darauf gibt, was hier zu tun ist. Wir haben die Ligatur in verschiedene Stile unterteilt, und da die Ligatur gewissermaßen eine „Einheit“ des Renderns ist, ist es sinnvoll, sich einfach zu weigern, eine solche Trennung zu unterstützen (wie die meisten).

Aus irgendeinem Grund war jemand in Firefox wirklich begeistert von einer eleganteren Implementierung . Sein Ansatz ist es, mehrmals eine Ligatur mit optimalen Masken und verschiedenen Farben zu zeichnen, was überraschend gut funktioniert!

Es ist sinnvoll, diese „Teilligaturen“ zu unterstützen: Nur die Formgebung kann wissen, ob eine bestimmte Ligatur angezeigt wird, und dies hängt von den Systemschriftarten ab, sodass die Ligatur möglicherweise dort erscheint, wo niemand sie erwartet hat! Ein klassisches Beispiel in englischer Sprache ist eine Ligatur æ aus einer vom Benutzer installierten Schriftart am Rand eines Hyperlinks.

Es ist auch ziemlich seltsam, dass sich Englisch in der Mitte eines Wortes ändern kann, aber keine handgeschriebenen Schriftarten?

Fragen Sie nicht einmal nach Code, der Linien mit Teilligaturen bricht.

4. Emoji brechen Farbe und Stil

Wenn Sie Emojis wie das native System anzeigen, müssen Sie die Einstellungen für die Textfarbe ignorieren (mit Ausnahme der Transparenz):

Normalerweise haben Emojis ihre eigenen natürlichen Farben, und diese Farbe kann sogar eine semantische Bedeutung haben, wie dies bei Hautfarbmodifikatoren der Fall ist. Außerdem: Sie können mehrere Farben haben!

Soweit ich das beurteilen kann, gab es vor Emoji kein solches Problem, daher haben verschiedene Plattformen unterschiedliche Lösungsansätze. Einige zeigen Emojis als festes Bild (Apple), andere als eine Reihe von monochromen Ebenen (Microsoft).

Der letztere Ansatz ist nicht schlecht, da er sich gut in vorhandene Text-Rendering-Pipelines integriert und die Glyphe „nur“ in eine Reihe von monochromen Glyphen aufteilt, mit denen jeder gewohnt ist, zu arbeiten.

Dies bedeutet jedoch, dass sich Ihr Stil beim Zeichnen eines „einzelnen“ Glyphen wiederholt ändern kann. Dies bedeutet auch, dass sich die Glyphe „eins“ überlappen kann, was zu den im vorherigen Abschnitt erwähnten Transparenzproblemen führt. Trotzdem kombinieren Browser die Transparenz von Ebenen in Emojis wirklich richtig!

Diese Diskrepanz kann auf drei Arten erklärt werden:

Sie suchen bereits nach farbigen Glyphen, um sie auf besondere Weise zu verarbeiten. Daher können sie leicht einen speziellen Layoutpfad auswählen.
Handgeschriebene Schriftarten mit schlechter Transparenz sehen ein wenig hässlich aus, aber Emojis brechen vollständig zusammen und verwandeln sich in einen unleserlichen Zeichensatz, sodass die zusätzliche Arbeit gerechtfertigt ist.
Westliche Entwickler interessieren sich mehr für Emojis als für Sprachen wie Arabisch und Marathi.

Wählen Sie die Option nach Ihrem Geschmack.

Und doch, wie kann man ein Emoticon kursiv oder fett hervorheben? Diese Stile ignorieren? Sollten sie synthetisiert werden? Wer weiß…

Scheinen diese Emojis nicht seltsam klein?

Ja, aus irgendeinem Grund erhöhen einige Systeme heimlich die Schriftgröße für Emojis, damit sie besser aussehen.

5. Glätten ist die Hölle

Die Zeichen im Text sind sehr klein und detailliert. Es ist sehr wichtig, dass der Text leicht zu lesen ist. Klingt nach einer Glättungsaufgabe! Zur Hölle, 480p ist wirklich eine niedrige Auflösung. Mehr Glättung !!!

Es gibt also zwei Haupttypen:

Graustufenglättung
Subpixel-Glättung

Graustufenglättung ist ein „natürlicher“ Ansatz. Die Grundidee ist, dass teilweise beschichtete Pixel teilweise Transparenz erhalten. Während der Komposition erhält das Pixel den richtigen Farbton, wodurch die Gesamtdetails verbessert werden.

Der Begriff „Graustufen“ wird für eindimensionale Farben verwendet, genau wie unsere eindimensionale Transparenz (ansonsten werden die Glyphen in einer Volltonfarbe angezeigt). Darüber hinaus zeigt Anti-Aliasing in einer typischen Situation mit schwarzem Text auf weißem Hintergrund an den Rändern buchstäblich Graustufen an.

Subpixel-Anti-Aliasing ist ein Trick, der die normale Platzierung von Pixeln auf Monitoren missbraucht. Es ist viel komplizierter. Wenn Sie also wirklich interessiert sind, müssen Sie eine detailliertere Dokumentation lesen. Hier finden Sie nur eine kurze Beschreibung des übergeordneten Konzepts.

Die Pixel in Ihrem Monitor sind eigentlich drei kleine Spalten in Rot, Grün und Blau. Wenn du rot werden willst, sagst du sozusagen „weiß schwarz schwarz“. Wenn Sie eine blaue Farbe erhalten möchten, geben Sie auf die gleiche Weise "schwarz schwarz weiß" an. Mit anderen Worten, wenn Sie an Blumen basteln, können Sie die horizontale Auflösung verdreifachen und viel mehr Details erhalten!

Sie könnten denken, dass ein solcher „Regenbogen“ sehr hässlich wäre, aber in der Praxis funktioniert das System ziemlich gut (obwohl einige damit nicht einverstanden sind). Das menschliche Gehirn liebt es, Muster zu erkennen und zu glätten. Wenn Sie jedoch einen Screenshot des Texts mit Subpixel-Glättung aufnehmen, werden alle zusätzlichen Farben deutlich angezeigt, wenn Sie die Bildgröße ändern oder es einfach auf dem Monitor mit einem anderen Subpixel-Layout betrachten. Aus diesem Grund sehen Screenshots mit Text oft sehr seltsam und schlecht aus.

(Im Allgemeinen bedeutet dieses System auch, dass die Farbe des Symbols versehentlich seine wahrgenommene Größe und Position ändern kann, was sehr ärgerlich ist.)

Subpixel-Anti-Aliasing ist also ein wirklich sauberer Hack, der die Textverständlichkeit erheblich verbessern kann. Großartig! Aber leider ist das auch ein riesiger Splitter im Arsch!

Beachten Sie, dass in jedem Anti-Aliasing-System Subpixel-Glyphenverschiebungen auftreten. Sie möchten immer, dass Ihre gerasterten Glyphen auf volle Pixel ausgerichtet werden. Die Rasterung selbst ist jedoch für einen bestimmten Subpixel-Offset (einen Wert zwischen 0 und 1) ausgelegt.

Um dies zu verstehen, stellen Sie sich ein 1x1 schwarzes Quadrat mit Graustufenglättung vor:

Wenn der Subpixel-Offset 0 ist, wird während der Rasterung nur ein schwarzes Pixel ausgegeben.
Wenn der Subpixel-Offset 0,5 beträgt, werden beim Rastern zwei Pixel mit 50% Grau ausgegeben.

5.1. Subpixel-Offsets unterbrechen den Glyphen-Cache

Das Rastern von Glyphen erfordert einen erstaunlichen Rechenaufwand. Daher ist es viel besser, sie in einem Texturatlas zwischenzuspeichern. Aber wie werden Texturen mit Subpixel-Offsets zwischengespeichert? Jeder Offset hat seine eigene Rasterung!

Hier müssen Sie einen Kompromiss zwischen Qualität und Leistung finden. Dies kann durch Optimierung der Subpixel-Offsets erreicht werden. Für den englischen Text wäre ein angemessenes Gleichgewicht das Fehlen einer vertikalen Subpixel-Genauigkeit, wobei der horizontale Versatz an eine viertel Ganzzahl gebunden ist. Dies lässt nur vier Subpixel-Positionen übrig, was die Qualität bei gleichbleibender Cache-Größe noch erheblich verbessert.

5.2. Das Glätten von Subpixeln kann nicht zusammengesetzt werden

Ein schönes Merkmal von Anti-Aliasing in Graustufen ist, dass Sie frei damit spielen können und es sich anmutig verschlechtert. Wenn Sie beispielsweise eine Textur mit Text konvertieren (Skalierung, Drehung oder Transformation), wird sie möglicherweise etwas verschwommen, sieht aber im Allgemeinen normal aus.

Wenn Sie dasselbe mit Subpixel-Anti-Aliasing tun, sieht es schrecklich aus. Seine ganze Idee ist es, die Pixel auf dem Display zu manipulieren. Wenn die Anzeigepixel nicht mit den Pixeln Ihrer Textur übereinstimmen, sind die roten und blauen Ränder deutlich sichtbar!

Sie könnten denken, dass dies einfach durch eine neue Glyphenrasterung an einem neuen Ort „behoben“ wird. Wenn die Konvertierung statisch ist, funktioniert dies möglicherweise. Aber wenn die Transformation eine Animation ist , wird es noch schlimmer. Dies ist tatsächlich ein sehr häufiger Browserfehler: Wenn nicht festgestellt wird, dass die Animation mit dem Text stattfindet, zucken die Zeichen, da jede Glyphe zwischen verschiedenen Subpixel-Bindungen mit Hinweisen auf jedes Bild springt.

Infolgedessen enthalten Browser mehrere Heuristiken, um solche Animationen zu erkennen, um das Subpixel-Anti-Aliasing für diesen Teil der Seite (und im Idealfall sogar die Subpixel-Positionierung) zu deaktivieren. Es ist ziemlich schwierig, es zuverlässig zu implementieren, da eine Animation von einem beliebig komplexen JS ausgelöst werden kann, ohne dem Browser klare „Hinweise“ zu geben.

Darüber hinaus ist die Subpixel-Glättung bei teilweiser Transparenz schwierig anzuwenden. Tatsächlich konfigurieren wir hier unsere Kanäle R, G und B so, dass drei Transparenzwerte (einer für jedes Subpixel) codiert werden, aber der Text selbst hat auch eine Farbe und einen Hintergrund, sodass Informationen leicht verloren gehen.

Bei Verwendung von Graustufen-Anti-Aliasing verfügen wir über einen dedizierten Alphakanal, sodass nichts verloren geht. Daher verwenden Browser normalerweise Graustufen, um mit durchscheinenden Objekten zu arbeiten.

... außer Firefox. Wieder wurde in dieser seltsamen Organisation jemand wirklich mitgerissen und tat etwas Kompliziertes: eine Alpha-Komponente. Es stellt sich heraus, dass Sie Text mit Subpixel-Anti-Aliasing tatsächlich korrekt komponieren können, dies erfordert jedoch drei zusätzliche Transparenzkanäle für R, G und B. Es ist nicht überraschend, dass ein solches Anti-Aliasing den Speicherverbrauch verdoppelt.

Glücklicherweise hat die Subpixel-Glättung im Laufe der Jahre an Relevanz verloren:

Retina-Displays brauchen es überhaupt nicht.
Das Subpixel-Layout auf Telefonen blockiert diesen Trick (ohne ernsthafte Arbeit).
In neueren Versionen von MacOS ist Subpixel-Text auf Betriebssystemebene standardmäßig deaktiviert.
Chrome scheint aggressiver beim Deaktivieren des Subpixel-Anti-Aliasing zu sein (nicht sicher, ob dies die genaue Richtlinie ist).
Das neue grafische Firefox-Backend (Webrender) hat die Alpha-Komponente der Einfachheit halber aufgegeben.

6. Esoterisch

Dieser Teil ist nur eine Sammlung kleiner Dinge, die nicht viel Diskussion verdienen.

6.1. Schriftarten können SVG enthalten

Das ist scheiße. Diese Schriftarten werden größtenteils von Adobe bereitgestellt, da sie vor einiger Zeit ziemlich gut in die SVG-Datei aufgenommen wurden. Manchmal können Sie Teile von SVG einfach ignorieren (ich glaube, dass die Source Code Pro-Schriftart technisch einige SVG-Glyphen enthält, aber in der Praxis werden sie nicht von Websites verwendet), aber im Allgemeinen müssen Sie die SVG-Unterstützung implementieren, um alle Schriftarten formal zu unterstützen.

Und haben Sie schon von SVG-animierten Schriftarten gehört ? Nein? Gut. Ich denke, dass sie entweder kaputt sind oder nicht überall implementiert sind (Firefox hat sie versehentlich für eine Weile unterstützt, weil sie von einem begeisterten Entwickler entwickelt wurden).

6.2. Charaktere können verdammt groß sein

Wenn Sie die Anforderung eines Benutzers nach einer sehr großen Schriftart (oder einer sehr großen Zoomstufe) naiv erfüllen möchten, treten bei einem Glyphenatlas dieser Größe extreme Speicherverwaltungsprobleme auf, da jedes Zeichen größer als der gesamte Bildschirm sein kann. Es gibt verschiedene Möglichkeiten, damit umzugehen:

Weigere dich, eine Glyphe zu zeichnen (trauriger Benutzer).
Rasteren Sie die Glyphe in einer kleineren Größe und erhöhen Sie die Skalierung während der Komposition (dies ist einfach, bildet jedoch Unschärfen an den Rändern).
Rasterisieren Sie die Glyphe direkt auf der Oberfläche nach der Zusammensetzung (schwierig, möglicherweise teuer).

6.3. Die Auswahl ist kein Rahmen, aber der Text geht in alle Richtungen

Die Leute wissen normalerweise, dass die Hauptrichtung des Textes von links nach rechts (Englisch), von rechts nach links (Arabisch) oder von oben nach unten (Japanisch) sein kann.

Also, hier ist ein lustiger Text für dich:

Hallo allerseits بسم الله لا Beep Beep !!

Wenn Sie Text auf dem Desktop mit der Maus von links nach rechts auswählen, wird die Auswahl zeitweise und zuckt seltsamerweise in der Mitte. Dies liegt daran, dass wir Text in einer Zeile von links nach rechts und von rechts nach links mischen, was die ganze Zeit passiert.

Zuerst erhöht die Auswahl rechts die Auswahl, verringert sie dann aber, bis sie plötzlich wieder zunimmt. Das ist eigentlich ganz richtig: Die Auswahl bleibt einfach stetig auf der eigentlichen Linie . So können Sie einen Text korrekt kopieren.

Sie müssen dies in Ihrem Code berücksichtigen, um Text hervorzuheben, sowie im Zeilenumbruchalgorithmus für das Layout.

Das ist aber noch nicht alles.

Ich hoffe, Sie müssen sich nicht mit solchen Dingen befassen.

6.4. Wie schreibe ich, was unmöglich zu schreiben ist?

Wenn die Schrift keine Zeichen enthält, ist es hilfreich, den Benutzer darüber zu informieren. Hierfür ist der Buchstabe „Tofu“ vorgesehen. Sie können einfach einen leeren Tofu (Rechteck) zeichnen und sich darauf beschränken. Wenn Sie jedoch wirklich nützliche Informationen bereitstellen möchten, können Sie den Wert des fehlenden Zeichens schreiben, um das Debuggen zu vereinfachen.

Aber warten Sie, wir verwenden Text, um zu erklären, dass wir den Text nicht ausgeben können. Hm.

Sie können sagen, dass es im System eine Grundschrift geben sollte, die immer die Zeichen 0-9 und AF anzeigt, aber dies ist eine Annahme für Weicheier. Wenn der Benutzer seine Werkzeuge mit seinen Werkzeugen wirklich zerstört hat, bietet Firefox einen Ausweg: eine Mikroschrift!

In Firefox gibt es eine kleine, hartcodierte Anordnung von Ein-Bit-Pixelkunst mit einem winzigen Atlas mit genau diesen 16 Zeichen. Wenn er Tofu zeichnet, kann er diese Zeichen weiterleiten, ohne sich um Schriftarten kümmern zu müssen.

6.5. Der Stil ist Teil der Schriftart (sofern dies nicht der Fall ist).

Hochwertige Schriftarten werden zunächst mit Stilen wie Kursiv und Fett geliefert , da es keine einfache algorithmische Möglichkeit gibt, diese Effekte schön anzuzeigen.

Einige Schriftarten werden jedoch ohne diese Stile geliefert, sodass Sie immer noch eine einfache algorithmische Methode benötigen, um diese Effekte zu erzielen.

Die genaue Erkennung und Verarbeitung von Stilen hängt stark vom System und von meinem Fachgebiet ab, daher kann ich sie nicht gut erklären. Ich würde mich nur mit dem Code für die Schriftbehandlung in Webrender befassen .

In jedem Fall benötigen Sie einen synthetischen Fallback. Glücklicherweise ist die Implementierung eigentlich recht einfach:

Synthetische Kursivschrift: Kippen Sie jede Glyphe.

Synthetisch fett: Zeichnen Sie jede Glyphe mehrmals mit einem leichten Versatz in Richtung des Textes.

Ehrlich gesagt, machen diese Ansätze ziemlich gut! Aber Benutzer können bemerken, dass alles "falsch" scheint. Daher können Sie es besser machen, wenn Sie sich anstrengen.

6.6. Keine perfekte Textwiedergabe

Jede Plattform hat ihre Fehler, Optimierungen und Macken so lange gehabt, dass sie zur Ästhetik geworden sind. Selbst wenn Sie fest davon überzeugt sind, dass bestimmte Dinge ideal oder wichtig sind, wird es daher immer eine große Gruppe von Benutzern mit unterschiedlichen Vorlieben geben. Ein robustes Textvisualisierungssystem unterstützt diese verschiedenen Einstellungen (bei Auswahl angemessener Standardeinstellungen).

Ihre Konfigurationen sollten das System des Benutzers, bestimmte Schriftarten, bestimmte Anwendungen und bestimmte Texte berücksichtigen. Sie sollten auch versuchen, das native "Aussehen" jeder Plattform (solche Macken) anzupassen.

Dies beinhaltet:

Möglichkeit, das Subpixel-Anti-Aliasing zu deaktivieren (manche hassen es wirklich).
Die Fähigkeit, jegliches Anti-Aliasing auszuschalten (ja, die Leute tun dies).
Eine Menge plattform- / formatspezifischer Eigenschaften wie Hinweise, Glättung, Variationen, Gamma usw.

Dies bedeutet auch, dass native Textbibliotheken verwendet werden sollten , um der Ästhetik jedes Systems (Kerntext, DirectWrite und FreeType auf ihren jeweiligen Plattformen) zu entsprechen.

7. Zusätzliche Links

Hier sind einige weitere Artikel über den Alptraum der Textwiedergabe:

Text-Rendering hasst dich