Dit document poogt een illustratie te geven van het toepassen van de stellingen van Kapr in internet-ontwerp. Het gaat hierbij om het toepassen van de stellingen van Kapr in scrollable media voor de weergave op beeldschermen in tegenstelling tot de meer traditionele gepagineerde media die van papier gebruik maken.
Deze tweede versie is gemaakt aan de hand van de stellingen. Discussie naar aanleiding van dit document dient plaats te vinden in nl.internet.www.ontwerp.
Net zoals de HTML specs in het midden laten of makers van browsers of schrijvers van HTML zich ergens iets van moeten aantrekken laat dit document in het midden of de conclusies die uit dit document kunnen worden getrokken gebruikt moeten worden in author- of user-stylesheets.
Deze stellingen zijn overgenomen uit de "101 stellingen over de vorm van het boek" van Albert Kapr, De Buitenkant, Amsterdam, 1992 (ISBN 90 70386 37 2).
Stellingen die niet van belang zijn voor het publiceren op beeldschermen, zoals bijvoorbeeld het rekening houden met de vezelrichting van het papier, zijn weggelaten. Eveneens weggelaten zijn stellingen die alleen op gepagineerde media van toepassing zijn.
Het document heeft drie taken:
Voor HTML geldt in principe dat de intenties van de auteur het enige item is dat overgebracht wordt. Het aan de lezer aanpassen en het er goed uit zien zou bij HTML grotendeels aan de lezer zelf overgelaten moeten worden. De auteur van de HTML moet alleen zorgen dat de lezer niet wordt beperkt in het aanpassen. De intenties van de auteur moeten dus geheel in de betekenis van de tekst en de structuur van de HTML liggen, omdat er geen ondersteuning van andere middelen (papiersoort, druktechniek, hardcover enz.) gebruikt kan worden.
De bedoelingen en de doelgroep moeten bekend zijn.
Dit geldt voor HTML dus ook alleen voor het overbrengen van de intenties van de auteur. Omdat de lezer controle heeft over de presentatie is de doelgroep niet door de door de auteur gekozen presentatie beperkt.
Het formaat van een web-pagina wordt bepaald door de grootte van het venster van de browser waarin de inhoud wordt gepresenteerd. Als de inhoud niet in één keer in dit venster kan worden gepresenteerd is het mogelijk de rest zichtbaar te maken door te scrollen. Het (horizontale) scrollen wordt beperkt door word-wrapping toe te passen, wat de tekst niet breder maakt dan het venster.
De breedte van een pagina is 80-100 mm voor 9 of 10 punts letter. De hoogte wordt bepaald door de gulden snede.
De hoogte van een web-pagina is niet van belang. De breedte wordt bepaald door het gebruik van het beeldscherm. Er van uitgaande dat het beeldscherm in de eerste plaats is ontworpen om iets goed weer te geven zal het over het algemeen wel goed zitten met het formaat.
De breedte van een pagina kan vergroot worden voor brede tabellen en/of formules.
Brede tabellen kunnen toch getoond worden door horizontaal te scrollen. Een nadeel van dit scrollen is dat het overzicht verloren gaat. Voor tabellen die zo groot zijn dat er gescrollt moet worden zou er dan beter gebruik kunnen worden gemaakt van een systeem waarbij de horizontale en verticale tabelkoppen in beeld blijven.
Het doel van een tabel is echter het op overzichtelijke wijze presenteren van gegevens. Als het presenteren juist door het gebruik van een tabel niet meer overzichtelijk kan gebeuren kan er beter geen tabel worden gebruikt.
Stelling 4 geldt ook voor afbeeldingen.
Afbeeldingen zouden geschaald kunnen worden naar een passende breedte, maar voor een kwalitatief voldoende resultaat zijn de huidige browsers niet voldoende.
Het papier van het boek wordt vervangen door de presentatie op een beeldscherm. Het enige wat dan overblijft is het eventuele kleurgebruik. Alle andere eigenschappen zijn gevat in de hardware van het beeldscherm en kunnen niet beïnvloed worden door auteur of lezer.
Voor een goede leesbaarheid moeten de kleuren van de tekst en de achtergrond goed op elkaar worden afgestemd. Vaak wordt dit gerealiseerd door een donkere tekst op een lichte achtergrond. De achtergrond moet echter niet zo licht worden gekozen dat dit de leesbaarheid verslechtert. Voor het gebruik van tekst op beeldschermen zal dit minder van invloed zijn omdat de felheid van een beeldscherm begrenst is tot aanvaardbare waarden.
Wellicht zijn geheel afwijkende kleurcombinaties ook goed of zelfs beter voor de weergave op beeldschermen. Te denken valt aan amber op zwart of andere voor beeldschermen vaak gebruikte combinaties.
Het kiezen van de juiste kleuren kan het beste aan de lezer worden overgelaten omdat die de kleuren kan kiezen die voor hem op zijn systeem het beste resultaat geven. Dit houdt echter wel in dat kleurgebruik in de tekst door de auteur beperkt moet worden omdat er anders gemakkelijk conflicten met de instellingen van de lezer kunnen optreden. Omdat zelfs geen aannamen kunnen worden gedaan over een lichte of juist donkere achtergrond is het gebruik van kleuren in de tekst naast de reguliere tekst en het anchor-trio niet aan te raden.
Een warmere toon (crème) is beter dan sneeuwwit.
De achtergrond kan beter niet sneeuwwit worden gekozen. De monitor heeft echter niet de intensiteit om hinderlijk wit weer te geven.
De letter die het beste gebruikt kan worden is afhankelijk van de mogelijkheden van het beeldscherm en het operating system en daarom moet de auteur de keuze van de letter zeker aan de lezer overlaten. Dit geldt zowel voor font als grootte.
De letter is het belangrijkste element.
De grootte is een compromis tussen overzicht over meerdere letters en zichtbaarheid. Om een tekst goed te kunnen lezen moeten er voldoende letters in één keer goed gezien kunnen worden. Bij te grote letters worden er te weinig letters in één keer gezien, bij te kleine letters worden de letters niet goed gezien.
Voor bepaalde doelgroepen (bijvoorbeeld kinderen) grotere letters gebruiken.
Kapitalen en halfvet niet in de tekst gebruiken.
In usenet worden kapitalen ook niet gewaardeerd.
Het font moet afgestemd zijn op de inhoud van de tekst.
Dit bevindt zich op de grens van markup en lay-out. Het gebruik van verschillende fonts in HTML moet dan ook meer gezien worden als structuur dan als lay-out.
De regellengte wordt bepaald door de breedte van het browser-venster. Omdat dit op het beeldscherm wordt weergegeven zal de breedte (door word-wrapping) niet snel te groot worden.
De breedte is 80-100 mm voor 9 of 10 punts letter.
Alleen bij het gebruik van een zeer grote (breedbeeld) monitor die eigenlijk voor grafische toepassing is ontworpen kan het voorkomen dat teksten te breed worden weergegeven. Eventueel kan er een maximum aan de tekstbreedte worden gesteld door middel van CSS2, maar waarschijnlijk heeft de lezer het venster dan toch minder breed staan.
De breedte van de tekst is maximaal 126 mm.
Bij een grotere regellengte kan de regel niet meer in zijn geheel worden overzien door bewegingen van het oog en moet ook het hoofd worden bewogen om de hele regel te zien. Ideaal is 50-60 aanslagen per regel.
In het algemeen is een beeldscherm niet zo breed dat dit element een rol gaat spelen.
Bij een brede pagina (door het gebruik van brede afbeeldingen of tabellen) moeten meerdere kolommen gebruikt worden.
Het is bij web-pagina's geen probleem om de breedte die nodig is voor brede elementen gewoon niet te gebruiken en de tekst dus gewoon minder breed dan die elementen te houden. Bij een boek zou dan door 1 brede tabel veel papier ongebruikt worden gelaten.
Het (horizontaal) uitvullen van tekst zorgt ervoor dat de tekst aan twee kanten een strakke lijn tegen de marges vormt.
Een spatie is 1/3 vierkant.
De spaties moeten niet te groot worden door het uitvullen.
Om de tekst op een regel door het uitvullen niet merkbaar te laten uitrekken is het nodig dat er voldoende afbreekmogelijkheden in de tekst worden opgenomen. Browsers zouden dit zelf kunnen bepalen voor de woorden die ze kennen, maar voor onbekende (lange) woorden moet de auteur aangeven waar een woord eventueel kan worden afgebroken. Dit zou moeten kunnen met soft hyphens.
Wordt gebruikt bij smalle tekst met veel afbrekingen.
Dit zou inhouden dat er een kritieke grens in een CSS moet worden opgenomen die aangeeft wanneer er moet worden overgegaan van onuitgevuld naar uitgevuld zetsel. Die grens kan het aandeel afbrekingen zijn of een breedte van de tekst in aantal tekens. Wordt de tekst dan in een smal venster gelezen wordt het als onuitgevuld zetsel gepresenteerd terwijl het in een breed venster toch uitgevuld wordt.
Bij 10 punts wordt 2 punten interlinie gebruikt. Eventueel 1 of 3 punten, afhankelijk van de marge (harmonisch wit).
Het gaat hierbij om onderscheidingen in een doorlezende tekst, bijvoorbeeld aangegeven door <em> of <strong> tags.
In de eerste plaats onderscheiden door cursief.
Daarna onderscheiden door klein kapitaal.
Daarna onderscheiden door halfvet.
Halfvet is niet goed realiseerbaar door de relatief lage resoluties van beeldschermen.
De rest wordt afgeraden voor het aanbrengen van onderscheidingen in doorlezende tekst.
Ook spatiëren wordt afgeraden voor het aanbrengen van onderscheidingen in doorlezende tekst.
De titelregels worden in HTML aangegeven door de <HN> (N=1..6) tags.
Titelregels worden geaccentueerd door wit. Voor het onderscheid van verschillende niveaus worden cursief, halfvet, gespatieerd of gelijkgesteld en lettergrootte gebruikt.
Bij het veelvuldig voorkomen van headings in een document moet er een nummering worden aangebracht om de hiërarchie aan te geven.
De headings moeten zo hoog zijn als een geheel aantal regels, zodat tegenoverliggende bladzijden de regels op gelijke hoogte houden.
In web-pagina's zijn er in het algemeen geen tegenoverliggende bladzijden. Wellicht is het voor het verticaal scrollen handig om toch een hoogte van een geheel aantal regels te gebruiken voor verschillende elementen.
Headings worden symmetrisch of asymmetrisch geplaatst.
In boeken is kleur in tegenstelling tot op web-pagina's een belangrijke kostenfactor, daarom geeft Kapr weinig uitsluitsel over kleurgebruik.
Een eventuele steunkleur moet in harmonie met de rest zijn.
Het is gebruikelijk om alinea's te scheiden door witruimte. De manier waarop web-browsers dit standaard doen is het invoegen van een witregel. In boeken wordt de witruimte beperkt tot een inspringing van de eerste regel van een alinea. Deze discrepantie wordt ook al beschreven in hoofdstuk 9.3.5 van de HTML 4.0 specificatie.
Met CSS is de standaard manier van de web-browser weer terug te draaien door het volgende in de CSS definitie op te nemen: P { margin-top: 0; text-indent: 3ex }
Dit houdt in dat de eerste regel na een <p> tag een inspringing krijgt met een lengte van drie maal de hoogte van de letter "x" in het gebruikte lettertype. De waarde drie kan afwijkend zijn om de inspringing in overeenstemming te brengen met het andere witgebruik en de regellengte.
Door na koppen geen <p> tag te gebruiken wordt dan ook voldaan aan de regel dat die inspringing na een kop niet nodig is omdat het verschil tussen kop en alinea al aangeeft dat er een nieuwe alinea begint. Omdat het in HTML echter ook mogelijk is dat er na een heading iets anders dan een alinea komt (?) is het voor de structuur beter om na een heading toch een <p> te plaatsen. Deze kan dan van een class zijn die een text-indent 0 heeft. In CSS2 zou het ook mogelijk kunnen zijn in deze alinea met een sequential selector (/HN~P/) de text-indent te onderdrukken.
Er wordt 1 vierkant ingesprongen bij een nieuwe alinea, zodat er geen misverstanden kunnen ontstaan als de laatste regel van de vorige alinea tegen de rechtermarge aanloopt.
De marges vormen een buffer tussen de tekst en de omgeving. In deze functie moeten ze ook worden gebruikt op web-pagina's. Zo kan de tekst op een pagina worden gelezen zonder dat men door de omgeving wordt afgeleid. Dit is vooral van belang als de pagina niet full-screen wordt bekeken en de omgeving dus uit andere elementen op het scherm bestaat. De lezer moet zelf bepalen in welke mate marges noodzakelijk zijn op zijn systeem.
Het nadeel van marges is dat het lijkt alsof een gedeelte van een (kostbaar) scherm niet gebruikt wordt en dat er minder informatie in één keer op het scherm kan worden getoond. Vooral bij notebooks die een (groot) beeldscherm hebben dat geen brede omlijsting heeft zal een marge nuttig zijn.
De zetspiegel moet in harmonie zijn met de regellengte.
De zetspiegel is afhankelijk van de functie van de tekst, maar minimaal 10 mm.
De zetspiegel moet harmoniëren met de rest.
De paginacijfers zijn niet van belang in web-pagina's. In plaats daarvan is er navigatie aangebracht. Wat voor paginacijfer geldt zou ook voor navigatie moeten gelden.
Aan de buitenkant of in het midden, door een witregel gescheiden van de tekst.
Makkelijk te vinden, maar niet afleidend.
Er mogen niet meer dan drie afbrekingen na elkaar komen.
Dit zou een browser in de gaten moeten kunnen houden. De vraag is echter hoe een eventueel optreden van deze situatie dan voorkomen moet worden. Waarschijnlijk is het beter om de tekst zo weer te geven dat de kans op meer dan drie afbrekingen na elkaar heel klein blijft.
In tabellen worden horizontale lijnen stompfijn aangeven. De verticale lijnen zijn meestal al duidelijk door de tekst in de tabel.
Illustraties moeten in harmonie zijn met de rest.
De inhoudsopgave komt na het voorwoord. Het voorwoord geeft de informatie die nodig is om de inhoudsopgave te lezen.
Het geheel moet harmonisch zijn.
Volgens de specificaties van CSS is het implementeren van de stellingen van Kapr mogelijk. Er zijn echter nog maar weinig browsers die CSS voldoende ondersteunen om een document ook daadwerkelijk aan de stellingen van Kapr te laten voldoen.
Dit document is geschreven in Word 6.0 en daarna naar HTML met CSS ondersteuning voor Netscape Navigator 4.06 omgezet. Er is ook een A4 PostScript versie beschikbaar.