Ostrzeżenie przed poziomym overflow spowodowanym długimi słowami

Pisząc komponenty (i robiąc ich review) w html.js na naszą stronę firmową zawsze starałem się mieć na uwadze to, aby te komponenty były future-proof: tzn. aby wyglądały dobrze nie tylko po wypełnieniu tekstem który był zawarty w oryginalnym designie. W szczególności istotne było chronienie przed overflow pionowym i poziomym.

Overflow pionowy mamy już w dużej mierze pod kontrolą, dzięki dobrodziejstwom związanym z korzystaniem z CSS Grid i flexboxa. Wciąż jednak pozostaje problem overflowu poziomego. Jest mu trudno w 100% zapobiec, gdy nie zna się dokładnej treści, jaka zostanie wrzucona do komponentu. Szczególnie problematyczne jest prawdopodobieństwo wystąpienia długich słów, takich jak np. prawdopodobieństwo.

Z pomocą może przyjść automatyczne dodawanie znaków dzielenia słów na sylaby. Jednak z wstępnych doświadczeń z pracami nad T1651 (dzięki @FilipI!) wynika, że automatyczne dzielenie na sylaby będzie pomocne tylko przy dłuższych paragrafach. Krótkie, duże nagłówki wyglądają niezręcznie, gdy np. są podzielone w ten sposób:

Wszyscy oblali egzamin z rachunku prawdopodobień-
stwa

Aby zapobiec takim dziwadłom automatyczne dodawanie znaków dzielenia słów na sylaby będzie włączane tylko dla paragrafów - nie dla nagłówków, ponieważ nie wyobrażam sobie pisania heurystyki określającej które podziały na sylaby nie wyglądają “niezręcznie” w nagłówkach.

Dlatego pomyślałem, aby dodać możliwość określania w display_hints, jaka jest przewidywana maksymalna ilość znaków w słowie, dla której gwarantowane jest brak overflow. Jeżeli ta granica zostanie przekroczona, to pole podświetliłoby się na pomarańczowo i pokazałby się tooltip tłumaczący o co chodzi. Przy polu pojawiłby się guzik, który można kliknąć aby skopiować do schowka znak dzielenia słowa na sylaby i wkleić w miejscach, w których to będzie możliwie eleganckie.

(task dotyczący tej dyskusji - https://hub.sealcode.org/T1705 )

Co o tym sądzicie?

1 Like