Jak stworzyć edytor tekstu do internetu?

Pracuję dla Readymag, która tworzy narzędzie do projektowania oparte na przeglądarce, które pomaga ludziom tworzyć strony internetowe, portfolio i wszelkiego rodzaju publikacje online bez kodowania. W naszym narzędziu dostępnych jest wiele widżetów, a widżet tekstowy jest jednym z najczęściej używanych.

Widżet tekstowy to pole do wprowadzania tekstu, w którym użytkownik może stylizować tekst za pomocą różnych kontrolek w edytorze. Każda kontrolka stosuje właściwość CSS do tekstu. Od strony użytkownika wygląda jak zwykłe pole do wpisywania tekstu, ale za jego pozorną prostotą kryje się ogromna ilość skomplikowanych procesów.

W tym artykule wyjaśnię wyzwania stojące przed moją firmą oraz rozwiązania, które zastosowaliśmy do stworzenia widżetu tekstowego w naszej aplikacji. Zajmę się również tym, jak to zaimplementowaliśmy i czego się nauczyliśmy — oraz ogólnie, jak działa pisanie w Internecie.

Edytowanie tekstu w sieci

Istnieje kilka sposobów na zaimplementowanie pól do wprowadzania tekstu w Internecie. Moglibyśmy użyć prostego pola tekstowego, wielowierszowego elementu textarea lub atrybutu contenteditable , aby dane wejściowe były edytowalne, lub document.designMode = on . Czym się różnią?

Elementy input i textarea idealnie nadają się do dodawania tekstu do strony, ale nie zapewniają zaawansowanego formatowania tekstu. W tym celu możemy użyć atrybutu contenteditable , aby umożliwić edycję prawie każdego elementu i umożliwić korzystanie ze stylów tekstu.

Jeśli chcesz edytować całą stronę naraz, możesz użyć document.designMode . Ten tryb umożliwia edycję dowolnego elementu w danym dokumencie, nawet elementu iframe .

Zdecydowaliśmy się na atrybut contenteditable , który zawiera wszystkie niezbędne możliwości edycji tekstu. Dzięki temu atrybutowi każdy tekst na stronie staje się edytowalny, co jest bardzo ważne, jeśli chcemy umożliwić ludziom stylizowanie tekstu za pomocą CSS . Na przykład użytkownicy mogą następnie stylizować wybrane sekcje lub cały tekst bezpośrednio.

Style tekstu i właściwości czcionki

Umożliwiamy użytkownikom stylizowanie tekstu w dowolny sposób, zapewniając dostęp do wszystkich opcji, które oferuje CSS po wyjęciu z pudełka. Oprócz dobrze znanych właściwości, takich jak czcionka, styl, kolor i dekoracja, dajemy użytkownikom możliwość korzystania z funkcji czcionek OpenType, takich jak ligatury, zestawy stylistyczne, ułamki i tak dalej. Te funkcje działają poprzez właściwość CSS font-feature-settings , która umożliwia użytkownikom dostosowywanie stylów tekstu.

Uwaga : Gorąco polecam przeczytanie doskonałego artykułu Sparanoida prezentującego wszystkie funkcje OpenType.

Współczesna typografia zrobiła duży krok naprzód, umożliwiając korzystanie ze zmiennych czcionek w Internecie za pośrednictwem właściwości font-variation-settings .

Każda czcionka zmienna ma właściwości zmiennej, której wartości można zmieniać. Np. w czcionce standardowej można zmienić grubość czcionki przy użyciu ściśle określonych wartości ( 400 , 500 , 600 itd.), natomiast w czcionce zmiennej można użyć dowolnej wartości z dostępnego zakresu, co daje większe możliwości do stylizacji tekstu.

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

Poniżej możesz zobaczyć przykład, jak wygląda praca z czcionką zmienną w widżecie tekstowym.

Oprócz zarejestrowanych wartości ( wght , wdth , slnt , itp.) twórcy czcionek mogą również tworzyć własne unikalne cechy czcionek (jak w powyższym przykładzie). Aby umożliwić naszym użytkownikom korzystanie ze wszystkich możliwych funkcji czcionek, najpierw potrzebujemy tych informacji.

Wszystkie funkcje, których chcesz użyć, powinny być zdefiniowane w pliku czcionki. Przyjrzyjmy się jego specyfikacji. Każda czcionka może być reprezentowana w formie tabel, dostarczając wszystkich różnych informacji używanych podczas renderowania jej znaków.

