HTML og CSS: Korleis markere lenkjer <a> og forkortingar <abbr>

Ei av favorittsidene mine for å lære typografi, er Butterick’s Practical Typography. Eg har lært mykje der, og det var den sida som for alvor fekk meg ut av den koselege, enkle typografibåsen med vidaregåandekunnskap (i beste fall), og til å forstå kva det var for ting eg hadde merkt meg, men ikkje heilt forstod. Ein av tingane eg la merke til der, var at alle lenkjene var markert ikkje med understreking, ikkje med endring av skrifttypen, men på eit nett og elegant vis: eit rødt grad-teikn. Eg stjal idéen, og nokre har kanskje merka seg at eg merkar lenkjer og forkortingar her på bloggen med eit lenkje- og eit stjerneteikn. Her får du lære korleis.

Eg har gjort mangfaldige oppgraderingar av bloggen sin utsjånad gjennom åra eg har skrive på han, og eg har planar om ein ny runde ein gong dette året (viss eg rekkjer det). Per i dag synest eg at skrifta eg har er for lita, og eg har ikkje fått til å importere skrifter slik eg vil. Men eg oppdaga i dag at eg fekk det til å verke (og her oppdaga eg at «verkje» (eller «verke») er å ha låkt, mens å «verke» er å gjere, arbeide) på MDV-bloggen, så eg kjem til å ta ein titt der for å finne ut korleis eg gjorde det. Først og fremst er det eit problem at ligaturar ikkje verker som dei skal, og slikt kan ein jo ikkje ha! 😉

Og der brukte eg eit smilefjes for første gong her på bloggen!

Merka eg har vald meg, er altså ei lenkje og ei stjerne. Tidlegare hadde eg eit lite spørjeteikn på forkortingar – det ga meininga å ha eit «Kva er dette?»-teikn – men eg syntest det blei for forstyrrande, så etter litt leiting på &what; (som ein seier «amp what»), fann eg meg eit symbol som eg syntest var tydeleg nok, samstundes som det ikkje var for skrikande, og for øvrig ikkje kunne bli oppfatta som ein del av den laupande teksten. Symbolet var U+2727 white four pointed star, og eg synest det gjer god nytte. For lenkjene (som eg no har hatt ei stund), var symbolet eg valde meg U+1f517 link symbol; namnet er jo òg passande.

Så korleis gjorde eg det?

Forkortingar: <abbr>

Forkortingar vert markert i HTML med <abbr>. Det fine med å leggje til slike kodar i staden for å berre skrive det ut, er at ein kan leggje til ein forklarande ballongtekst for lesaren med title="Det du vil at lesaren skal få sjå, står her.". Det gjer det mykje betre for lesarar som vil lære noko nytt når du som skribent nyttar deg av dei verktya som HTML byr på, så ta dei i bruk! For å sjå korleis ein slik ballongtekst ser ut, før peikaren din over den første HTML-en i byrjinga av dette avsnittet. Første gong eg skreiv det, merka eg det som forkorting med <abbr>, og alle gongane etterpå, står det berre i <span>. Det er nok med èin (Som nemnd tidlegare, vel eg å bruke aksenten som gjev rett uttale, i strid med kva Språkrådet seier, men i semje med kva einkvar som les aksentene rett ville ha sagt at er rett.) gong – og det er noko eg no veit, så eg må ta meg ein runde gjennom eldre postar og fjerne den valdsame markeringa mi av forkortingar.

<p class="nyseksjon">Forkortingar vert markert i <abbr class="kapiteler-smaa" title="Hypertext Markup Language">HTML</abbr> med <code class="html">&lt;abbr&gt;</code>. Det fine med å leggje til slike kodar i staden for å berre skrive det ut, er at ein kan leggje til ein forklarande ballongtekst for lesaren med <code class="html">title="Det du vil at lesaren skal få sjå, står her."</code>. Det gjer det mykje betre for lesarar som vil lære noko nytt når du som skribent nyttar deg av dei verktya som <span class="kapiteler-smaa">HTML</span> byr på, så ta dei i bruk! For å sjå korleis ein slik ballongtekst ser ut, før peikaren din over den første <span class="kapiteler-smaa">HTML</span>-en i byrjinga av dette avsnittet. […] </p>

For å få merket til å synast, la eg til ein liten kodesnutt i stilarket mitt, som ser slik ut:

abbr { text-decoration: none; /* Eigentleg ikkje naudsamt, men tidlegare hadde eg understreking av forkortingar, så dette motverkar gamal kode som kanskje låg gøymt. */ padding-right: 0.1875em; /* Dette er for å gje plass til teiknet fram til neste ord. */ } abbr::after{ content: "\2727"; /* For å syne teikn i CSS, bruk «\» etterfølgd av den heksadesimale talkoden for teiknet. color: #e8d6ef; position: relative; top: -0.375em; /* Linja over og under plasserar teiknet der eg ville ha det i samråd med position: relative over */ left: -0.15em; letter-spacing: -0.5em; }

Lenkjer: <a>

Lenkjene er ikkje markert på nokon annan måte i den laupande teksten min enn eit symbol som syner at her er det noko anna som skjer. I byrjinga var dei berre understreka; det er effektivt, men ikkje særleg pent. I ei lang ri markerte eg dei med farge, men då eg såg den elegante løysinga til Butterick, fann eg ut at eg måtte prøve noko slikt ein dag sjølv. Det tok meg berre åtte år å faktisk gjere det … I alle høve, her er koden:

p a::before { /* I motsetnad til over, er symbolet her i forkant. */ content: "\1f517"; /* Heksadesimale koder kan ha fleire enn fire siffer. */ font-size: 0.75em; /* Minka for å gli betre inn. */ position: relative; top: -0.075em; right: 0.25em; letter-spacing: -0.5em; padding-right: 0.25em; /* For å gje litt luft til lenkjeteksten. */ }

Det kan vere verdt å nemne èin ting spesielt: p a::before. Grunna til at eg har sett inn <p> framom, er for å sleppe at overskrifter, bildelenkjer, kommentarlenkjer og alle moglege andre stader der lenkjer forekjem usynleg, skal få symbolet framom. Det kan vere at eg kjem til å leggje til at og <figcaption>-tekst skal kunne gjere det, men fram til no har eg ikkje hatt <p> innanfor dei.

Til slutt eit lite skrytebilete av korleis det ser ut i praksis:

Bilete av korleis lenkje- og forkortingsmerka ser ut på bloggen. Bilete: Tor-Ivar Krogsæter / Canned Blog 20©21.