Javascript-understödd layout

Taggningsmöjligheternalagen.nu är första steget i en process genom vilken det ska bli möjligt att koppla information (som etiketter, kommentarer eller bara understrykningar) till lagtext. Ett problem har varit hur man ska fixa det rent layoutmässigt.

Det övergripande resultatet jag är ute efter är följande:

De turkosa områdena är alltså lagtext, medans de gula är redaktionella kommentarer.

Det klassiska sättet att göra detta hade varit med en enkel tabellayout.De röda linjerna är tabellceller:

Men sånt är ju fel och fult. Det är inte semantiskt meningfullt, utan ett missbruk av dokumentstruktur för att åstadkomma en layouteffekt. Det är inte table-free design.

Det nya sättet att göra det med är CSS. För att få ett block att ligga bredvid ett annat block använder man float="left|right" och märker upp blocken med div-taggar. För att inte kommentarerna till stycke 1 ska flyta ihop med kommentarerna till stycke 2, utan ligga i linje med det stycke de kommenterar, måste varje lagtext-kommentarspar kapslas in i ytterligare en div (de röda linjerna är yttre div:ar, de gröna inre):

… och exakt hur skulle detta vara bättre, egentligen?

Vad vi har gjort är att återuppfinna tables för layout, fast med ett annat ord. Det semantiskt rätta vore att en stycke lagtext följs, på samma nivå i dokumentträdet, av kommentaren till denna text. Men det ska alltså presenteras sida-vid-sida. Hur göra detta?

Såhär!

Här är HTML-koden enkel, utan nästlade div:ar. Magin består i att kommentarsboxarna till en början är dolda (display=none i CSS-instruktionerna). När sidan är laddad och vi vet vilken position som varje lagtextbox har hamnat på, så kan vi använda absolute positioning och flytta kommentarsboxarna till sin rätta plats bredvid lagtexten:

             pe = FindPreviousBox(ps[i].previousSibling)
             ps[i].style.top = pe.offsetTop + "px"
             ps[i].style.display = "block";

(FindPreviousBox är en enkel rekursiv funktion som hittar rätt lagtextelement.) Vi hade inte kunnat göra det här statiskt, eftersom vi inte hade någon aning om var varje lagtextbox skulle komma att hamna på sidan i absoluta termer, eftersom detta beror på ffa läsarens fontstorlek. Men när sidan väl är laddad och layoutad är det en enkel operation att hitta rätt information i DOM:en.

Är det här en perfekt lösning? Nej, jag är inte ens säker på att den är bra. Framförallt funkar den riktigt dåligt om användaren har CSS men inte javascript, eftersom kommentarsboxarna då är gömda. Däremot funkar det bra med google och lynx.

Det kanske finns något semantiskt meningsfullt sätt att organisera informationen som låter mig uttrycka källtext med kommentarer på ett sånt sätt att det dessutom går att layouta fint. Men om inte annat är det kanske ett uppslag till hur man kan augumentera sin layout med lite javascript.

Imorgon ska jag prata om vikten av vettig lagstiftningsteknik ur ett demokratiskt perspektiv. Det blir mindre högtravande än det låter.

1 reaktion till “Javascript-understödd layout”

Kommentarer kan inte lämnas på detta inlägg.