Stilarea legăturilor cu sublinieri reale

Ghidul complet de navigare cu prioritate
38 Views

Înainte de a ajunge la modul de a sublinia stilul, ar trebui să răspundem la întrebarea: ar trebui să subliniem?

În designul grafic, sublinierile sunt, în general, considerate nesofisticate. Există modalități mai frumoase de a atrage accentul, de a stabili ierarhia și de a demarca titlurile.

Acest sfat este clar în „Tipografia practică” a lui Butterick:

Dacă simțiți nevoia de a sublinia, folosiți în loc de caractere aldine sau italice. În situații speciale, cum ar fi rubricile, puteți lua în considerare, de asemenea, utilizarea tuturor capacelor, capace mici sau modificarea dimensiunii punctului. Nu ești convins? Vă invit să găsiți o carte, un ziar sau o revistă care subliniază textul. Acest aspect este în mare parte asociat cu tabloidele din supermarketuri.

Dar web-ul este diferit. Hiperlink-urile sunt caracteristica definitorie a internetului; și de la începutul internetului au fost subliniate. Este o convenție înțeleasă universal. Sensul este clar – o subliniere înseamnă o legătură.

Cu toate acestea, o mulțime de site-uri web populare au scăzut sublinieri: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Când au eliminat sublinierile din pagina de rezultate a căutării lor în 2014, designerul principal Google Wiley a susținut că a creat un aspect mai curat. În special, însă, majoritatea acestor site-uri au păstrat ușoare variații în ceea ce privește culoarea tradițională de albastru neplăcut (# 0000EE), care a fost implicit browserul de la începutul web-ului. În timp ce acest lucru oferă un indiciu vizual pentru majoritatea utilizatorilor, este posibil să nu fie suficient pentru a trece conformitatea cu accesibilitatea WCAG.

Culoarea nu este folosită ca singurul mijloc vizual de a transmite informații, de a indica o acțiune, de a solicita un răspuns sau de a distinge un element vizual.
– WCAG 2.1

WCAG nu are un mandat strict folosind sublinieri pentru link-uri, dar le recomandă. Utilizatorii de blind-colors trebuie să poată discerne o legătură. Le puteți diferenția în alte moduri, cum ar fi cu o greutate cu caractere aldine. Sau ai putea să păstrezi această perspectivă vizuală de lungă durată. Dar, dacă vom folosi sublinieri, vrem să arate frumos. Marcin Wichary, designer la Medium, a descris sublinierea perfectă ca:

[…] vizibil, dar discret – permițându-le oamenilor să realizeze ceea ce se poate face clic, dar fără a atrage prea mult atenția asupra lui. Ar trebui să fie poziționat la distanța corectă de text, așezându-se confortabil în spatele acestuia, atunci când descendenții vor să ocupe același spațiu.

Acesta este un truc cu care toți dezvoltatorii vor fi familiarizați cu: border-bottom. Emulând un subliniu folosind marginea de jos, obținem controlul asupra culorii și grosimii. Aceste pseudo-sublinieri au o problemă: o distanță prea mare față de text. Sunt sub descendenții scrisorilor. Puteți rezolva această problemă folosind înălțimea liniei, dar asta vine cu problemele proprii. O tehnică similară utilizează box-shadow. Marcin Wichary a fost pionier în cea mai sofisticată tehnică, folosind imaginea de fundal pentru a simula o subliniere. Erau hacuri utile, dar din fericire nu mai sunt necesare.

Stilarea sublinieri reale

În cele din urmă, putem demarca legăturile fără a sacrifica stilul, datorită două noi proprietăți CSS.

text-underline-offset controlează poziția subliniatului.
text-decor-grosime controlează grosimea sublinierii, precum și liniile superioare și trecerile de linie.
Conform blogului WebKit:

Puteți, de asemenea, să specificați de la font la ambele proprietăți care vor trage metrica relevantă din fișierul de font folosit în sine.

Agenția UX Clearleft folosește îndrăzneț de sublinieri (pseudo), atrăgând o atenție clară asupra legăturilor cu stiluri colorate. Iată un exemplu de subliniere falsă:

Veți observa că folosesc unitatea de emisiune din codul meu de exemplu. Specifica încurajează puternic utilizarea acesteia, mai degrabă decât pixeli, astfel încât grosimea scalează cu fontul.

Aceste proprietăți au fost deja livrate în Safari și vin în Firefox 70.

Odată cu trecerea la Chromium pentru browserul Microsoft Edge, vom avea în sfârșit suport pentru browser-ul pentru proprietatea în stil text-decor, care oferă opțiunile: solid (implicit), dublu, punctat, punctat și ondulat. Când sunt combinate, aceste proprietăți noi deschid o gamă întreagă de posibilități.

Poate că cel mai mare upgrade pentru sublinieri pe web, a venit fără ca dezvoltatorii să fie nevoiți să facă nimic. În vremurile proaste, descendenții erau tăiați în mod neîncrezător prin sublinieri, ceea ce era departe de a fi elegant. Dezvoltatorii obișnuiau să păstreze acest neajuns, aplicând o umbră de text care să se potrivească cu culoarea de fundal. text-decoration-skip-ink a adus o modalitate mai bună de a face spațiu pentru descendenți.

Este setată ca noua valoare implicită pentru sublinieri; ceea ce înseamnă că aspectul sublinierilor s-a îmbunătățit, în timp ce majoritatea dezvoltatorilor web nu știu că această proprietate există. Dacă doriți ca un subliniat să treacă peste glife, puteți seta această proprietate la niciuna.

Lasă un răspuns