css

Att göra en version för utskrift av stapeldiagrammet jag experimenterade med visade sig vara lättare sagt än gjort. De flesta moderna webbläsare skriver inte ut vare sig bakgrundsbilder eller bakgrundsfärger om inte besökaren explicit slår på den möjligheten – och det tror jag inte någon vill förlita sig på. Dessutom tar sig webbläsarna i regel friheten att byta ut för ljusa textfärger till svart eller mörkgrått. Till detta kommer en hel mängd små underliga buggar som bara verkar komma fram vid utskrift.

Efter en del kompromissande nöjde jag mig med denna variant (bara print-stilmall, välj print preview för att se den). Förutom förenklingen (gråskala, ingen bakgrund, inga skuggor, ingen ram) så valde jag att ta bort siffrorna i staplarna. De verkade inte gå att göra tillräckligt ljusa för att synas mot de mörka staplarna, men om man nöjer sig med ramar istället för bakgrund för staplarna så är det inte några problem att visa dem. Kanske skulle det vara en bättre lösning (ingen informationsförlust), men jag ville se om det gick att få samma grafiska stil på diagrammet vid utskrift som på skärmen.

Exemplet är än så länga bara testat i Firefox 2 och Internet Explorer 7.

För den som gör speciella printstilmallar så är webbläsarnas egna regler för vad som ska visas lite irriterande. Som flera tidigare har påpekat borde den bästa lösningen vara att webbläsarna litar på att de som har specificerat media="print" vet var de gör. En stilmall specificerad för ett speciellt medium borde alltid ha företräde framför webbläsarnas egna räddningsförsök (men givetvis stå tillbaka för en lika specifik användarstilmall).

Tidigare har jag använt PHP-biblioteket JpGraph i några olika projekt för att skapa grafer av olika slag. Det är dock inte alltid praktiskt att generera bilder för att visa statistik, så jag har lekt lite med css för att se om det inte går att hitta alternativa metoder.

Med utgångspunkt i Eric Meyers vertical bargraphs har jag försökt ta fram en lite snyggare och enklare variant. Målsättningan var att skapa stapeldiagram från semantiskt korrekt html med ett minimum av extra element, utan för komplicerad css som enkelt skulle kunna genereras dynamiskt och fungera i alla moderna webbläsare utan några css-hacks.

Eftar att ha provat med både tabeller och listor så fastnade jag till slut för definition lists som den enklaste metoden för att märka upp datan. Det finns många åsikter om hur definition lists ska användas, själv hör jag till den grupp som menar att man med fördel kan användas dem att koppla ihop nyckel-/värde-par. Tabeller skulle varit mer korrekt, men de kräver för mycket extra stilregler för olika webbläsare för att vara praktiskt i längden.

Det finns några saker med exemplet som inte fungerar så bra. Den extra koden som krävs för att sätta ut axelmarkeringarna är antagligen ganska förvirrande för besökare utan stöd för stilmallar. Möjliga lösningar är att använda sig av en bakgrundsbild (svårare att generera dynamiskt) eller att lägga in en beskrivande rubrik som förklarar vad siffrorna betyder (innebär ännu mer kod). Dd-elementet innehåller ett span-element som kan tas bort om man inte behöver bakgrundsskuggan överst och till höger.

Har testat exemplet i IE7, IE6 och Firefox 2 på Windows XP samt i Safari 2 och Firefox 2 på Mac OSX.

Hör av dig om du har förslag på förbättringar eller har egna exempel på lösningar.

Här är mitt exempel.