Progressbar for dokumentposition

Studier af adfærd på nettet fortæller os, at besøgende på en webside læser 20-28% af teksten og i det hele taget kun bruger 5.59 sekunder på tekstlæsning. Selv om der nok gemmer sig en standardafvigelse i de opgørelser, der får meningen med tallene til af forsvinde hurtigere end læserne, så er det et faktum, at overfloden af information skærper vores evne til hurtigt at screene tekster, vurdere informationsværdien og komme videre i en fart

I erkendelse af, at de færreste besøgende således har tænkt sig at overnatte på en webside, er det i mange sammenhænge blevet almindeligt at give den flygtige besøgende nogle meta-informationer om den aktuelle tekst. Det er typisk informationer, der giver overblik over hvor lang teksten er, hvor lang tid det tager at læse den, hvor læsevenlig den er og en løbende status for, hvor langt læseren er nået i teksten.

En trendy ting på websites er blevet at have en vertikal progress-bar i toppen, der giver læseren en fornemmelse af, hvor langt han/hun er nået i teksten. Pt. kan det f.eks. ses på Berlingske Tidendes og dr.dks artikler. Før mobiler og tablet indtog markedet, var scrollbaren i højre side af browseren en god indikator, men den lever efterhånden en noget mere ydmyg og tilbagetrukken tilværelse.

En progressbar for dokumentposition kan laves både med og uden javascript. Den rene CSS-løsning er et smukt arbejde af Ricardo Prieto som her gengives i en minimalistisk form. En mere klassisk løsning med javascript følger senere.

See the Pen Scrollindikator (CSS) by Per Lindsø Larsen (@lindsoe) on CodePen.

En anden brugt information til læseren er en angivelse af den tid, som det tager at læse teksten. Det er selvsagt elastik i metermål, da læsehastigheden er forskellig. Ca. 4/5 af den voksne befolkning ligger dog i almindelighed på en hastighed på 200-250 ord i minuttet. For at nå frem til et tidsestimat, skal derfor bruges antal ord i teksten:

const text = document.getElementById("content").innerText;
const words = text.match(/\p{L}+/gu).length;
const readingtime = Math.round(words/250);

Når vi nu er i gang, kan vi lige så godt oplyse Lix-tal til læseren, som et udtryk for tekstens læsbarhed.

Citatet fra Digitalseringsstyrelsens pamflet om læsbarhed har så i øvrigt et LIX-tal på 63, der helt sprænger rammerne for, hvad der anses for en meget svær og utilgængelig tekst. Personligt er jeg af den opfattelse, at LIX er udmærket i forbindelse med børn i læseudvikling, men noget intetsigende for voksnes tilgang til tekster – herunder webtekster. Filosoffen Søren Kierkegaards værker har i lange stræk et lavere LIX-tal end H.C. Andersens skrifter, men ingen vil i ædru tilstand påstå, at Kierkegaard er lettere at læse end H.C. Andersen. LIX er påvirket af genre, fagudtryk m.v. Få ting er derfor værre end offentlige hjemmesider, hvor LIX-tælleren har været på overarbejde, og man bliver spist af med fjollede remser af småord, der ingen vegne fører hen.

For interesserede ser LIX-facitlisten således ud:

55 >  Meget svær, faglitteratur på akademisk niveau, lovtekster.
45 – 54 Svær, saglige bøger, populærvidenskabelige værker, akademiske udgivelser.
35 – 44 Middel, dagblade og tidsskrifter.
25 – 34 Let for øvede læsere, ugebladslitteratur og let skønlitteratur for voksne
24 <  Let tekst for alle læsere, børnelitteratur

LIX er defineret ved (antal ord/antal punktummer) + (lange ord * 100/antal ord), hvor lange ord er ord på 7 bogstaver eller mere. RegEx kan give de nødvendige tal fra teksten. Da antal punktummer tilstræber at give udtryk for antal sætninger, er andre sætningsendelser medtaget: spørgsmålstegn og udråbstegn.

const text = document.getElementById("content").innerText;
const words = text.match(/\p{L}+/gu).length;
const longwords = text.match(/[\p{L}+]{7,}/gu).length;
const sentences = text.match(/[\.!?]/g).length;
let lix = Math.round((words/sentences) + (longwords*100/words));

Med disse oplysninger kan statuslinjen med meta-informationer sættes:

document.getElementById("info").innerHTML = `🕑 ${readingtime} min. | ${words} ord | Lix: ${lix}`;

Da det nok er de færreste, der kan trykkes på maven kl. tre om natten og give en ordentlig forklaring på, hvad et bestemt LIX-tal udtrykker, så kan tilføjes en lille mini-bar, der visuelt viser, hvor på skalaen for almindelige teksters læsbarhed, den nærværende tekst placerer sig. Ligeledes med farver fra grøn mod rød efter overnævnte LIX-kategorier. Skalaen begrænset til området LIX 20-60, hvilket er fra pixi-niveau til de sværest tilgængelige tekster. Det er formentlig ikke mange andre tekster end Digitaliseringsstyrelsen vejledning om læsbarhed og det moderate LIX-tals betydning, der scorer over 60.

if (lix > 60) lix=60;
if (lix < 20) lix=20;
let lixpct = (lix-20) * (100/(60-20)); // Skalér Lix 20-60 => 0-100%
let style = `--v:${lixpct}%;--c:`;
switch (true) {
  case (lix<25):  document.getElementById("lix-bar").style = style + "#81C784";
    break;
  case (lix<35):  document.getElementById("lix-bar").style = style + "#689F38;";
    break;
  case (lix<45):  document.getElementById("lix-bar").style = style + "#9E9D24;";
    break;
  case (lix<55):  document.getElementById("lix-bar").style = style + "#FB8C00;";
    break;
  case (lix<61):  document.getElementById("lix-bar").style = style + "#E64A19;";
    break;
}

Javascript-versionen af indikator for position i dokumentet kan laves ved at hægte på window.onscroll der trigges når siden scrolles og positionen i dokumentet ændrer sig:

window.onscroll = () => {
  const el = document.documentElement;
  const position = el.scrollTop / (el.scrollHeight - el.clientHeight) * 100;
  document.getElementById("indicator").style.width = `${position}%`;
}

scrollTop giver oplysning om, hvor lagt der er scrollet fra top. clientHeight angiver størrelsen af det synlige indhold og scrollHeight giver den samlede højde for indholdet. Hermed fås en procentangivelse for, hvor stor en del af teksten, der er scrollet, og med den kan sættes bredden af indikatoren.

Det samlede kode bliver således:

See the Pen Scrollindikator med Lix by Per Lindsø Larsen (@lindsoe) on CodePen.

Til almen orientering, så indeholdt dette blog-indlæg 135 sætninger, 1049 ord – heraf 312 lange ord – og har et Lix på 38, svarende til “middel”. Da du er nået hertil i teksten, ville din progress-indikator være helt oppe og ringe på 100%. Tillykke med det!