Dag 26: Bruke relative fontstørrelser

Med få unntak dreier nettsteder seg om ord. Nyheter, meninger, tanker, idéer, historier, originale tekster, netthandel; alt dette er ord. Visuelt design og bilder er viktig, det er sikkert og visst, men hvis folk ikke kan lese dine ord, hva er så vitsen?

Høsten 2000 sa Jeffrey Zeldman så berømt at relativ fontstørrelse var umulig («piksler, baby ... eller ingenting») på grunn av den overveldende andelen av bugs som var i nettleserene, i alle fra Netscape 4 til de mest moderne nettleserene. Siden den gang har fortsatt ikke Netscape 4 blitt noe bedre, og den er fortsatt i bruk, men vi har i hvert fall lært én ting eller to om å temme nettlesere og gjøre relative fontstørrelser mulig. (Det har Zeldman også; hans nylige reinkarnasjon av Web Standards Project bruker teknikken beskrevet nedenfor.)

Bruk relative fontstørrelser i nettlesere som kan takle dem, og bruk absolutte fontstørrelser i Netscape 4 som ikke har en pålitelig støtte for relative fontstørrelser. Du kan til og med gjøre dette uten at du trenger mer enn ett stilark. Straks vil jeg gi deg en kopier-og-lim-inn løsning til Movable Type sin standard-mal og for alle standard-temaene til Radio. Samt en lengre forklaring til å hjelpe deg å implementere selve teknikken i andre maler, også.

Hvem har nytte av det?

  1. Lillian har nytte av det. Lillian har vanskeligheter med å se nettsider tydelig, hun bruker Internet Explorer for Windows som ikke støtter endring av tekststørrelse med mindre webdesigneren bevisst har valgt å spesifisere relative fontstørrelser. Lillian har endret standard tekststørrelse i nettleseren (under «Vis»-menyen, «Tekststørrelse»), men det hjelper henne ikke på nettsteder som bruker absolutte fontstørrelser. Dette inkluderer så og si hver eneste weblogg-mal som finnes. For eksempel så er dette hvordan Movable Types standard-mal ser ut for Lillian:

    Skjermskudd av Movable Types standard mal slik det ser ut gjennom Lillians øyner; tekst er fullstendig uklar og umulig å lese.

    Hvis malen hadde brukt relative fontstørrelser, så ville det se nøyaktig likt ut for majoriteten av leserne som ikke trenger (eller bryr seg) å endre tekststørrelsen. Men dette er slik det ville sett ut for Lillian:

    Skjermskudd av den samme malen men med relativ fontstørrelse; teksten er fortsatt uklar men stor nok til å kunne leses.

    Igjen; hvis folk ikke kan lese dine ord, hva er da vitsen?

Hvordan gjøre det: Radio

I din Home Page-mal, se etter en CSS-regel i <style>-seksjonen nær toppen som ser slik ut:

body, td, th, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}

Dette skal du ikke endre, men legg til følgende rett etter det:

/*/*/a{}
body,
body td,
body th,
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body,
html>body td,
html>body th
html>body p {
  font-size: small;
}
/* */

Sørg for å inkludere kommentarene på begynnelsen og slutten. De er nøkkelen til det hele, som forklart nedenfor.

Hvordan gjøre det: Movable Type

Standard-malen til Movable Type er mer kompleks enn Radio-malen, men vi skal gjøre akkurat det samme, bare mer av det. I din stilark-mal (styles-site.css) legger du dette til på slutten:

/*/*/a{}
body,
body a,
body .calendar,
body .calendarhead,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-post,
body .posted {
  font-size: xx-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-small;
}
html>body,
html>body a,
html>body .calendar,
html>body .calendarhead,
html>body .title,
html>body .sidetitle,
html>body .syndicate,
html>body .powered,
html>body .comments-post,
html>body .posted {
  font-size: x-small;
}

body .date {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body .date {
  font-size: small;
}

body #banner {
  font-size: 200%;
}

body .description {
  font-size: 60%;
}

body .blogbody {
  font-size: 110%;
}

body .blogbody,
body .calendar,
body .calendarhead,
body .side,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-body {
  line-height: 128%;
}
/* */

Igjen, sørg for å inkludere kommentarene på begynnelsen og slutten.

Hvordan gjøre det: Detaljert forklaring

