So entwickeln Sie einen Texteditor für das Web

Ich arbeite für Readymag, das ein browserbasiertes Designtool herstellt, das Menschen dabei hilft, Websites, Portfolios und alle Arten von Online-Publikationen ohne Programmierung zu erstellen. In unserem Tool sind viele Widgets verfügbar, und das Text-Widget ist eines der am häufigsten verwendeten.

Das Text-Widget ist ein Texteingabefeld, in dem der Benutzer Text mit einer Reihe von Steuerelementen im Editor formatieren kann. Jedes Steuerelement wendet eine CSS-Eigenschaft auf den Text an. Von der Benutzerseite sieht es aus wie ein gewöhnliches Feld zur Eingabe von Text, aber hinter seiner scheinbaren Einfachheit verbergen sich eine Vielzahl komplexer Prozesse.

In diesem Artikel erkläre ich die Herausforderungen, mit denen mein Unternehmen konfrontiert war, und die Lösungen, mit denen wir ein Text-Widget in unserer Anwendung erstellt haben. Ich werde auch darauf eingehen, wie wir es implementiert haben und was wir dabei gelernt haben – und wie das Tippen im Internet im Allgemeinen funktioniert.

Bearbeiten von Text im Web

Es gibt mehrere Möglichkeiten, Texteingabefelder im Web zu implementieren. Wir könnten ein einfaches Textfeld oder ein mehrzeiliges textarea -Element oder das contenteditable -Attribut verwenden, um eine Eingabe bearbeitbar zu machen, oder document.designMode = on . Wie unterscheiden sie sich?

Die input und textarea -Elemente eignen sich ideal zum Hinzufügen von Text zu einer Seite, bieten jedoch keine umfassende Textformatierung. Dazu können wir das contenteditable -Attribut verwenden, um fast jedes Element editierbar zu machen und die Verwendung von Textstilen zu ermöglichen.

Wenn Sie die gesamte Seite auf einmal bearbeiten müssen, können Sie document.designMode verwenden. In diesem Modus kann jedes Element innerhalb eines bestimmten Dokuments bearbeitet werden, sogar ein iframe .

Wir haben uns für das contenteditable -Attribut entschieden, das alle notwendigen Textbearbeitungsfunktionen enthält. Mit diesem Attribut wird jeder Text auf der Seite bearbeitbar, was sehr wichtig ist, wenn wir es Menschen ermöglichen möchten, Text mit CSS zu gestalten . Nutzer könnten dann beispielsweise ausgewählte Abschnitte oder den gesamten Text direkt stylen.

Textstile und Schrifteigenschaften

Wir ermöglichen Benutzern, Text nach Belieben zu gestalten, indem wir Zugriff auf alle Optionen bieten, die CSS standardmäßig bereitstellt. Zusätzlich zu den bekannten Eigenschaften wie Schriftart, Stil, Farbe und Dekoration geben wir Benutzern die Möglichkeit, OpenType-Schriftmerkmale wie Ligaturen, Stilsätze, Brüche usw. zu verwenden. Diese Funktionen funktionieren über die CSS-Eigenschaft font-feature-settings , mit der Benutzer Textstile anpassen können.

Hinweis : Ich empfehle dringend, den hervorragenden Artikel von Sparanoid zu lesen, in dem alle Funktionen von OpenType vorgestellt werden.

Die moderne Typografie hat einen großen Schritt nach vorne gemacht und ermöglicht die Verwendung variabler Schriftarten im Web über die Eigenschaft font-variation-settings .

Jede variable Schriftart hat variable Eigenschaften, deren Werte Sie ändern können. Bei einer Standardschriftart können Sie beispielsweise die Schriftstärke mit streng festgelegten Werten ( 400 , 500 , 600 usw.) ändern, während Sie bei einer variablen Schriftart jeden Wert im verfügbaren Bereich verwenden können, was umfangreichere Möglichkeiten bietet für die Textgestaltung.

 .style-1 { font-weight: 600; } .style-2 { font-variation-settings: "wght" 777; }

Unten sehen Sie ein Beispiel dafür, wie das Arbeiten mit einer variablen Schriftart in einem Text-Widget aussieht.

Zusätzlich zu den registrierten Werten ( wght , wdth , slnt usw.) können Schrifthersteller auch ihre eigenen einzigartigen Schriftmerkmale erstellen (wie im obigen Beispiel). Um unseren Nutzern die Möglichkeit zu geben, alle möglichen Schriftfunktionen nutzen zu können, benötigen wir diese Informationen zunächst.

Alle Funktionen, die Sie verwenden möchten, sollten in der Schriftartdatei definiert sein. Schauen wir uns seine Spezifikationen an. Jede Schriftart kann in Form von Tabellen dargestellt werden, die alle verschiedenen Informationen bereitstellen, die beim Rendern ihrer Zeichen verwendet werden.

Wir verwenden zwei Tabellen, um diese Informationen über Schriftarten zu sammeln:

