Websites zouden printbaar moeten zijn

Ik lees tegenwoordig veel geprinte artikelen. Hoewel ik net zo graag op een laptop lees als ieder ander, raak ik meer betrokken bij de stof wanneer ik een geprint document kan voorzien van aantekeningen. Bovendien geeft het zitten bij een whiteboard met een geprint document me het gevoel dat ik echt iets belangrijks aan het doen ben. Daarom ben ik gaan nadenken over de beste manier om anderen deze ervaring te bieden voor de teksten die ik schrijf.

Gelukkig was printbare content een tijd geleden een belangrijk focuspunt binnen webdesign. Je kunt elke gewenste webpagina printen door op CTRL-P te drukken, in de hoop dat je printerdriver die dag meewerkt.

Ik heb dit getest op mijn eigen webpagina, in de onbezonnen veronderstelling dat ik zonder extra inspanning een redelijk printresultaat zou krijgen. Dat was niet het geval. Hoewel de inhoud wel zichtbaar was, was de tekst ongeveer twee niveaus te groot, zag de header er verschrikkelijk uit en waren mijn links in zwart-wit onleesbaar grijs. Volledig onacceptabel.

Zaken printbaar maken

Gelukkig heeft de webcommunity, zoals eerder genoemd, veel aandacht besteed aan het printen van documenten vanuit HTML-pagina's. CSS beschikt over selectors waarmee specifiek de geprinte inhoud kan worden gestyled, en deze kunnen zeer nuttig zijn. Hier is het CSS-fragment dat ik nu voor deze pagina gebruik:

.onlyPrint {
  display: none;
}

@media print {
  .noPrint {
    display: none;
  }
  .onlyPrint {
    display: inline;
  }
  p,
  ol {
    font-size: 12pt;
  }
  h3, h4 {
    font-size: 13pt;
  }
  h2 {
    font-size: 14pt;
  }
  h1 {
    font-size: 16pt;
  }
  .giallo {
    border: 3px solid black;
  }
  .giallo-l {
    font-size: 11pt;
  }
  a {
    color: black !important;
  }
}

Je kunt het effect van dit fragment zien door op CTRL-P of de printknop op deze pagina te drukken. Dit zijn de functies die dit fragment voor mij vervult, in volgorde:

• onlyPrint: Deze klasse kan worden toegevoegd aan elementen die alleen in het geprinte document zichtbaar mogen zijn. Op dit moment gebruik ik dit om een kleine vermelding van de auteur aan de ondertitel toe te voegen.
• noPrint: Deze wordt gebruikt om zaken van de geprinte website te verwijderen. Ik heb dit toegepast op de header, omdat deze in geprint formaat simpelweg heel lelijk is.
• Lettergrootte: Het aanpassen van lettergroottes voor print is essentieel. De variabel schaalbare tekst die ik op mijn website gebruik, ziet er op een geprinte pagina verschrikkelijk uit. 12pt is een algemeen geaccepteerde maat, dus dat heb ik aangehouden. Voor de koppen is een iets grotere maat logisch.
• .giallo aanpassingen: Deze zijn bedoeld voor codeblokken. Eerlijk gezegd blijven codeblokken het lelijkste onderdeel, zelfs na deze aanpassingen. Ze hebben de neiging om als één groot blok te verschijnen en breken niet over paginaranden. Mocht iemand hiervoor een oplossing hebben, dan hoor ik dat graag.
• Links: Blauwe links zien er in grijstinten niet uit. Het is daarom beter om ze dezelfde kleur te geven als de rest van de tekst.

Voel je vrij om deze CSS-code te gebruiken; ik ben er niet beschermend over. Persoonlijk zou ik het geweldig vinden als meer webpagina's nadenken over hoe printen werkt.

Waarom je dit zou moeten doen

Nu ik mijn website op deze manier heb geoptimaliseerd, heb ik begrip voor degenen die printen geen prioriteit geven. Het uitzoeken van welke elementen verborgen of getoond moeten worden, kostte me een aanzienlijk deel van mijn ochtend, en mijn site is niet eens erg complex. Bovendien betwijfel ik hoeveel mensen tegenwoordig nog regelmatig webpagina's uitprinten. Misschien ben ik de enige.

Toch is het, als je website hoofdzakelijk uit tekst bestaat, nooit een slecht idee om mensen de mogelijkheid te bieden die tekst in hun favoriete medium te ervaren. Het digitale medium biedt veel flexibiliteit. De weg naar goede software wordt geplaveid met kleine vriendelijkheden van software engineers naar hun gebruikers. Misschien vindt iemand een dag later deze vriendelijkheid en glimlacht hij of zij, al is het maar voor een vluchtig moment. En dat maakt het waardevol.