Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Euromind
CSS/SCSS

Progressbar for dokumentposition

af Per Lindsø Larsen 31. juli, 2019
skrevet af Per Lindsø Larsen 31. juli, 2019
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.

Det er relevant at indsamle LIX-tal på den enkelte løsning, da der er påvist en sammenhæng mellem lav læsbarhed og lav brugervenlighed . Dette skyldes, at kommunikationen med den enkelte bruger bliver besværliggjort, hvilket kan have den konsekvens, at brugeren får sværere ved at gennemføre løsningen.
Digitaliseringsstyrelsen: Viden om brugernes anvendelse af digitale løsninger

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!

0 Kommentarer
4
FacebookTwitterPinterestEmail
forrige post
Navngivne RegEx-grupper i ECMAScript 2018
næste post
IntersectionObserver

Relaterede indlæg

Kierkegaard injiceret med Javascript

15. april, 2022

Dansk evighedskalender

7. december, 2020

Variable fonte med dansk tegnsæt i open source

11. august, 2019

Media Query i 2019

18. juli, 2019

Danske Adressers Web API

17. juli, 2019

Barebone AMP i Codepen

9. juli, 2019

WEBP billedformatet

19. juni, 2019

GULP møder AMP – del 2

7. juni, 2019

GULP møder AMP – del 1

5. juni, 2019

Helt ude i AMP’en

2. juni, 2019

Efterlad en kommentar Afbryd svar

Gem mit navn, email, og website i denne browser til senere kommentarer.

Seneste indlæg

  • Historiske administrative geografier i Google Maps

    20. april, 2022
  • Kierkegaard injiceret med Javascript

    15. april, 2022
  • Dansk evighedskalender

    7. december, 2020

Kategorier

  • C#
  • CSS/SCSS
  • Excel
  • HTML
  • Javascript
  • Mobile
  • Webdesign
  • Xamarin

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bosat i Aarhus.

Du kan hyre mig til korterevarende projekter eller konkrete opgaveløsninger.

Pæn rabat til non-profit organisationer og foreninger.

Når jeg ikke koder, deltager jeg løbende i diverse spændende forskningsprojekter om alt andet end kodning.

Keep in touch

Facebook Twitter Email Github

Tags

Adresser AMP AMP Story Android API Billedformater Billedoptimering Brand C# Codepen Cordova CPR Crome DevTools CSS Debug Ecmascript Excel Fonte Gmail Gulp HTML Ikoner IOS Javascript JsFiddle Machine Learning Mail Mediaquery ML.NET Mobile RegEx SCSS SMTP Stylometri Visual Studio Webdesign Xamarin

Nyhedsbrev

Timeld nyhedsbrev for info om nye blog-indlæg, tips m.v.

  • Facebook
  • Twitter
  • Email
  • Github

@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273


Tilbage til top
Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Andersen, Grundvig, Kierkegaard og ML.NET – del 1

    11. august, 2019
  • 3

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    Registrer Gmail API til brug i javascript

    27. juni, 2019
@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273

Læs ogsåx

Dansk evighedskalender

7. december, 2020

Felt for CPR-nummer

19. april, 2019

GULP møder AMP – del 1

5. juni, 2019