Tipografie modernă a fluidelor folosind clema CSS

Conceptul de tipografie fluidă în dezvoltarea web a fost prezent de ani de zile, iar dezvoltatorii au trebuit să se bazeze pe diverse soluții pentru a-l face să funcționeze în browser. Cu noua funcție de clamp CSS, crearea tipografiei fluide nu a fost niciodată mai simplă.

De obicei, atunci când implementăm tipografia receptivă , valorile se modifică în anumite puncte de întrerupere. Sunt definite în mod explicit. Prin urmare, designerii furnizează adesea valori tipografice (dimensiunile fontului, înălțimea liniilor, spațierea dintre litere etc.) pentru două, trei sau chiar mai multe dimensiuni de ecran, iar dezvoltatorii implementează de obicei aceste cerințe adăugând interogări media pentru a viza anumite puncte de întrerupere.

Deși elementele de tipografie ar putea arăta la fel de bine ca și pe desene, acesta ar putea să nu fie cazul pentru unele elemente pe lățimile ferestrelor apropiate de punctele de întrerupere. După cum știm deja, există o mulțime de dispozitive și dimensiuni diferite de ecran disponibile pentru utilizatori, în afară de cele abordate în design. Adăugarea mai multor puncte de întrerupere și înlocuiri de stil ar putea rezolva problema, dar riscăm să creștem complexitatea codului, să creăm mai multe cazuri de margine și să facem codul mai puțin clar și mai puțin ușor de întreținut.

Tipografia fluidă se scalează fără probleme între valoarea minimă și cea maximă, în funcție de lățimea ferestrei de vizualizare. De obicei, începe cu o valoare minimă și menține valoarea constantă până la un anumit punct de lățime a ecranului la care începe să crească. Odată ce atinge o valoare maximă la o altă lățime a ecranului, menține acea valoare maximă de acolo încolo. Vom vedea în acest articol că tipografia fluidă poate curge și în ordine inversă — începe cu o valoare maximă și se termină cu o valoare minimă.

Această abordare reduce sau elimină reglajul fin pentru anumite puncte de întrerupere și alte cazuri de margine. Deși este folosit mai ales în tipografie, această abordare de dimensionare fluidă funcționează și pentru margine, umplutură, decalaj etc.

Observați cum, în exemplul următor, textul titlului se scalează fără probleme și cum arată bine pe orice lățime a ferestrei de vizualizare. De asemenea, observați cum conținutul păstrează în continuare tipografia receptivă, iar valoarea se modifică doar la un punct de întrerupere.

Deși tipografia fluidă abordează problemele menționate mai sus, nu este ideală pentru toate scenariile, iar tipografia fluidă nu ar trebui tratată ca un înlocuitor pentru tipografia receptivă . Fiecare are propriul său set de bune practici și cazuri de utilizare adecvate și le vom acoperi mai târziu în acest articol.

În acest articol, vom arunca o privire profundă în tipografia fluidă și vom vedea diverse abordări pe care dezvoltatorii le-au folosit în trecut. Vom acoperi, de asemenea, funcția de clamp CSS și modul în care a simplificat implementarea tipografiei fluide și vom învăța cum să reglam parametrii funcției de clamp pentru a controla punctele de pornire și de sfârșit pentru comportamentul fluidului. Vom acoperi, de asemenea, problemele de accesibilitate, dintre care majoritatea pot fi rezolvate astăzi, și o problemă importantă de accesibilitate pe care nu o putem rezolva încă.

Primele încercări de tipografie fluidă

În calitate de dezvoltatori, folosim adesea JavaScript pentru a completa funcțiile CSS lipsă până când acestea sunt dezvoltate și acceptate în browserele majore. În primele zile ale designului web responsive, bibliotecile JavaScript precum FlowType.JS au fost folosite pentru a realiza o tipografie fluidă.