Generelt er idéen at vi nå skal bruke nøkkelord til å sette fontstørrelsene. Disse er lite brukt (på grunn av bugs i eldre nettlesere), men de har tre interessante egenskaper:

  1. De er ikke forbundet med hverandre. Hvis du har en «main»-seksjon med 90% størrelse, og innen den har en «post»-seksjon med 90% størrelse, så vil noen nettlesere vise posten i 81% (90% x 90%), mens andre vil vise den i 90%. Med mer enn ett nestenivå (vanlig i maler som bruker tabeller til layout), blir teksten fort for liten og uleselig da prosentene binder seg med hverandre. Dog, hvis din «main»-seksjon har størrelsen small, og «post»-seksjonen innenfor har størrelsen small, så vil alle nettlesere vise «post»-seksjonen som small.
  2. De endrer størrelse riktig i Internet Explorer for Windows. Det er rart, for small høres ut som en absolutt størrelse (spesielt i lys av det faktum at small nestet innen small fortsatt er small, se ovenfor), men det virker. Hva kan jeg si? IE/Win endrer tekststørrelse med fontstørrelse-nøkkelord. Jeg sverger.
  3. De blir aldri for små. «Tekststørrelse»-innstillingen som Lillian bruker i Internet Explorer kan bli brukt til både å gjøre tekst mindre og større. Folk flest som har et godt syn foretrekker all teksten ett, og til og med to, hakk mindre enn normalt. Tekst med størrelsen satt i prosenter har det med å bli mikroskopisk og uklar når den er kombinert med den minste standard tekststørrelse-innstillingen. Dog, tekst med størrelsen satt ved å bruke nøkkelord for fontstørrelser er alltid minst 9px, noe som er leselig i alle type fonter (forutsatt godt syn).

Så skal vi bruke nøkkelord til å spesifisere fontstørrelsen til våre grunnleggende størrelser. Og hvis vi trenger bedre kontroll enn det, da skal vi bruke prosenter, men bare på mindre klasser (class) med tekst (på «post», men ikke på «main») for å unngå at prosentene binder seg med hverandre, og ikke for små, for å unngå at tekst blir mikroskopisk når den kombineres med brukere som bruker mindre enn standard tekststørrelse.

Her er den generelle idéen om nøkkelord for fontstørrelser:

p {
  font-size: 12px;
}

/*/*/a{}
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body p {
  font-size: small;
}
/* */