Do zbierania tych informacji o czcionkach używamy dwóch tabel:

1. Tabela podmian glifów
   Tabela podstawiania glifów (GSUB) zawiera listę danych renderowania glifów. Obiekt GSUB.featureList jest wyliczeniem cech czcionek i ich właściwości. Możesz wyświetlić przykład danych w tabeli w serwisie GitHub. W tej tabeli najbardziej interesujące jest pole tag . Jest to nazwa funkcji czcionki i wskazuje, że ta funkcja jest dostępna z tą czcionką. Możemy bezpiecznie użyć tag we właściwości font-feature-settings .
2. Tabela odmian czcionek
   Tabela odmian czcionek (fvar) jest reprezentacją właściwości zmiennych związanych z czcionką. Przykładowa tabela jest również dostępna na GitHub. Każdy obiekt jest właściwością czcionki, z opisem możliwych wartości ( min , max , default) i zlokalizowaną nazwą (jeśli istnieje). Używamy tych wartości z właściwością font-variation-settings .

Za pomocą tych dwóch tabel możemy spełnić wszystkie nasze wymagania: używając zmiennych właściwości czcionki i różnych funkcji czcionki. Wynikowe dane są wyświetlane w kontrolkach widgetu tekstu w edytorze, w którym użytkownicy mogą stylizować tekst bez użycia kodu.

Korzystanie z klawiatury

Wprowadzanie tekstu jest jednym z najważniejszych aspektów korzystania z widżetu tekstowego. Oprócz włączenia skrótów do pracy z tekstem, musieliśmy zmierzyć się z kilkoma nietypowymi wyzwaniami. Poruszanie się po tekście za pomocą klawiszy strzałek było zdecydowanie jednym z nich.

Gdy użytkownik edytuje, widżet tekstowy wyświetla również ukryte znaki, takie jak spacje nierozdzielające i podziały wierszy. Są one zaimplementowane jako ikony SVG wstawiane do tekstu, co stwarza problem: jeśli użyjemy contenteditable , ikony te uniemożliwiają użytkownikom przesuwanie kursora za pomocą klawiszy strzałek.

Rozwiązanie jest dość proste: użyj span i pseudoelementu :before . W ten sposób przeglądarka postrzega ikonę jako tekst, a klawisze strzałek działają świetnie.

 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; }

Skróty

Istnieją dwa skróty klawiaturowe do wklejania tekstu do widżetu tekstowego.

Cmd / Ctrl + V wkleja tekst ze schowka i zachowuje wszystkie style, które miał w oryginalnym dokumencie. Jeśli tekst został skopiowany z aplikacji, takiej jak Pages, Notes, Word lub Google Docs, Twój schowek będzie zawierał informacje HTML, a nie tylko zwykły tekst. Ten kod HTML można przeanalizować i wkleić, zachowując oryginalne style.

Możesz uzyskać dane HTML w następujący sposób:

 // 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(); });

Dodatkowo mamy skrót Cmd + Shift + V. Gdy wstawisz tekst za pomocą tej kombinacji klawiszy, przeglądarka pozostawi w ładunku zwykłe dane, więc stylizacja jest kontrolowana przez miejsce docelowe wklejania. Skróty te domyślnie istnieją w przeglądarce, ale musisz pamiętać o ich zaimplementowaniu w swoim projekcie.

Zaznaczanie tekstu i fokus

Zaznaczanie tekstu pomaga użytkownikom zobaczyć, który fragment tekstu jest aktualnie edytowany. Wypróbujmy prosty przykład: pole wejściowe z przyciskiem kontrolującym pogrubienie tekstu.

W tym przykładzie możemy zaznaczyć fragment tekstu i nacisnąć przycisk Bold , a zaznaczenie w tekście pozostanie po nim. Ale co, jeśli nasz przykład jest bardziej skomplikowany? Załóżmy, że dodajemy pole wejściowe do selektora rozmiaru tekstu. W takim przypadku fokus zostanie przeniesiony na nowe dane wejściowe.

Istnieją dwie możliwości rozwiązania tego problemu :

• Po każdym zdarzeniu wejściowym wymuszamy powrót fokusa do bloku tekstu. W takim przypadku zaznaczenie zacznie migać po określonej liczbie zdarzeń wejściowych — nie chcemy tego.
• Możemy dodać blok tekstowy do iframe . Jak zapewne wiesz, iframe ma swój własny globalny obiekt window . Tak więc, dopóki zaznaczenie znajduje się w iframe , będzie ono trwać nawet wtedy, gdy fokus zostanie przesunięty na zewnątrz.

