Flydende typografi er en fancy måde af "beskrive skrifttypeegenskaber, såsom størrelse eller linjehøjde, der skaleres flydende i henhold til størrelsen af visningsporten". Det er også kendt under andre navne, som responsiv typografi, fleksibel type, flydende type, viewport-størrelse typografi, flydende typografi og endda responsiv displaytekst.
Her er en eksempel på flydende typografi som du kan spille live (med tilladelse fra MDN dokumentation). CSS-Tricks har dækket flydende typografi også i vid udstrækning. Men pointen her er ikke at introducere dig til flydende typografi, men hvordan man bruger den. Mere specifikt vil jeg vise dig, hvordan du implementerer flydende typografi i WordPress 6.1, som for nylig introducerede en flydende funktion direkte i WordPress Block Editor.
Åbn din style.css fil, smæk i en stilregel med fancy clamp()-ing på font-size ejendom, og godt at gå, ikke? Sikker på, det vil give dig flydende tekst, men for at få Block Editor-kontroller, der gør det muligt at anvende flydende type hvor som helst på dit WordPress-websted? Det kræver en anden tilgang i disse blokerede dage.
Understøttelse af flydende typografi i Gutenberg
Nogle WordPress-temaudviklere har brugt clamp() funktion til at definere en væske font-size, i deres WordPress-temaer, selv i nyere “blok”-temaer som f.eks Tyve Toogtyve, Tyve Treogtyve, Og andre.
Men Gutenberg-plugin'et - det, der indeholder eksperimentel udvikling til WordPress Block og Site Editor-funktioner - introducerede understøttelse af flydende typografi starter i version 13.8. Det åbnede døren for implementering på et temaniveau, så væsketypen kan anvendes på specifikke elementer og blokke direkte i Block Editor. CSS-Tricks blev endda givet et shout-out i Træk anmodning der slog funktionen sammen.
Det arbejde blev en del af WordPress Core i WordPress 6.1. Rich Tabor, en af de tidligere fortalere for flydende typografi i Block Editor siger:
[Flydende typografi] er også en del af at gøre WordPress mere kraftfuldt, mens det ikke er mere kompliceret (hvilket vi alle ved er noget af udfordringen). […] Flydende typografi virker bare. Faktisk synes jeg, det fungerer fantastisk.
Denne Lav WordPress-posthøjdepunkter fremgangsmåden for at understøtte funktionen på blokniveau, så en flydende skriftstørrelse anvendes på blokke dynamisk som standard. Der er nogle fordele til dette selvfølgelig:
- Det giver en måde for temaforfattere at aktivere flydende typografi uden at bekymre sig om at implementere det i kode.
- Det anvender flydende typografi til specifikke typografiske enheder, såsom elementer eller blokke på en vedligeholdelig og genbrugelig måde.
- Det giver mulighed for fleksibilitet med hensyn til skriftstørrelsesenheder (f
px,rem,emog%).
Nu hvor denne nye funktion er tilgængelig i WordPress Block Editor som standard, kan temaforfattere anvende ensartet flydende typografi uden at skrive yderligere kode.
Blokke, der understøtter typografi og afstandsindstillinger
Gutenberg 14.1 udgivet den 16. september 2022, og introducerede typografiske indstillinger på en masse blokke. Det betyder, at tekstindstillingerne for disse blokke blev indstillet i CSS før og også skulle ændres i CSS. Men disse blokke giver nu skrifttype- og afstandskontrol i Block Editor-grænsefladen.
Det arbejde er i øjeblikket planlagt til at blive tilføjet til WordPress 6.1, som beskrevet i dette Lav WordPress blogindlæg. Og med det er et udvidet antal blokke, der med typografiunderstøttelse.
Erklærer flydende type i et WordPress-bloktema
Så hvordan bruger vi denne nye flydende typografi i WordPress? Svaret er inde theme.json, en ny-ish fil, der er specifik til blokeringstemaer, der indeholder en masse temakonfigurationer i nøgle:værdi-par.
Lad os se på en regel for en stor skrifttype i theme.json hvor contentSize: 768px og vi arbejder med en widesize: 1600px layout. Sådan kan vi specificere en CSS font-size ved hjælp af clamp() fungere:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}Kun fra WordPress 6.1 rem, em , px enheder er understøttet.
Det er fantastisk og virker, men med den nye væsketype-funktion ville vi faktisk bruge en anden tilgang. Først vælger vi flydende typografi på settings.typography, som har en ny fluid ejendom:
"settings": {
"typography": {
"fluid": true
}
}Så specificerer vi vores settings.fontSizes som før, men med en ny fluidSize ejendom, hvor vi kan indstille min , max størrelsesværdier for vores væsketypesortiment.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}Det er virkelig det. Vi har lige tilføjet flydende type til en skriftstørrelse kaldet "Large" med et interval, der starter kl 2.25rem og skalerer op til 3rem. Nu kan vi anvende "Large" skrifttypen på enhver blok med skrifttypeindstillinger.
Hvordan fungerer det under motorhjelmen? Rich Tabor giver en god forklaringsom det gør denne pull-anmodning i GitHub. Kort sagt, WordPress konverterer theme.json egenskaber i følgende CSS-regel:
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}…som anvendes på elementet, sig en afsnitsblok:
...
Til at begynde med havde jeg svært ved at forstå og omslutte begrebet CSS i mit sind clamp() fungere uden også at lære om min(), max()og calc() funktioner. Dette lommeregnerværktøj hjalp mig en del, især til at bestemme, hvilke værdier jeg skal bruge i mine egne temaprojekter.
Til demonstrationsformål, lad os bruge lommeregneren til at definere vores font-size rækkevidde, så størrelsen er 36px ved en 768px viewport bredde og 48px ved en 1600px visningsportens bredde.
Lommeregneren genererer automatisk følgende CSS:
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);Lommeregneren giver muligheder for at vælge inputenheder som px, remog em. Hvis vi vælger rem enhed genererer lommeregneren følgende clamp() værdi:
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);Så disse minimums- og maksimumværdier svarer til fluidSize.min , fluidSize.max værdier i theme.json. Det min værdi anvendes på visningsporte, der er 768px bred og under. Derefter font-size skaleres op, efterhånden som visningsportens bredde vokser. Hvis viewporten er bredere end 1600px, max anvendes og font-size er afgrænset der.
Eksempler
Der er detaljerede testinstruktioner i den fusionerede Pull Request, der introducerede funktionen. Der er endnu flere testinstruktioner fra Justin Tadlocks pre-prelease-indlæg på Make WordPress.
Eksempel 1: Indstilling af en ny flydende skrifttypeindstilling
Lad os starte med Justins sæt instruktioner. Jeg brugte i en ændret version af standarden Twenty Treogtyve tema som i øjeblikket er under udvikling.
Lad os først sikre os, at vi kører Gutenberg-pluginnet (13.8 og nyere) eller WordPress 6.1, og derefter tilvælge flydende type på settings.typography.fluid ejendom i theme.json fil:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}Lad os nu droppe settings.typography.fontSizes eksempler derinde:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
"fontSizes": [
{
"name": "Normal",
"size": "1.125rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal"
}
]
}
}
}Hvis alt fungerer korrekt, kan vi nu gå ind i WordPress Block Editor og anvende "Normal" skrifttypeindstillingen på vores blok:
Pæn! Og hvis vi gemmer og inspicerer det element på frontenden, er dette markeringen:
Meget godt. Lad os nu sikre os, at CSS'en rent faktisk er der:
Godt godt. Lad os afsløre den tilpassede CSS-egenskab for at se, om den virkelig fastholder ting:
Det ser ud til, at alt fungerer, som vi ønsker det! Lad os se på et andet eksempel...
Eksempel 2: Ekskludering af en skrifttypeindstilling fra flydende type
Denne gang, lad os følge instruktioner fra den flettede Pull Request med et nik til dette eksempel af Carolina Nymark, der viser, hvordan vi kan deaktivere flydende type på en bestemt skrifttypeindstilling.
Jeg brugte tomt tema som anbefalet i instruktionerne og åbnede op for theme.json fil til test. For det første vælger vi væsketypen, præcis som vi gjorde før:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}Denne gang arbejder vi med mindre wideSize værdi af 1000px i stedet for 1600px. Dette skulle give os mulighed for at se væsketypen arbejde i et nøjagtigt område.
OK, videre til at definere nogle brugerdefinerede skriftstørrelser under settings.typography.fontSizes:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"size": "1rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal",
"name": "Normal"
},
{
"size": "1.5rem",
"fluid": {
"min": "1.5rem",
"max": "2rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "2.25rem",
"fluid": false,
"slug": "x-large",
"name": "Extra large"
}
]
}
}
}Bemærk, at vi kun har anvendt flydende type-funktionen på "Normal", "Medium" og "Large" skrifttypeindstillinger. "Extra Large" er den ulige, hvor fluid objekt er indstillet til false.
Hvad WordPress gør herfra - via Motor i Gutenberg-stil — er at anvende de egenskaber, vi sætter i CSS clamp() funktioner for hver skriftstørrelsesindstilling, der har valgt flydende type og en enkelt størrelsesværdi for indstillingen Ekstra stor:
--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;Lad os tjekke markeringen på frontenden:
God start! Lad os bekræfte, at .has-x-large-font-size klasse er udelukket fra væsketype:
Hvis vi afslører --wp--preset--font-size--x-large variabel, vil vi se, den er sat til 2.25rem.
Det er præcis, hvad vi ønsker!
Blok-temaer, der understøtter flydende typografi
Mange WordPress-temaer gør allerede brug af clamp() funktion til væsketype i både blok og klassiske temaer. Et godt eksempel på brug af flydende typografi er den nyligt udgivne Twenty Twenty-Three standardtema.
Jeg har gennemgået alle bloktemaerne fra WordPress Block Theme mappe, undersøgelse theme.json fil af hvert tema og for at se, hvor mange bloktemaer, der i øjeblikket understøtter flydende typografi - ikke den nye funktion, da den stadig er i Gutenberg-plugin'et, når dette skrives - ved hjælp af CSS clamp() fungere. Af de 146 temaer, jeg gennemgik, brugte de fleste af dem en clamp() funktion til at definere afstand. Lidt mere end halvdelen af dem brugt clamp() for at definere skriftstørrelser. Det Alara temaet er det eneste, der skal bruges clamp() for at definere layout containerstørrelser.
Forståeligt nok indeholder kun nogle få nyligt udgivne temaer den nye flydende typografifunktion. Men her er dem, jeg fandt, der definerer det i theme.json:
Og hvis du læser mit tidligere indlæg her på CSS-Tricks, den TT2 Gopher-blokke tema, jeg brugte til demoen, er også blevet opdateret for at understøtte den flydende typografi-funktion.
Udvalgte reaktioner på WordPress flydende typografifunktioner
At have flydende typografi i WordPress på indstillingsniveau er super spændende! Jeg tænkte, at jeg ville dele nogle tanker fra folk i WordPress-udviklerfællesskabet, som har kommenteret det.
Matias Ventura, den ledende arkitekt for Gutenberg-projektet:
Som en af de større bestræbelser på at gøre udgivelse af smukke, rige sider i WordPress, er flydende typografi en temmelig stor oplevelsesgevinst for både folk, der bygger med WordPress - og dem, der forbruger indholdet.
Automatisk udvikler Ramon Dodd kommenteret i Pull-anmodningen:
Kontrast den idé med skriftstørrelser, der reagerer på specifikke visningsportstørrelser, såsom dem defineret af medieforespørgsler, men gør ikke noget i mellem disse størrelser.
theme.jsongiver allerede forfattere mulighed for at indsætte deres egne flydende skriftstørrelsesværdier. Dette vil ikke ændre sig, men denne PR tilbyder det til folk, der ikke ønsker at bekymre sig om implementeringsdetaljerne.
Nick Croft, forfatter til GenesisWP:
Brian Garner, designer og hovedudvikleradvokat hos WPEngine:
Et par udviklere tror nogle funktioner bør være en opt-in. Jason Crist af Automattic siger:
Jeg elsker kraften ved flydende typografi, men jeg tror heller ikke på, at den bare skal være aktiveret som standard. Dets brug (og detaljerne i det) er vigtige designbeslutninger, der bør tages omhyggeligt.
Du kan også finde en masse flere kommentarer i den officielle testinstruktioner for indslaget.
Indpakning op
Den flydende typografifunktion i WordPress er stadig i aktiv udvikling i skrivende stund. Så lige nu bør temaforfattere fortsætte med at bruge det, men med forsigtighed og forvente nogle mulige ændringer, før det officielt udgives. Justin advarer temaforfattere, der bruger denne funktion og foreslår at holde øje med følgende to GitHub-problemer:
Der er også stadig masser af igangværende arbejde om typografi og andre designrelaterede WordPress-værktøjer. Hvis du er interesseret, så se denne typografisporing GitHub-billet , designværktøjer relateret til GitHub-problemer.
Ressourcer
Jeg brugte følgende artikler, når jeg undersøgte flydende type, og hvordan WordPress implementerer det som en funktion.