Det er mye som skjer samtidig nå, og det er alt sammen viktig, så følg nøye med.

  1. Først definerer vi en absolutt størrelse (12px) for alle <p>-ene. Alle nettlesere bruker denne stilen, inkludert Netscape 4.
  2. Deretter inkluderer vi kommentaren med så rart utseende, «/*/*/». På grunn av bugs i Netscape 4, så vil alt mellom denne kommentaren og den neste bli ignorert. Det stemmer, all følgende stil vil kun bli brukt i ikke-Netscape-4-nettlesere.
  3. Rett etter kommentaren med så rart utseende legger vi til en tom regel «a {}». Opera 5 for Mac er buggete og ignorerer denne regelen (og kun denne regelen), men den bruker alt annet.
  4. Vi har nå skåret ut et område hvor vi kan definere regler som blir brukt i alle nettlesere bortsett fra i Netscape 4. Nå kan vi starte å definere relative fontstørrelser (som Netscape 4 ikke takler). Det første vi gjøre er å bruke «body p»-selektoren til å re-definere atferden til p-taggen. Som en årsak av hvordan CSS virker så vil dette overskrive vår tidligere p-selektor. (i teknisk terminologi er «body p» en mer spesifikk selektor enn «p».)
  5. Vi re-definerer fontstørrelsen til alle <p>-taggene til å bli x-small. Dette er et nøkkelord for fontstørrelse som, med standard innstillinger, Internet Explorer 5 for Windows vil oversette til å bli 12px. Dog, hvis brukeren endrer sin «Tekststørrelse» (i «Vis»-menyen) vil denne teksten kunne skalere til større og mindre, avhengig av brukerens innstillinger. Det er dette vi ønsker. (Merk: Vi har nå definert fontstørrelsen to ganger for IE5/Win, men det er OK, for den mest spesifikke selektoren vinner alltid, og den forrige selektoren blir enkelt og greit oversett.)
  6. Uheldigvis, IE5/Win en off-by-1 bug med dets nøkkelord for fontstørrelse; alle andre nettlesere i verden (IE5/Mac, Netscape 6, Mozilla, IE6/Win) vil oversette x-small til å bli 10px, ikke 12px. Heldigvis for oss har IE5/Win en egen bug som vi kan utnytte; den ser på den rart-utseende voice-family og tror feilaktig at hele «body p»-selektoren er over, så den ignorerer alle linjene frem til «}».
  7. som vi har skåret ut et mindre område hvor vi kan definere regler som blir brukt av alle nettlesere unntatt IE5/Win (og Netscape 4 som lykksalig ignorerer alt dette). Så re-definerer vi fontstørrelsen til *small, noe som moderne ikke-IE5/Win-nettlesere (den eneste som fortsatt lytter) korrekt tolker som 12px (med standard-innstillinger). Igjen, hvis brukerne setter sin «Tekststørrelse» til å bli større, så vil denne teksten skalere som større, akkurat som vi ønsker.
  8. Men vent! Opera 5 har den samme buggen som IE5/Win, så den ble også forvirret over voice-family-hacket, men den tolker nøkkelordene til fontstørrelsen korrekt, så nå vil teksten vår se for liten ut i Opera 5. Heldigvis støtter Opera 5 en tredje type selektor, «html>body p». (Igjen, dette er «mer spesifikt» enn «body p», så den får forrang over den tidligere selektoren.) IE5/Win støtter ikke denne type selektor og vil enkelt ignorere den, noe som er akkurat det vi ønsker (fordi vi allerede har kompensert for dets off-by-1 bug og ikke ønsker å gå og skitne det til nå). Heller ikke IE6/Win støtter den, men det er OK for vi tok oss av det med «font-size: small» etter «voice-family: inherit»-hacket i «body p»-selektoren. All andre nettlesere støtter «html>body»-selektoren, så for de så ender vi opp med å definere fontstørrelsen fire ganger. Igjen, det er ikke noe problem fordi den mest spesifikke selektoren alltid vinner, og resten av dem blir enkelt og greit ignorert.
  9. Til slutt så har vi et sett med tomme kommentarer: /* */. Dette trigger Netscape 4 sin parser til å starte å lytte igjen. Hvis vi videre definerer andre regler etter disse tomme kommentarene så vil alle nettlesere (inkludert Netscape 4) bruke dem.

For å oppsummere:

  1. Netscape 4 viser <p>-tekst som 12px, uavhengig av brukerenes innstillinger.
  2. Internet Explorer 5 for Windows viser <p>-tekst som x-small, noe som ender opp med å bli 12px med standard innstilling, men den vil skalere til større hvis brukeren setter sin innstilling for «Tekststørrelse» større i «Vis»-menyen.
  3. Internet Explorer 6 for Windows viser <p>-tekst som small på grunn av «font-size: small»-regelen i «body p»-selektoren. Dette ender opp med å bli 12px med standard innstilling, men den vil skalere til større hvis brukeren setter sin innstilling for «Tekststørrelse» til større.
  4. Internet Explorer 5 for Mac, Opera, Netscape 6, Mozilla, og (forhåpentligvis) alle fremtidige nettlesere vil vise <p>-tekst som small, dette på grunn av «font-size: small»-regelen i «html>body p»-selektoren. Dette ender opp med å bli 12px med standard innstilling, men vil skalere til større hvis brukeren bruker «Tekst-zoom»-funksjonen.

Les mer

  • Mark Pilgrim: Relative Font Sizing HOWTO. Gir hovedsaklig denne samme forklaringen, men nettsiden i seg selv er et eksempel på teknikken, så du kan se den i praksis.
  • Todd Fahrner: Size Matters: Making Font Size Keywords Work.
  • Caio Chassot: Hiding CSS from Netscape 4 uten å bruke mer enn ett stilark.
  • Tantek Çelik: Box Model Hack. Hvordan skjule CSS for Internet Explorer 5 på Windows.
  • The Web Standards Project bruker også nøkkelord for fontstørrelse sammen med IE5/Win-hacket, selv om de bruker en Javascript-basert løsning (i stedet for inline-kommentar-hacket) for å fikse problemet med Netscape 4.
  • Owen Briggs: Text Sizing. Skjermskudd av forskjellige teknikker til relativ-fontstørrelse på tvers av nettlesere, plattformer, og standard-innstillinger for tekststørrelse.