Prima implementare reală CSS a tipografiei fluide a venit odată cu introducerea unităților CSS calc și viewport ( vw și vh ).

 /* Fixed minimum value below the minimum breakpoint */ .fluid { font-size: 32px; } /* Fluid value from 568px to 768px viewport width */ @media screen and (min-width: 568px) { .fluid { font-size: calc(32px + 16 * ((100vw - 568px) / (768 - 568)); } } /* Fixed maximum value above the maximum breakpoint */ @media screen and (min-width: 768px) { .fluid { font-size: 48px; } }

Acest fragment pare puțin complex și există o mulțime de numere implicate în calcul. Deci, să împărțim acest lucru în segmente și să avem o imagine de ansamblu la nivel înalt a ceea ce se întâmplă. Să ne concentrăm pe selectori și pe interogările media pentru a vedea cazurile pe care le acoperă.

 .fluid { /* Min value */ } @media screen and (min-width: [breakpoint-min]) { .fluid { /* Preferred value between the minimum and maximum bound */ } @media screen and (min-width: [breakpoint-max]) { /* Max value */ }

În abordarea mobile-first, primul selector fixează valoarea la o limită minimă. Prima interogare media tratează comportamentul fluid între cele două puncte de întrerupere. Punctul de întrerupere final fixează valoarea la o limită maximă. Acum că știm ce face fiecare selector și interogare media, să vedem cum se aplică limita minimă și maximă și cum este calculată valoarea fluidului.

 .fluid { font-size: [value-min]; } @media (min-width: [breakpoint-min]) { .fluid { font-size: calc([value-min] + ([value-max] - [value-min]) * ((100vw - [breakpoint-min]) / ([breakpoint-max] - [breakpoint-min]))); } } @media (min-width: [breakpoint-max]) { .fluid { font-size: [value-max] } }

Acesta este o mulțime de cod standard pentru a realiza o sarcină foarte simplă de a fixa o valoare între limitele minime și maxime și de a adăuga un comportament fluid între două puncte de întrerupere.

În ciuda cantității de boilerplate necesară, această abordare a devenit atât de populară pentru manipularea dimensionării fluidelor în general, încât a devenit clar că era necesară o abordare mai eficientă. Aici intervine funcția de clemă CSS.

Funcția de clamp CSS

Funcția de clamp CSS ia trei valori - o limită minimă, o valoare preferată și o limită maximă și fixează valoarea curentă între acele limite. Valoarea preferată este utilizată pentru a determina valoarea dintre limite. Valoarea preferată include de obicei unități de vizualizare, procente sau alte unități relative pentru a obține efectul fluid. Aceasta este o funcție atât de robustă și flexibilă încât, alături de valorile fixe, poate accepta chiar și funcții și expresii matematice și valori din funcția attr .

 clamp([value-min], [value-preferred], [value-max]);

Această funcție poate fi aplicată oricărui atribut care acceptă un tip de valoare valid, cum ar fi lungimea, frecvența, timpul, unghiul, procentul, numărul și altele, astfel încât să poată fi folosită dincolo de tipografie și dimensionare.

Suportul browserului pentru funcția de clamp se află peste 90% la momentul scrierii acestui articol, așa că este deja bine acceptat. Pentru browserele desktop neacceptate, cum ar fi Internet Explorer, este suficient să furnizați o valoare alternativă, deoarece browserele neacceptate vor ignora întreaga expresie font-size dacă nu pot analiza funcția de clamp .

 font-size: [value-fallback]; /* Fallback value */ font-size: clamp([value-min], [value-preferred], [value-max]);

Tipografie fluidă cu clamp CSS

Să folosim funcția CSS clamp și să o populam cu următoarele valori:

• Valoare minimă — egală cu dimensiunea minimă a fontului.
• Valoare maximă — egală cu dimensiunea maximă a fontului.
• Valoarea preferată — determină modul în care tipografia fluidă se scarifică — punctele de început și de sfârșit ale comportamentului fluidului și schimbarea vitezei. Această valoare va depinde de dimensiunea ferestrei de vizualizare, așa că vom folosi unitatea de lățime a ferestrei de vizualizare vw .

Să aruncăm o privire la următorul exemplu și să setăm dimensiunea fontului să aibă o valoare între 32px și 48px . Următoarea font-size are un set minim de 32 32px și un maxim de 48px . Valoarea curentă este determinată de unitatea de lățime a ferestrei de vizualizare sau, mai precis, de 4% din lățimea actuală a ferestrei de vizualizare dacă acea valoare se află între limita minimă și maximă.

 font-size: clamp(32px, 4vw, 48px);

Să aruncăm o privire rapidă la ce valoare va fi aplicată pentru acest exemplu în funcție de lățimea ferestrei de vizualizare, astfel încât să putem înțelege bine cum funcționează funcția de clemă CSS.

Putem observa două probleme cu această valoare a funcției de prindere:

• Valorile pixelilor pentru min și max nu sunt accesibile.
  Limitele minime și maxime sunt exprimate cu valori de pixeli, astfel încât acestea nu se vor scala dacă un utilizator își schimbă dimensiunea preferată a fontului.
• Valoarea fereastra pentru valoarea preferată nu este accesibilă.
  La fel ca în cazul precedent. Această valoare depinde exclusiv de lățimea ferestrei de vizualizare și nu ține cont de preferințele utilizatorului.
• Valoarea preferată este neclară.
  Folosim 4vw care ar putea arăta ca un număr magic la început. Trebuie să știm când începe și când se termină comportamentul fluidului, astfel încât să putem sincroniza diferitele modificări ale dimensiunii fontului.

Putem aborda cu ușurință prima problemă prin conversia valorilor px în valori rem pentru limite minime și maxime, împărțind valorile px la 16 (dimensiunea implicită a fontului browserului). Procedând astfel, valorile minime și maxime se vor adapta la preferințele browserului utilizatorului.

 font-size: clamp(2rem, 4vw, 3rem);

Trebuie să adoptăm o abordare diferită cu valoarea preferată, deoarece această valoare trebuie să răspundă la dimensiunea ferestrei de vizualizare. Cu toate acestea, putem amesteca cu ușurință valoarea relativă rem transformând-o într-o expresie matematică.

 font-size: clamp(2rem, 4vw + 1rem, 3rem);

Vă rugăm să rețineți că aceasta nu este o soluție sigură pentru toate problemele de accesibilitate , așa că este totuși important să testați dacă tipografia fluidă poate fi mărită suficient și dacă răspunde suficient de bine la preferințele de accesibilitate ale utilizatorului. Vom acoperi aceste probleme mai târziu.

Cu toate acestea, încă nu știm cum am obținut valoarea preferată din exemplu ( 4vw + 1rem ) pentru a obține comportamentul fluidului necesar, așa că haideți să aruncăm o privire la modul în care putem ajusta valoarea preferată și înțelegem pe deplin matematica din spatele acesteia. .

Funcția de dimensionare a fluidului

Valoarea preferată afectează modul în care funcția tipografie fluidă se comportă . Mai precis, putem schimba în ce puncte de lățime a ferestrei de vizualizare începe să se schimbe valoarea minimă și la ce punct de lățime a ferestrei de vizualizare atinge valoarea maximă.

De exemplu, am putea dori ca comportamentul fluid să înceapă de la 1200px și să se termine la 800px din lățimea ferestrei de vizualizare. Vă rugăm să rețineți că diferitele limite minime și maxime necesită valori preferate diferite (valoarea ferestrei de vizualizare și dimensiunea relativă) pentru a menține sincronizate diferitele tipografii fluide.

De exemplu, de obicei nu dorim ca un comportament fluid să apară între 1200px și 800px din lățimea ferestrei de vizualizare și altul să apară între 1000px și 750px din lățimea ferestrei de vizualizare. Acest lucru poate duce la inconsecvențe de dimensionare, ca în exemplul următor.

Pentru a evita această problemă, trebuie să ne dăm seama cum este calculată valoarea preferată și să atribuim fereastra de vizualizare adecvată și valorile relative valorii preferate pentru funcția de cleme.

Să descoperim o funcție care este folosită pentru a o calcula.

 font-size: clamp([min]rem, [v]vw + [r]rem, [max]rem);

$$y=\frac{v}{100}*x + r$$

• x — valoarea curentă a lățimii ferestrei de vizualizare ( px ).
• y — dimensiunea fontului fluidă rezultată pentru o valoare curentă a lățimii ferestrei de vizualizare x ( px ).
• v — valoarea lățimii ferestrei care afectează rata de modificare a valorii fluidului ( vw ).
• r — dimensiune relativă egală cu dimensiunea fontului browserului. Valoarea implicită este 16px .

Cu această funcție, putem calcula cu ușurință punctele de început și de sfârșit ale comportamentului fluidului. Pentru exemplul nostru, valoarea minimă de 2rem ( 32px ) este constantă până la lățimea ferestrei de vizualizare de 400px .

$32=\frac{4}{100}*x + 16$$

$$16=\frac{1}{25}*x$$

$$x=400$$

Putem aplica aceeași funcție pentru valoarea maximă și vedem că atinge o valoare maximă de 3rem ( 48px ) pe o lățime a ferestrei de vizualizare de 800px .

Scopul acestui exemplu a fost doar acela de a demonstra modul în care valoarea preferată afectează comportamentul tipografiei fluide. Să folosim aceeași funcție pentru un scenariu puțin mai realist și să rezolvăm un exemplu mai practic din lumea reală. Vom crea o tipografie fluidă accesibilă pe baza dimensiunilor de font necesare și a punctelor specifice în care dorim să apară comportamentul fluidului.

Calcularea parametrilor de valoare preferați pe baza unor puncte de început și de sfârșit specifice

Să aruncăm o privire la un exemplu practic care apare adesea în scenariile din lumea reală. Designerii ne-au oferit dimensiunile fonturilor și punctele de întrerupere de care avem nevoie, ca dezvoltatori, pentru a implementa tipografia fluidă cu următorii parametri:

• Dimensiunea minimă a fontului este 36px (y1)
• Dimensiunea maximă a fontului este 52px (y2)
• Valoarea minimă trebuie să se încheie la 600px lățimea ferestrei de vizualizare (x1)
• Valoarea maximă ar trebui să înceapă de la 1400px ferestrei de vizualizare de 1400 px (x2)

Să luăm aceste valori și să le adăugăm la funcția de dimensionare a fluidului despre care am discutat anterior.

$$y=\frac{v}{100} \cdot x + r$$

Ajungem cu două ecuații cu doi parametri pe care trebuie să-i calculăm — valoarea v lățimii ferestrei de vizualizare și dimensiunea relativă r .

$$(1)\;\;\; y_1=\frac{v}{100} \cdot x_1 + r$$

$$(2) \;\;\; y_2 =\frac{v}{100} \cdot x_2 + r$$

Putem lua prima ecuație și o putem transforma în următoarea expresie pe care o putem folosi.

$$(1) \;\;\; r=y_1 - \frac{v}{100} \cdot x_1$$

Putem înlocui r în a doua ecuație cu această expresie și obținem ca funcția să calculeze v .

$$v=\frac{100 \cdot (y_2-y_1)}{x_2 - x_1}$$

$$v=\frac{100 \cdot (52-36)}{1400 - 600}$$

$$v=2$$

Obținem valoarea lățimii ferestrei de vizualizare 2vw . Într-un mod similar, putem izola r și îl putem calcula folosind parametrii disponibili.

$$r=\frac{x_1y_2 - x_2y_1}{x_1 - x_2}$$

$$r=\frac{600 \cdot 52 - 1400 \cdot 36}{600 - 1400}$$

$$r=24$$

Notă : Această valoare este în pixeli și valoarea relativă trebuie exprimată în rem , așa că împărțim valoarea pixelului cu 16 și ajungem la 1.5rem .

De asemenea, trebuie să convertim limita minimă de 36px și limita maximă de 52px în rem și să adăugăm toate valorile la funcția de clamp CSS.

 font-size: clamp(2.25rem, 2vw + 1.5rem, 3.25rem);

Putem reprezenta grafic această funcție pentru a confirma că valorile calculate sunt corecte.

Pentru a rezuma, putem folosi următoarele două funcții pentru a calcula parametrii valorii preferați v (exprimat în vw ) și r (exprimat în rem ) din dimensiunile fontului și punctele de lățime a ferestrei de vizualizare.

$$v=\frac{100 \cdot (y_2-y_1)}{x_2 - x_1}$$

$$r=\frac{x_1y_2 - x_2y_1}{x_1 - x_2}$$

Acum că înțelegem pe deplin cum funcționează funcția de clamp și cum este calculată valoarea preferată, putem crea cu ușurință o tipografie fluidă consistentă și accesibilă în proiectele noastre și să evităm capcanele menționate mai sus.

Utilizarea valorii negative a ferestrei de vizualizare pentru dimensionarea fluidului

De asemenea, putem mări dimensiunea pe măsură ce dimensiunea ferestrei de vizualizare scade , utilizând o valoare negativă pentru valoarea ferestrei de vizualizare. Valoarea negativă a ferestrei de vizualizare va inversa comportamentul implicit al fluidului. De asemenea, trebuie să ajustăm dimensiunea relativă, astfel încât comportamentul fluidului să înceapă și să se termine în anumite puncte prin rezolvarea celor două ecuații menționate mai sus din exemplul anterior.

 font-size: clamp(3rem, -4vw + 6rem, 4.5rem);

Nu am folosit această configurație inversată în proiectele mele, dar s-ar putea să vi se pară interesantă dacă veți întâlni vreodată această cerință în proiectul dvs. sau în design.

Instrument de vizualizare a tipografiei fluide

În timp ce lucram la un proiect, a trebuit să creez mai multe configurații diferite de tipografie fluidă. Testam configurațiile în browser și am avut o idee de a crea un instrument care să ajute dezvoltatorii să vizualizeze și să ajusteze comportamentul tipografiei fluide. Am fost inspirat de unul dintre demonstrațiile de la cursul „CSS pentru dezvoltatori JS” al lui Josh W. Comeau și am creat Instrumentul de tipografie modernă a fluidelor.

Dezvoltatorii pot folosi acest instrument pentru a crea și ajusta fragmente de cod tipografice fluide și pentru a vizualiza comportamentul fluid pentru a menține mai multe instanțe sincronizate. Instrumentul poate genera, de asemenea, un link către configurație, astfel încât dezvoltatorii pot include linkul în comentariile de cod sau în documentație, astfel încât alții să poată verifica cu ușurință comportamentul dimensionării fluidului.

Acest proiect este gratuit și open-source, așa că nu ezitați să raportați orice erori și să contribuiți. Mă bucur să vă aud părerile și solicitările de funcții!

Preocupări privind accesibilitatea

Este important să reiterăm faptul că utilizarea valorilor rem nu face ca tipografia fluidă să fie accesibilă în mod automat pentru toți utilizatorii, ci permite doar dimensiunilor fontului să răspundă la preferințele utilizatorului. Utilizarea funcției de clamp CSS în combinație cu unitățile de vizualizare pentru a obține dimensionarea fluidului introduce un alt set de dezavantaje pe care trebuie să le luăm în considerare.

Adrian Roselli a testat și documentat aceste probleme pe larg în postarea sa de blog.

„Când utilizați unități vw sau limitați cât de mare poate obține textul cu clamp() , există șansa ca un utilizator să nu poată scala textul la 200% din dimensiunea sa originală. Dacă se întâmplă acest lucru, este un eșec WCAG sub 1.4.4 Redimensionare text (AA), așa că asigurați-vă că testați rezultatele cu zoom.”

— Adrian Roselli

Am vrut să rezolv această problemă de la început, folosind JavaScript pentru a detecta când are loc un eveniment de zoom și pentru a aplica o clasă care va înlocui dimensionarea fluidului cu o valoare rem obișnuită.

 /* Apply fluid typography for default zoom level (not zoomed) */ .title { font-size: clamp(2rem, 4vw + 1rem, 3rem); } /* Revert to responsive typography if zoom is active */ body.zoom-active .title { font-size: 2rem; } @media screen and (min-width: 768px) { body.zoom-active .title { font-size: 3rem; } }

S-ar putea să fii surprins că am fost să aflu că nu putem detecta în mod fiabil evenimentul de zoom folosind JavaScript, așa cum putem detecta orice alt eveniment obișnuit de vizualizare, cum ar fi redimensionarea.

Există specificația API Visual Viewport cu un suport solid pentru browser de 92% la momentul scrierii acestui articol, dar valoarea de scară (nivel de zoom) pur și simplu nu funcționează - returnează aceeași valoare, indiferent de valoarea de zoom (scale). Ca să nu mai vorbim că nu există documentație, exemple de lucru sau cazuri de utilizare disponibile. Acest lucru este puțin ciudat, având în vedere că acest API are un suport atât de solid pentru browser. Există unele soluții, dar nici acestea nu sunt complet de încredere și nu pot detecta dacă pagina a fost mărită atunci când este încărcată pentru prima dată, doar după ce a avut loc evenimentul.

Dacă API-ul Visual Viewport a funcționat conform intenției, am putea comuta cu ușurință o clasă CSS la evenimentul de zoom.

 /* This code won't work because visualViewport.scale is buggy * and always returns the same value. This might be fixed in the future. */ function checkZoomLevel() { if (window.visualViewport.scale === 1) { document.body.classList.remove("zoom-active"); } else { document.body.classList.add("zoom-active"); } } window.addEventListener("resize", checkZoomLevel);

Este regretabil că prin aplicarea dimensionării fluide riscăm să facem conținutul inaccesibil pentru unii utilizatori care folosesc funcționalitatea de zoom în timpul navigării. Până când putem crea o soluție sigură și mai accesibilă pentru tipografia fluidă, asigurați-vă că utilizați cu moderație dimensionarea fluidelor și testați dacă nivelurile de zoom sunt în conformitate cu Ghidurile de accesibilitate a conținutului web (WCAG).

Cazuri de utilizare recomandate

Tipografia fluidă funcționează cel mai bine pentru elementele de text mari și proeminente, cu o diferență mai mare între dimensiunea minimă și cea maximă. Titlurile mari vor arăta mai șocante și mai deplasate pe ferestrele de vizualizare mai mici dacă nu sunt scalate în consecință.

Dimensionarea fluidă este recomandată și pentru cazurile în care trebuie să menținem o dimensionare consistentă.

Elise Hein a ajuns la o concluzie similară în articolul său despre cele mai bune practici de tipografie fluidă.

„Am încercat și nu am reușit să găsesc multe domenii specifice în care tipografia relativă a ferestrelor de vizualizare depășește dimensionarea bazată pe puncte de întrerupere în ceea ce privește lizibilitatea. Iată două: setarea textului afișat și menținerea unei măsuri consistente .”

— Elise Hein

Tipografia fluidă nu este la fel de eficientă sau utilă dacă diferența dintre minim și maxim este de doar câțiva pixeli , așa cum este cazul obișnuit cu corpul textului. Textul de corp cu o mică diferență între dimensiunea minimă și maximă a fontului nu va arăta deplasat pe nicio lățime a ferestrei de vizualizare, așa cum este cazul cu dimensiuni mai mari ale fontului. Pentru aceste cazuri, este recomandat să utilizați o tipografie receptivă obișnuită cu puncte de întrerupere.

Concluzie

Tipografia fluidă nu ar trebui să servească ca un înlocuitor pentru tipografia receptivă, ci ca o îmbunătățire pentru anumite cazuri de utilizare. Ar trebui să folosim tipografia fluidă pentru a scala fără probleme textul care are o diferență mai mare între dimensiunea minimă și cea maximă și pentru a menține o dimensiune consistentă.

Când folosim mai multe elemente de tipografie fluidă cu funcție de clamp CSS, trebuie să ne asigurăm că scalarea fluidului este sincronizată. Putem face asta calculând lățimea ferestrei de vizualizare și valoarea relativă și utilizându-le ca valori preferate în funcția de clamp CSS. De asemenea, trebuie să avem în vedere să folosim unități relative, cum ar fi unitatea rem, astfel încât tipografia fluidă să se adapteze la preferințele utilizatorului privind dimensiunea fontului.

Am văzut, de asemenea, cum tipografia fluidă poate limita capabilitățile de zoom ale utilizatorului, ceea ce poate cauza probleme de accesibilitate. Este important să testați tipografia fluidă cu zoom și să o reveniți la tipografia receptivă obișnuită dacă testarea dezvăluie că conținutul nu este suficient de zoomabil.

Ar trebui să reușim să rezolvăm această problemă prin suprascrierea valorilor tipografiei fluide atunci când are loc o acțiune de zoom. Cu toate acestea, în prezent nu este posibil să faceți acest lucru, deoarece API-ul Visual Viewport nu funcționează corect și nu răspunde la evenimentele de zoom ale utilizatorului.

Referințe

• clamp() , MDN
• „De ce ar trebui să fie tipul fluid, oricum?”, Elise Hein
• „Tipografie fluidă simplificată”, Chris Coyier
• „Tipul de răspuns și zoom”, Adrian Roselli
• „Tipografie receptivă și fluidă cu unități vh și vw ”, Michael Riethmuller