Czy podkreślenie powinno kolidować z elementami opuszczającymi tekst?

Moduł dekoracji tekstu CSS3 zawiera właściwość text-underline-position , która określa, czy podkreślenie powinno być umieszczone poniżej całego tekstu:

lub tuż poniżej linii bazowej, co pozwala na kolizję ze znacznikami tekstu:

Dobrze, wszyscy wiemy, jak podkreślenie powinno być stosowane tylko w ostateczności, ale… jeśli zamierzasz go użyć, jaki jest najczęstszy sposób to zrobić? Jakie są zalety i wady każdego podkreślonego stylu?

Co jest najczęstsze?

Cóż, niektórzy typografowie powiedzą, że podkreślenia należy prawdopodobnie unikać razem , i że podkreślenie jest odpowiednie tylko do użycia na maszynach do pisania lub hiperłączach w Internecie. Chciałbym jednak dodać, że kreatywność polega na dostrzeganiu możliwości łamania reguł w twórczy sposób, więc na ile pozwalasz temu przewodnikowi, zależy od ciebie.

W sieci, gdy znajduje się on tuż poniżej linii podstawowej, najczęściej występują nachodzące na siebie elementy zstępujące. Ale dzieje się tak tylko dlatego, że do tej pory zawsze było to domyślne renderowanie dla głównych przeglądarek.

W przypadku maszyn do pisania podkreślanie nachodzących na siebie zstępujących, ale nieco inaczej: mieści się w połowie między Twoimi przykładami ( przykład ). Jeśli spojrzysz na linię bazową zstępnika, taką jak dolna pętla glub dolny szeryf p(w czcionce szeryfowej), to właśnie tam znajduje się podkreślenie. Więc „łączy się” z dolną częścią zejść.

Plusy i minusy

Korzyścią z nakładania się podkreślenia na zejście jest to, że w ogóle nie wpływa na odstępy między liniami (lub „prowadzące”) - nie trzeba zwiększać odstępu między liniami, aby uwzględnić podkreślenie.

Korzyścią z całkowitego opuszczenia zjazdów jest ich czytelność, jeśli jest to ważne. Ale miałbyś wadę polegającą na konieczności zwiększenia odstępów między liniami. Jeśli twoja sytuacja i tak pozwala na dużo odstępów między wierszami, to idź na całość.

Jeśli korzystasz z Internetu, podkreślenie jest mocno powiązane z hiperłączami. Dlatego należy unikać jakiegokolwiek podkreślania tekstu, który nie jest częścią linku. Oznacz to, co chcesz oznaczać na inne sposoby - zamiast tego użyj pogrubienia , kursywy lub WSZYSTKICH CZAPEK.

Wierzę, że jakikolwiek podkreślony tekst jest na ogół tak niewielki, że czytelnik nie ma żadnej różnicy. Jest to jedna z tych rzeczy, które projektant może troszczą się wiele na temat, ale czytelnicy nigdy zrobić. Moim zdaniem jest to bardziej stylistyczny wybór.

Zdecydowanie wolę pozycjonowanie linii bazowej z przerwą przy zstępujących: tzn text-decoration-skip: ink;. Obecnie tak naprawdę nie jest to obsługiwane. Zaszedłem tak daleko, że mam dwie klasy i dodałem rozpiętość do zstępujących, aby usunąć z nich podkreślenie. (zamień tekst przez php, więc nie ma zbyt wiele kodu do utworzenia).

Nigdy nie użyję sztuczki border-bottom (lub bottom) z powodu przesunięcia. Uważam, że wraz z moimi czytelnikami przesunięcie podkreślenia jest dla nich znacznie bardziej rozpraszające niż cokolwiek innego.

Staram się przełączać na pogrubienie, kursywę, pogrubioną kursywę lub wariacje kolorów, zamiast podkreślać, gdy to możliwe.

Opistext-decoration: underline w CSS 2.1 specyfikacja definiuje swoje działanie tylko jako podkreślenie, bez szczegółów, ale przeglądarek wdrożyć go jak tylko pojawiają się nieco poniżej linii bazowej. Dlatego często tnie zstępujących (i znaki diakrytyczne umieszczone pod literą).

W wersji roboczej tekstu CSS3 znajduje się text-underline-positionpozycja, ale nie wydaje się, aby była obsługiwana przez żadną przeglądarkę. (Według informacji css666.com , jest obsługiwany przez IE, ale przynajmniej w IE 9, obsługa wydaje się być ograniczona do rozpoznawania właściwości i akceptowania wartości auto, wartości początkowej - więc tak naprawdę nie jest obsługiwana.) Aktualizacja : W rzeczywistości , IE (od wersji 6) ma trochę więcej wsparcia , ale tak naprawdę pozwala po prostu umieścić podkreślenie nad tekstem (!), A nie pod nim.

Jak opisano w odpowiedzi Scotta i komentarzu Joonasa, możesz użyć dolnej granicy do symulacji podkreślenia, a następnie masz dość dobrą kontrolę nad stylem „podkreślenia”. Może to być odpowiednie np. Dla podkreślonych linków, które stoją same, a nie inline. W przypadku tekstu wbudowanego, w którym warto podkreślić, np. Dlatego, że drukujesz materiały HTML zawierające podkreślenie, normalne podkreślenie CSS jest prawdopodobnie lepsze - ponieważ takie podkreślenie odpowiada mniej więcej tradycjom druku.