Websites met stijl
36. Multi-column layout
De hoofdstukken na hoofdstuk 34 bevatten nieuwe artikelen over allerlei onderwerpen.
Dit is het tweede artikel.
In dit hoofdstuk
Inleiding
figuur 1: een (te) brede tekst
De massamoordenaar
Als je een maand geleden tegen hem gezegd had dat hij een moordenaar zou worden, zou hij je niet geloofd hebben;
hij die nog geen vlieg kwaad deed, die altijd rustig was, nooit kwaad werd, die zich gemakkelijk schikte in wat anderen wilden of vonden.
Anderen vonden hem aardig, innemend, een tikje verlegen, misschien wel saai.
En dat hij zich schikte in wat anderen wilden of vonden kwam misschien wel omdat hij bang was om niet aardig gevonden te worden.
Maar daarnet had hij zijn derde moord gepleegd, binnen een week na de eerste. En hij had er geen moment spijt van.
Integendeel, hij keek er tevreden op terug.
Het leek wel of hij er energieker van werd, bedacht hij.
En dat kwam allemaal omdat hij getergd was, niet gewoon getergd, maar getergd tot het uiterste, tot méér dan het uiterste.
Toen was er iets in hem geknapt.
Het was begonnen met die ene mug. Dat was geen gewone mug, maar een bloeddorstig monster.
Een gewone mug is vervelend, hij zoemt om je heen en kan na een beet wat jeuk verooorzaken.
Maar deze mug was anders - fel en vasthoudend, altijd om je heen, dag en nacht. De terger had hij hem genoemd.
En op de zesde dag had hij besloten hem te vermoorden.
Op brede schermen worden tekstregels vaak ongemakkelijk lang.
De tekst 'De massamoordenaar' in figuur 1 is (op brede schermen) 900px breed, en dat is al aan de brede kant om de tekst confortabel te lezen.
Het is dan handig om de tekst over een aantal kolommen te verdelen, zoals in kranten.
Vanaf css3 zijn er een aantal eigenschappen toegevoegd om gemakkelijk kolommen te maken. In dit hoofdstuk zullen ze worden besproken, steeds aan de hand van het artikel van figuur 1.
De eigenschappen bij elkaar worden in het engels aangeduid als multi-column layout
Column-width
De tekst van figuur 1 bestaat uit een h4-kop 'De massamoordenaar', met daarna een article met tekst.
In figuur 2 is in het stijlblad column-width, één van de nieuwe eigenschappen, gebruikt
om article een maximale kolombreeedte te geven (hier van 250px):
article {column-width: 250px};.
figuur 2: als figuur 1 + article {column-width: 250px;}
De massamoordenaar
Als je een maand geleden tegen hem gezegd had dat hij een moordenaar zou worden, zou hij je niet geloofd hebben;
hij die nog geen vlieg kwaad deed, die altijd rustig was, nooit kwaad werd, die zich gemakkelijk schikte in wat anderen wilden of vonden.
Anderen vonden hem aardig, innemend, een tikje verlegen, misschien wel saai.
En dat hij zich schikte in wat anderen wilden of vonden kwam misschien wel omdat hij bang was om niet aardig gevonden te worden.
Maar daarnet had hij zijn derde moord gepleegd, binnen een week na de eerste. En hij had er geen moment spijt van.
Integendeel, hij keek er tevreden op terug.
Het leek wel of hij er energieker van werd, bedacht hij.
En dat kwam allemaal omdat hij getergd was, niet gewoon getergd, maar getergd tot het uiterste, tot méér dan het uiterste.
Toen was er iets in hem geknapt.
Het was begonnen met die ene mug. Dat was geen gewone mug, maar een bloeddorstig monster.
Een gewone mug is vervelend, hij zoemt om je heen en kan na een beet wat jeuk verooorzaken.
Maar deze mug was anders - fel en vasthoudend, altijd om je heen, dag en nacht. De terger had hij hem genoemd.
En op de zesde dag had hij besloten hem te vermoorden.
Maak het browservenster breder en smaller en zie hoe het aantal kolommen verandert.
Column-count
Met de eigenschap column-count geef je het aantal kolommen op.
In figuur 3 is dat aantal op 3 gezet: article {column-count: 3;}.
figuur 3: als figuur 1 + article {column-count: 3;}
De massamoordenaar
Als je een maand geleden tegen hem gezegd had dat hij een moordenaar zou worden, zou hij je niet geloofd hebben;
hij die nog geen vlieg kwaad deed, die altijd rustig was, nooit kwaad werd, die zich gemakkelijk schikte in wat anderen wilden of vonden.
Anderen vonden hem aardig, innemend, een tikje verlegen, misschien wel saai.
En dat hij zich schikte in wat anderen wilden of vonden kwam misschien wel omdat hij bang was om niet aardig gevonden te worden.
Maar daarnet had hij zijn derde moord gepleegd, binnen een week na de eerste. En hij had er geen moment spijt van.
Integendeel, hij keek er tevreden op terug.
Het leek wel of hij er energieker van werd, bedacht hij.
En dat kwam allemaal omdat hij getergd was, niet gewoon getergd, maar getergd tot het uiterste, tot méér dan het uiterste.
Toen was er iets in hem geknapt.
Het was begonnen met die ene mug. Dat was geen gewone mug, maar een bloeddorstig monster.
Een gewone mug is vervelend, hij zoemt om je heen en kan na een beet wat jeuk verooorzaken.
Maar deze mug was anders - fel en vasthoudend, altijd om je heen, dag en nacht. De terger had hij hem genoemd.
En op de zesde dag had hij besloten hem te vermoorden.
Maak het browservenster breder en smaller en vergelijk figuur 3 met figuur 2. Bij figuur 3 blijven er steeds 3 kolommen, bij figuur 2 worden het er 2 of 1 als het venster te smal wordt.
De methode met de kolombreeedte is flexibeler.
Column-gap
Met de eigenschap column-gap kan de breedte tussen de kolommen worden ingesteld.
In figuur 4 is die tussenruimte op 50px gezet.
Daarnaast heb ik met de eigenschap text-align: justify de kolommen uitgevuld, zodat ze een strakke rechter kantlijn hebben.
figuur 4: als figuur 2 + article {column-gap: 50px; text-align: justify;}
De massamoordenaar
Als je een maand geleden tegen hem gezegd had dat hij een moordenaar zou worden, zou hij je niet geloofd hebben;
hij die nog geen vlieg kwaad deed, die altijd rustig was, nooit kwaad werd, die zich gemakkelijk schikte in wat anderen wilden of vonden.
Anderen vonden hem aardig, innemend, een tikje verlegen, misschien wel saai.
En dat hij zich schikte in wat anderen wilden of vonden kwam misschien wel omdat hij bang was om niet aardig gevonden te worden.
Maar daarnet had hij zijn derde moord gepleegd, binnen een week na de eerste. En hij had er geen moment spijt van.
Integendeel, hij keek er tevreden op terug.
Het leek wel of hij er energieker van werd, bedacht hij.
En dat kwam allemaal omdat hij getergd was, niet gewoon getergd, maar getergd tot het uiterste, tot méér dan het uiterste.
Toen was er iets in hem geknapt.
Het was begonnen met die ene mug. Dat was geen gewone mug, maar een bloeddorstig monster.
Een gewone mug is vervelend, hij zoemt om je heen en kan na een beet wat jeuk verooorzaken.
Maar deze mug was anders - fel en vasthoudend, altijd om je heen, dag en nacht. De terger had hij hem genoemd.
En op de zesde dag had hij besloten hem te vermoorden.
Column-rule
Met de eigenschap column-rule kan een lijn tussen de kolommen worden gezet.
Je geeft de lijn net zo op als de border: column-rule: lijnbreedte, stijl, kleur;.
In figuur 5 is met article {column-rule: 1px, solid}; zo'n lijn gezet. Omdat de kleur niet is opgegeven, krijgt de lijn dezelfde kleur als de tekst.
figuur 5: als figuur 4 + article {column-rule: 1px solid;}
De massamoordenaar
Als je een maand geleden tegen hem gezegd had dat hij een moordenaar zou worden, zou hij je niet geloofd hebben;
hij die nog geen vlieg kwaad deed, die altijd rustig was, nooit kwaad werd, die zich gemakkelijk schikte in wat anderen wilden of vonden.
Anderen vonden hem aardig, innemend, een tikje verlegen, misschien wel saai.
En dat hij zich schikte in wat anderen wilden of vonden kwam misschien wel omdat hij bang was om niet aardig gevonden te worden.
Maar daarnet had hij zijn derde moord gepleegd, binnen een week na de eerste. En hij had er geen moment spijt van.
Integendeel, hij keek er tevreden op terug.
Het leek wel of hij er energieker van werd, bedacht hij.
En dat kwam allemaal omdat hij getergd was, niet gewoon getergd, maar getergd tot het uiterste, tot méér dan het uiterste.
Toen was er iets in hem geknapt.
Het was begonnen met die ene mug. Dat was geen gewone mug, maar een bloeddorstig monster.
Een gewone mug is vervelend, hij zoemt om je heen en kan na een beet wat jeuk verooorzaken.
Maar deze mug was anders - fel en vasthoudend, altijd om je heen, dag en nacht. De terger had hij hem genoemd.
En op de zesde dag had hij besloten hem te vermoorden.
Column-span
Bij de tekst over de massamoordenaar staat de kop buiten article. Dat is eigenlijk niet juist, omdat de kop tot het artikel behoort. Een artikel is immers één geheel, daar behoort de kop bij.
In figuur 6 is de kop binnen article geplaatst. Daardoor beslaat de kop nu maar één kolom.
figuur 6: als figuur 5, maar kop binnen het article;
De massamoordenaar
Als je een maand geleden tegen hem gezegd had dat hij een moordenaar zou worden, zou hij je niet geloofd hebben;
hij die nog geen vlieg kwaad deed, die altijd rustig was, nooit kwaad werd, die zich gemakkelijk schikte in wat anderen wilden of vonden.
Anderen vonden hem aardig, innemend, een tikje verlegen, misschien wel saai.
En dat hij zich schikte in wat anderen wilden of vonden kwam misschien wel omdat hij bang was om niet aardig gevonden te worden.
Maar daarnet had hij zijn derde moord gepleegd, binnen een week na de eerste. En hij had er geen moment spijt van.
Integendeel, hij keek er tevreden op terug.
Het leek wel of hij er energieker van werd, bedacht hij.
En dat kwam allemaal omdat hij getergd was, niet gewoon getergd, maar getergd tot het uiterste, tot méér dan het uiterste.
Toen was er iets in hem geknapt.
Het was begonnen met die ene mug. Dat was geen gewone mug, maar een bloeddorstig monster.
Een gewone mug is vervelend, hij zoemt om je heen en kan na een beet wat jeuk verooorzaken.
Maar deze mug was anders - fel en vasthoudend, altijd om je heen, dag en nacht. De terger had hij hem genoemd.
En op de zesde dag had hij besloten hem te vermoorden.
Met de eigenschap column-span kan de kop over alle kolommen heen gezet worden.
De eigenschap kent twee waarden:
- all (waarbij de kop over alle kolommen heen staat), of
- none waarbij de kop één kolom beslaat;
Die laatste waarde is de standaard waarde, die ook geldt zonder
column-span.
In figuur 7 is de eigenschap h4 {column-span: all;} gebruikt.
figuur 7: als figuur 6 + h4 {column-span: all;}
De massamoordenaar
Als je een maand geleden tegen hem gezegd had dat hij een moordenaar zou worden, zou hij je niet geloofd hebben;
hij die nog geen vlieg kwaad deed, die altijd rustig was, nooit kwaad werd, die zich gemakkelijk schikte in wat anderen wilden of vonden.
Anderen vonden hem aardig, innemend, een tikje verlegen, misschien wel saai.
En dat hij zich schikte in wat anderen wilden of vonden kwam misschien wel omdat hij bang was om niet aardig gevonden te worden.
Maar daarnet had hij zijn derde moord gepleegd, binnen een week na de eerste. En hij had er geen moment spijt van.
Integendeel, hij keek er tevreden op terug.
Het leek wel of hij er energieker van werd, bedacht hij.
En dat kwam allemaal omdat hij getergd was, niet gewoon getergd, maar getergd tot het uiterste, tot méér dan het uiterste.
Toen was er iets in hem geknapt.
Het was begonnen met die ene mug. Dat was geen gewone mug, maar een bloeddorstig monster.
Een gewone mug is vervelend, hij zoemt om je heen en kan na een beet wat jeuk verooorzaken.
Maar deze mug was anders - fel en vasthoudend, altijd om je heen, dag en nacht. De terger had hij hem genoemd.
En op de zesde dag had hij besloten hem te vermoorden.
Opmerkingen:
- In Firefox werd tot voor kort (december 2019) de eigenschep column-span niet ondersteund.
Je zag dan geen verschil tussen figuur 7 en figuur 6. Sinds versie 71 ondersteunt ook Firefox deze eigenschap,
zoals de nieuwste versies van Chrome, Explorer/Edge, Safari en Opera.
Wil je rekening houden met mensen die nog een oudere versie van Firefox gebruiken, dan kan je het best column-span omzeilen door de kop buiten het element met de kolommen te houden.
- Het is niet mogelijk om de kop over bv. 2 kolommen te laten lopen. Het is of alles (all) of niets (none).
Vendor-prefixes
De column-eigenschappen zijn betrekkelijk nieuw en werden tot voor kort door de meeste browsers als experimenteel gezien.
In dat geval gebruiken de browser-fabrikanten een eigen vendor-prefix, ook wel browser-prefix genaamd,
om aan te geven dat de betreffende eigenschap nog voorlopig is. Na verloop van tijd laten de browsers die prefix vallen.
Zie de naslag over vendor-prefixes.
De browsers gebruiken de volgende vendor-prefixes:
- Chrome Safari, Opera gebruiken -webkit-
- Firefox gebruikt -moz-
- Explorer/Edge gebruikt -ms-.
.
Dat betekent dat nieuwe eigenschapen (zoals de column-eigenschappen) meestal als volgt moeten worden opgegeven:
- eerst de eigenschap voorafgegaan door de vendor-prefix (voor elke vendor-prefix apart);
- dan de eigenschap zonder vendor-prefix
De eigenschappen voor article zoals afgebeeld in figuur 4 zien er dan als volgt uit. (De uitleg staat in het commentaar)
Omdat Explorer/Edge voor de multi-column layout geen vendor-prefixes heeft gebruikt is de prefix met -ms- weggelaten.
figuur 8: de opmaak van article voor figuur 4
article {
/* eigenschap column-width ----- */
-webkit-column-width: 250px;/* voor oudere versies van Chrome, Safari, Opera */
-moz-column-width: 250px;/* voor Firefox */
column-width: 250px;/* voor browser(-versies) die de eigenschap volledig ondersteunen */
/* eigenschap column-gap ------ */
-webkit-column-gap: 50px;/* voor oudere versies van Chrome, Safari, Opera */
-moz-column-gap: 50px;/* voor Firefox */
column-gap: 50px;/* voor browser(-versies) die de eigenschap volledig ondersteunen */
/* eigenschap column-rule ----- */
-webkit-column-rule: 1px solid;/* voor oudere versies van Chrome, Safari, Opera */
-moz-column-rule: 1px solid;/* voor Firefox */
column-rule: 1px solid;/* voor browser(-versies) die de eigenschap volledig ondersteunen */
/* eigenschap justify --------- */
text-align: justify;/* justify is al een oudere eigenschap - geen vendor-prefix nodig */
}