Slik fikser du filler, enker og foreldreløse barn

Det trykte ordet har sine egne elementer av stil som er enklere å administrere enn i den digitale verden - forfattere, forfattere, journalister og spaltister jobber innenfor faste marginer og papirorientering, mens papirstørrelse og kolonner er satt til en bestemt høyde og bredde, og oppsettet inkluderer topptekst, bunntekst og vertikal justering - alt før den første bokstaven eller ordet slås ut på tastaturet. Imidlertid kan det være vanskelig for webdesigneren eller webinnholdssjefen å håndtere - sikre at de nøyaktige typografiske elementene er gjengitt på websiden i hver nettleser for alle brukere. I dette innlegget vil jeg demonstrere å ta kontroll over fille, enker og foreldreløse. Hvordan kan webdesigneren få kommando over det gjengitte ordet og unngå stygge filler, vonde å lese enker og fryktelige foreldreløse barn?

rags

Rags - i typografi, sideoppsett og typografi - er de ujevne kantene på teksten i et avsnitt som er på linje på den ene siden. Det er tekstflyten eller bildeplasseringen i forhold til en side, målt kolonne, tabellcelle eller fane, og er også kjent som tekstjustering, tekstberettigelse eller typebegrunnelse.

De grunnleggende variantene av tekstjustering inkluderer fire typografiske justeringer:

  • Venstre justering
  • Rett justering
  • Justified
  • sentrert
"Fille" er sannsynligvis en av de mest oversett detaljene innen webtypografi, men likevel kan strømmen gjøre eller ødelegge utseendet og følelsen på et nettsted. Hva er forskjellen mellom god fille og dårlig fille? God fille har en behagelig flyt der linjen bryter til høyre for avsnittet og den går inn og ut i små trinn. Dårlig fille skaper distraherende former med uregelmessig hvitt rom i kantene på siden eller kolonnen der linjeskift er varierte og inkonsekvente. Figur A og B nedenfor illustrerer henholdsvis dårlig og god fille.

Figur A

Figur B

enker

Enker er paragrafsluttende linjer som faller på begynnelsen av den neste siden / kolonnen, og atskilt fra resten av teksten. Enke er en veldig kort linje, vanligvis ett ord, eller slutten av et bindestrek ord på slutten av et avsnitt eller kolonne. Enker etterlater for mye hvitt mellomrom mellom avsnitt eller øverst på siden. Dette avbryter leserens øye, forstyrrer leseprosessen og kan til og med avskrekke forståelsen. Se eksemplet på enke i figur C nedenfor.

Figur C

Orphans

Foreldreløse er enkeltord som blir liggende alene på slutten av et avsnitt. En foreldreløs er et ord, del av et ord, eller veldig kort linje som vises av seg selv på slutten av et avsnitt. En foreldreløs kan også være en avsnittåpningslinje som vises av seg selv nederst på en side / kolonne. Foreldreløse resulterer i for mye hvitt mellomrom mellom avsnitt eller på bunnen av en side. Se eksemplet på en foreldreløs i figur D nedenfor.

Figur D

Festing av filler, enker og foreldreløse barn

La oss finne noen måter å balansere fille på, fikse enker og utelate foreldreløse i din webtypografi. Å bruke stiler på avsnittene dine hjelper deg med å kontrollere hvordan den fillete teksten vises. Selv om du bruker CSS gir deg litt kontroll, gir CSS3 ytterligere regler for å avgrense effektiv begrunnelse. Selv om det ikke er noen idiotsikre løsninger for å kontrollere fille, er det noen modifikasjoner som kan brukes på blokken på tekst.

Innstilling av tekst som er berettiget eller fillete tekst oppnås med CSS med egenskapen tekstjustering, som vist i kodebiten nedenfor:

 / * fillete høyre * / 
 P {text-align: left} 
 / * fillete venstre * / 
 P {text-align: right} 
 / * ingen fillete * / 
 P {text-align: justify} 

Imidlertid er denne CSS-stylingen ikke et perfekt svar, og siden effektiv begrunnelse av tekst bare kan oppnås hvis lange ord er bindestrek, har HTML og CSS alene ingen bestemmelser for å legge til automatisk bindestrek med all gjeldende nettleserstøtte; Manuell bindestrek langs linjeskift er uaktuelt; derfor viser det seg å være en dårlig løsning.

Vi får litt hjelp fra CSS Multi-column Layout Module, som beskriver hvordan tekst- og bildeinnhold kan strømme inn i flere kolonner, for eksempel, og kan defineres med et mellomrom og en regel mellom hver kolonne i et tildelt kolonnetall hvis ønskelig. Jeg gjennomgikk denne CSS3-teknikken i detalj "Arbeide med CSS3 Multi-column Layout Module." Nedenfor vises et utdrag av dette kodeeksemplet, som angir antall faste kolonner med kolonnetallet satt til 3, kolonnegapet til 1 em og en solid svart 1px kolonneregel. Med denne stylingen vil kolonnebreddene variere avhengig av tilgjengelig bredde på nettleseren.

 .column_count { 
 -moz-kolonnetelling: 3; 
 -webkit-kolonnetelling: 3; 
 -moz-kolonne-gap: 1em; 
 -moz-kolonne-regel: 1px solid svart; 
 -webkit-kolonne-gap: 1em; 
 -webkit-kolonne-regel: 1px solid svart; 
 kolonnetelling: 3; 
 kolonne-gap: 1em; 
 kolonne-regel: 1 px solid svart; 
 } 
Et eksempel på denne stylingen brukt på eksempeltekst vises i figur E nedenfor:

Figur E

© Copyright 2021 | pepebotifarra.com