Jak sprawiliśmy, że tekst nie przesuwa się po pojawieniu się symboli
Czy zdarzyło Ci się, że po samym przesunięciu kursora na element listy cały tekst nagle drgnął w bok? To problem występujący w niemal każdym edytorze, który ukrywa i pokazuje symbole.
Kiedy przesuwałem karetkę, żeby edytować listę, tekst odsuwał się na bok. Gdy karetka znikała, tekst wracał na swoje miejsce.
Poruszał się tylko jeden wiersz, ale wyglądało to tak, jakby drgał cały akapit. Ta drobna różnica nieustannie zakłócała płynność edycji.
Przyczyną była szerokość znacznika.
Zwykle na ekranie widać okrągły punktor. Jednak w pliku zapisane są myślnik i spacja. Gdy karetka dotknie znacznika, trzeba pokazać oryginalny zapis, aby można go było bezpośrednio edytować.
Problem polega na tym, że oba warianty zajmują inną szerokość. Punktor jest polem o ustalonej szerokości, natomiast szerokość myślnika i spacji zależy od kroju pisma. W mote różnica wynosiła 4,9 px. Za każdym razem, gdy pojawiał się oryginalny zapis, znajdujący się za nim tekst przesuwał się właśnie o tyle.
Przesuwamy wiersz o różnicę szerokości
Nie ujednoliciliśmy obu szerokości. Zamiast tego kompensujemy różnicę.
W chwili, gdy znacznik zmienia się w oryginalny zapis, cały wiersz przesuwamy w przeciwnym kierunku o różnicę szerokości. Kształt symbolu się zmienia, ale miejsce, w którym zaczyna się tekst główny, pozostaje bez zmian.
Nie ingerujemy w plik. Punktor jest elementem dekoracyjnym rysowanym na myślniku, a korekta zmienia jedynie położenie, w którym wiersz jest rysowany na ekranie. Niezależnie od tego, czy karetka pojawia się, czy znika, zapisana treść pozostaje taka sama.
Ujednoliciliśmy też sposób obliczania szerokości. Wcześniej w miejscu rysowania znacznika i w miejscu korygowania położenia wiersza używane były osobne wartości. Niewielka różnica między nimi wynosiła właśnie 4,9 px.
Teraz oba miejsca pytają o szerokość znacznika tę samą funkcję. Ponieważ punkt odniesienia jest jeden, wartości nie mogą się już rozminąć.
Jeśli jednak po lewej stronie brakuje marginesu, nie stosujemy korekty. Po przesunięciu wiersza tekst mógłby zostać przycięty poza krawędzią okna. Znikanie tekstu jest poważniejszym problemem niż jego drganie.
Pozwoliliśmy, by nagłówki i cytaty się przesuwały
Początkowo zastosowaliśmy tę samą metodę również do nagłówków i cytatów.
Jednak znak # w nagłówku i znak > w cytacie zajmują zwykle na ekranie szerokość równą 0. Aby unieruchomić tekst główny, symbole trzeba było wysunąć na lewy margines.
Technicznie działało to dobrze. Tekst się nie poruszał. Ekran wyglądał jednak obco. Symbole unoszące się osobno na marginesie nie wyglądały naturalnie.
Dlatego wycofaliśmy tę zmianę. Teraz, gdy pojawia się symbol nagłówka lub cytatu, tekst główny przesuwa się w prawo.
Ostatecznie wybraliśmy inne rozwiązanie dla każdego rodzaju znacznika.
W przypadku znaczników mających na ekranie własne pole, takich jak punktory i pola wyboru zadań, tekst główny pozostaje nieruchomy. W przypadku znaczników, które zwykle mają szerokość równą 0, takich jak nagłówki i cytaty, tekst główny się przesuwa.
Naturalnie wyglądający ekran był ważniejszy niż jedna uniwersalna reguła.
Symbole pokazujemy tylko wtedy, gdy są naprawdę potrzebne
Najlepszym sposobem na ograniczenie drgania jest zmniejszenie liczby momentów, w których symbol się zmienia.
Teraz symbol listy jest pokazywany w oryginalnej postaci tylko wtedy, gdy karetka znajduje się na symbolu. Gdy karetka minie spację i przejdzie do tekstu głównego, symbol natychmiast znów staje się punktorem. Podczas edytowania treści listy nie trzeba przez cały czas widzieć myślnika.
Wyrównanie pozostaje zachowane również wtedy, gdy długi wiersz zawija się do następnego. Nawet gdy znacznik jest widoczny w oryginalnej postaci, drugi wiersz zaczyna się pod tekstem głównym pierwszego wiersza.
Naprawiliśmy też problem z błędnym rozpoznawaniem kliknięcia jako przeciągnięcia. Gdy w chwili zmiany znacznika wskaźnik lekko się poruszał, tekst bywał zaznaczany. Teraz ruch jest uznawany za przeciągnięcie dopiero wtedy, gdy wskaźnik przesunie się o więcej niż 8 px.
Sprawdzamy za pomocą liczb, a nie wzroku
Takie różnice trudno ocenić wyłącznie wzrokiem. Na pierwszy rzut oka wszystko może wyglądać dobrze, ale przy dłuższym użytkowaniu zaczyna sprawiać wrażenie rozpraszającego.
Dlatego stworzyliśmy test uruchamiający prawdziwą aplikację. Przesuwamy karetkę do środka znacznika i poza niego, a następnie bezpośrednio porównujemy współrzędną x początku tekstu głównego. Test przechodzi tylko wtedy, gdy obie wartości są takie same.
W ten sam sposób sprawdzamy punktory, pola wyboru zadań oraz listy zagnieżdżone.
Przesunięcie o jeden piksel rzadko zostaje zgłoszone jako błąd. Użytkownik częściej czuje, że „coś rozprasza”, niż potrafi wyjaśnić, co dokładnie się poruszyło.
Dlatego takich przesunięć powinny pilnować liczby, a nie ludzie.
Spokojny ekran nie jest ekranem, na którym nic się nie dzieje. To ekran, na którym niezbędne zmiany zachodzą tam, gdzie nie rzucają się w oczy.