1. Glyphen-Ersetzungstabelle
   Die Glyphen-Ersetzungstabelle (GSUB) enthält eine Liste von Glyphen-Wiedergabedaten. Das GSUB.featureList Objekt ist eine Aufzählung von Schriftartfunktionen und ihren Eigenschaften. Sie können ein Beispiel für Daten in der Tabelle auf GitHub anzeigen. In dieser Tabelle ist das tag Feld am interessantesten. Dies ist der Name der Schriftartfunktion und zeigt an, dass diese Funktion mit dieser Schriftart verfügbar ist. Wir können das tag sicher in der font-feature-settings .
2. Tabelle der Schriftvariationen
   Die Schriftartvariationstabelle (fvar) ist eine Darstellung der variablen Eigenschaften, die einer Schriftart zugeordnet sind. Ein Beispiel der Tabelle ist auch auf GitHub verfügbar. Jedes Objekt ist eine Schriftarteigenschaft mit einer Beschreibung möglicher Werte ( min , max , default) und einem lokalisierten Namen (falls vorhanden). Wir verwenden diese Werte mit der Eigenschaft font-variation-settings .

Mit Hilfe dieser beiden Tabellen können wir alle unsere Anforderungen abdecken: mit variablen Schrifteigenschaften und verschiedenen Schriftmerkmalen. Die resultierenden Daten werden in den Text-Widget-Steuerelementen im Editor angezeigt, wo Benutzer Text ohne Verwendung von Code formatieren können.

Verwenden Ihrer Tastatur

Die Texteingabe ist einer der wichtigsten Aspekte der Benutzererfahrung von Text-Widgets. Neben der Aktivierung von Shortcuts für die Arbeit mit Text mussten wir einige ungewöhnliche Herausforderungen bewältigen. Das Navigieren im Text mit den Pfeiltasten war definitiv eine davon.

Während der Benutzer bearbeitet, zeigt das Text-Widget auch versteckte Zeichen, wie z. B. geschützte Leerzeichen und Zeilenumbrüche. Sie sind als in den Text eingefügte SVG-Icons implementiert, was ein Problem darstellt: Wenn wir contenteditable verwenden, dann hindern diese Icons Benutzer daran, ihren Cursor mit den Pfeiltasten zu bewegen.

Die Lösung ist ganz einfach: Verwenden Sie eine span und das Pseudo-Element :before . Auf diese Weise nimmt der Browser das Symbol als Text wahr und die Pfeiltasten funktionieren hervorragend.

 span:before { content: ""; height: 1em; position: relative; background-repeat: no-repeat; background-image: url("data:image/svg+xml,..."); background-position: center bottom; background-size: 1em; }

Abkürzungen

Es gibt zwei Tastenkombinationen zum Einfügen von Text in ein Text-Widget.

Cmd / Strg + V fügt Text aus der Zwischenablage ein und behält alle Stile im Originaldokument bei. Wenn der Text aus einer Anwendung wie Pages, Notes, Word oder Google Docs kopiert wurde, enthält Ihre Zwischenablage HTML-Informationen und nicht nur einfachen Text. Dieser HTML-Code kann analysiert und eingefügt werden, während die ursprünglichen Stile beibehalten werden.

Sie können die HTML-Daten wie folgt abrufen:

 // https://www.w3.org/TR/clipboard-apis/#reading-from-clipboard document.addEventListener('paste', (e) => { const text = e.clipboardData.getData('text/plain'); const html = e.clipboardData.getData('text/html'); handlePaste(); });

Außerdem haben wir die Tastenkombination Cmd + Shift + V. Wenn Sie mit dieser Tastenkombination Text einfügen, belässt der Browser die einfachen Daten in der Nutzlast, sodass die Gestaltung durch das Einfügeziel gesteuert wird. Diese Verknüpfungen sind standardmäßig im Browser vorhanden, aber Sie müssen daran denken, sie in Ihrem Projekt zu implementieren.

Textauswahl und Fokus

Die Textauswahl hilft Benutzern zu sehen, welcher Textteil gerade bearbeitet wird. Versuchen wir es mit einem einfachen Beispiel: Ein Eingabefeld mit einer Schaltfläche zur Steuerung der Fettschrift des Textes.

In diesem Beispiel können wir einen Text auswählen und die Schaltfläche „ Bold “ drücken, und die Auswahl im Text bleibt danach erhalten. Was aber, wenn unser Beispiel komplizierter ist? Angenommen, wir fügen der Textgrößenauswahl ein Eingabefeld hinzu. In diesem Fall verschiebt sich der Fokus auf die neue Eingabe.

Zur Lösung dieses Problems gibt es zwei Möglichkeiten :

• Nach jedem Eingabeereignis zwingen wir den Fokus zurück zum Textblock. In diesem Fall beginnt die Auswahl nach einer bestimmten Anzahl von Eingabeereignissen zu blinken – das wollen wir nicht.
• Wir können den Textblock zu einem iframe hinzufügen. Wie Sie wahrscheinlich wissen, hat ein iframe sein eigenes globales window . Solange sich die Auswahl also innerhalb des iframe befindet, bleibt sie bestehen, auch wenn der Fokus nach außen verschoben wird.