Skończyło się na widżecie tekstowym w ramkach iframe . Tak więc, dopóki zaznaczenie znajduje się w iframe , będzie ono trwać nawet wtedy, gdy fokus zostanie przesunięty na zewnątrz. Spójrz na zrzut ekranu poniżej. Na stronie mamy dwa wybory: wybrany fragment w widżecie tekstowym i wybraną wartość rozmiaru tekstu w kontrolce.

Wydajność podczas wprowadzania tekstu

Ważna jest responsywność interfejsu do edycji tekstu. Uważnie monitoruj wartość klatek na sekundę (FPS), zwłaszcza jeśli chodzi o zadania takie jak edycja tekstu z dużą prędkością lub zmiana rozmiaru czcionki.

Readymag ma dwa rzutnie: stacjonarny i mobilny . Style tekstu mogą wyglądać inaczej w każdym z nich. Podczas wprowadzania tekstu edytor wykona różne obliczenia, aby zsynchronizować dane między rzutniami. Wysoką responsywność osiąga się dzięki wykorzystaniu interfejsu API przeglądarki: requestAnimationFrame oraz requestIdleCallback :

• requestAnimationFrame jest wywoływana za każdym razem, gdy ekran jest odświeżany;
• requestIdleCallback jest wywoływane tylko wtedy, gdy przeglądarka jest bezczynna.

To świetny sposób na wykonywanie żmudnych operacji bez blokowania głównego wątku.

Dostępność

Włączenie dostępności jest jedną z najważniejszych praktyk w dzisiejszym tworzeniu stron internetowych. Jeśli Twoja witryna została zaprojektowana z myślą o ułatwieniach dostępu, zapewni ona dostęp do Twojego produktu większej liczbie osób . Oznacza to przystosowanie nie tylko osób niepełnosprawnych, ale także użytkowników na różnych platformach: urządzeniach stacjonarnych i dotykowych, czytnikach ekranu, aparatach słuchowych i tak dalej. Aby zrozumieć, jak ważne może być udostępnianie projektów, polecam zapoznanie się z najnowszymi statystykami dotyczącymi dostępności.

Aby rozpocząć wprowadzanie praktyk dostępności sieci, najpierw sprawdź Wytyczne dotyczące dostępności treści internetowych (WCAG), najbardziej wszechstronne źródło informacji na ten temat. I tak długo, jak Readymag jest narzędziem do publikacji, oprócz WCAG musimy również przestrzegać wytycznych dotyczących dostępności narzędzi autorskich (ATAG).

Nasz zespół jest obecnie na etapie integracji dostępności w edytorze. W kolejnych artykułach opowiemy więcej o naszej drodze do pełnej integracji dostępności w Readymag. Możesz również sprawdzić każdą pracę wykonaną w Readymag, korzystając z naszej listy kontrolnej ułatwień dostępu.

Najlepsze praktyki

Oto kilka wskazówek, które pomogą Ci opracować edytor tekstu w sieci:

• Zastanów się dokładnie nad układem.
  Określ z wyprzedzeniem, jakich funkcji potrzebujesz i jak będziesz pracować z elementami w edytorze tekstu.
• Skonfiguruj testy wizualne.
  Podczas pracy z tekstem nie można całkowicie polegać na wynikach testu migawki. Możesz uzyskać poprawny wynik w teście, oczekując danego kodu CSS dla bloku, ale czasami wynik może nie być taki, jakiego oczekiwałeś.
• Przetestuj swoją pracę w różnych przeglądarkach.
  Chociaż większość przeglądarek dość dobrze obsługuje nowe funkcje online, często występują problemy z wyświetlaniem tych samych stylów w różnych przeglądarkach.
• Używaj flag funkcji, aby bezpieczniej opracowywać nowe funkcje.
• Zmierz FPS w przeglądarce podczas wprowadzania tekstu.
  Nie wykonuj zadań mocno obciążających procesor w jednym wątku.
• Nie bój się eksperymentować .
• Na koniec wypróbuj Text Widget w Readymag.

Kilka przydatnych linków

• „Kompletne demo CSS dla funkcji OpenType”, Sparanoid
• „Wprowadzenie do zmiennych czcionek w sieci”, web.dev
• „Niesamowita typografia”, Joel Galeran
• „Zmienne czcionki”, Nick Sherman
• Fontkit
• OpenType.js