Am Ende haben wir ein iframe -Wrapping-Text-Widget erhalten. Solange sich die Auswahl also innerhalb des iframe befindet, bleibt sie bestehen, auch wenn der Fokus nach außen verschoben wird. Schauen Sie sich den Screenshot unten an. Wir haben zwei Auswahlmöglichkeiten auf der Seite: das ausgewählte Fragment im Text-Widget und den ausgewählten Wert der Textgröße im Steuerelement.

Leistung während der Texteingabe

Die Reaktionsfähigkeit Ihrer Textbearbeitungsoberfläche ist wichtig. Überwachen Sie den Frames-per-Second (FPS)-Wert genau, insbesondere wenn es um Aufgaben wie das Bearbeiten von Text mit hoher Geschwindigkeit oder das Ändern der Schriftgröße geht.

Readymag hat zwei Ansichtsfenster: Desktop und Mobil . Textstile können jeweils unterschiedlich erscheinen. Während der Text eingegeben wird, führt der Editor verschiedene Berechnungen durch, um Daten zwischen Ansichtsfenstern zu synchronisieren. Eine hohe Reaktionsfähigkeit wird durch die Verwendung der Browser-API erreicht: requestAnimationFrame und requestIdleCallback :

• requestAnimationFrame wird jedes Mal aufgerufen, wenn der Bildschirm aktualisiert wird;
• requestIdleCallback wird nur aufgerufen, wenn der Browser im Leerlauf ist.

Dies ist eine großartige Möglichkeit, langwierige Operationen durchzuführen, ohne den Haupt-Thread zu blockieren.

Barrierefreiheit

Die Ermöglichung der Barrierefreiheit ist heute eine der wichtigsten Praktiken in der Webentwicklung. Wenn Ihre Website barrierefrei gestaltet ist , erhalten mehr Menschen Zugriff auf Ihr Produkt . Das bedeutet, nicht nur Menschen mit Behinderungen, sondern auch Benutzer auf verschiedenen Plattformen unterzubringen: Desktop- und Touch-Geräte, Screenreader, Hörgeräte und so weiter. Um zu verstehen, wie wichtig es sein kann, Projekte barrierefrei zu machen, empfehle ich, sich die aktuellen Statistiken zur Barrierefreiheit anzusehen.

Um mit der Einführung von Praktiken zur Barrierefreiheit im Internet zu beginnen, sehen Sie sich zunächst die Richtlinien für barrierefreie Webinhalte (WCAG) an, die umfassendste Ressource zu diesem Thema. Und solange Readymag ein Tool für die Veröffentlichung ist, müssen wir uns neben den WCAG auch an die Authoring Tool Accessibility Guidelines (ATAG) halten.

Unser Team ist derzeit dabei, Barrierefreiheit in den Editor zu integrieren. In den folgenden Artikeln werden wir mehr über unseren Weg zur vollständigen Integration der Barrierefreiheit bei Readymag berichten. Sie können auch alle mit Readymag erstellten Arbeiten anhand unserer Barrierefreiheits-Checkliste überprüfen.

Empfohlene Vorgehensweise

Abschließend noch einige Tipps, die Ihnen bei der Entwicklung eines Texteditors im Web helfen:

• Denken Sie sorgfältig über das Layout nach.
  Legen Sie im Voraus fest, welche Funktionen Sie benötigen und wie Sie mit den Elementen im Texteditor arbeiten werden.
• Richten Sie visuelle Tests ein.
  Wenn Sie mit Text arbeiten, können Sie sich nicht vollständig auf das Ergebnis des Snapshot-Tests verlassen. Möglicherweise erhalten Sie im Test das richtige Ergebnis, wenn Sie das angegebene CSS für den Block erwarten, aber manchmal ist das Ergebnis möglicherweise nicht das, was Sie erwartet haben.
• Testen Sie Ihre Arbeit in verschiedenen Browsern.
  Während die meisten Browser neue Online-Funktionen einigermaßen gut unterstützen, gibt es oft Probleme mit der Anzeige der gleichen Stile in verschiedenen Browsern.
• Verwenden Sie Feature-Flags für eine sicherere Entwicklung neuer Features.
• Messen Sie FPS im Browser bei der Texteingabe.
  Führen Sie keine CPU-intensiven Aufgaben in einem einzigen Thread aus.
• Scheuen Sie sich nicht zu experimentieren .
• Probieren Sie zu guter Letzt das Text-Widget in Readymag aus.

Einige nützliche Links

• „Die vollständige CSS-Demo für OpenType-Funktionen“, Sparanoid
• „Einführung in variable Schriftarten im Web“, web.dev
• „Tolle Typografie“, Joel Galeran
• „Variable Schriftarten“, Nick Sherman
• Fontkit
• OpenType.js