Krantenkolommen maken is lastiger dan het lijkt. Het liefst wil je de inhoud automatisch evenredig verdelen over twee kolommen, zodat je daar bij het schrijven geen omkijken naar hebt. En in de moderne "strict mode" heeft de tekst in kolommen meer marge dan vroeger, zodat rechttoe rechtaan kolommen gebruiken hiermee lastig is geworden.

Nu zien kolommen er op grotere beeldschermen, zoals ze tegenwoordig steeds meer gebruikt worden, goed uit. Ik zou dus graag een oplossing willen, die eenvoudig in gebruik is, en waarbij bij grotere beeldschermen doorlopende krantenkolommen worden gebruikt en bij kleinere beeldschermen niet. Meer mensen willen krantenkolommen, dus is er een CSS3 "multi-column layout module" en was er ook wel een "column script". Ik wou echter een oplossing die precies doet wat ik wil.

Dus heb ik zelf een toepassing geschreven die dit mogelijk maakt en die makkelijk in een CMS kan worden ingebouwd. Deze pagina gebruikt het. Als er meer dan 600 pixels ruimte is wordt de tekst over twee kolommen verdeeld. Maak de pagina smaller en breder om het effect te zien. Het ziet er vooral goed uit als je afbeeldingen mee laten schalen. Onder 'klimmen' staat hiervan een voorbeeld.

Een mogelijke aanvulling is het veranderen van de onderlinge afstand van de paragrafen, zodat de regels mooi lijnen. Die afstand moet je dan op nul zetten of gelijk maken aan de regelhoogte.

Omdat Joomla je wel intro's in kolommen laat weergeven, maar links niet, gebruik ik deze oplossing nu ook voor de links onderaan de secties. Als er veel links zijn, maakt dat de weergave overzichtelijker. Een en ander vereiste wel wat volharding door de positionele bugs van de oude versies van Internet Explorer. Zo kostte het debuggen van een kleine 'hasLayout' bug, die in mijn lokale installatie niet, en live wel, optrad veel tijd.

Update

Ter oefening heb ik 'npcolumn' herschreven en er een jQuery plugin van gemaakt. De toepassing kun je downloaden op GitHub.

Update 2

Er kan steeds meer via CSS. Dus heb ik eens geprobeerd de kolommen indien mogelijk via CSS te maken. Met behulp van Modernizr ga ik dan na of krantenkolommen ondersteund worden door een browser. Zo ja, gaat alles via CSS. Lastig is hierbij de controle over het bij elkaar houden van tekst.

Ik gebruik de nieuwe methode als test in het klimwoordenboek en sinds kort ook op deze site zelf. Daarbij is het van belang om van de schaalbare plaatjes de aspectratio kenbaar te maken via een trucje. Dit kan op dezelfde manier als met schaalbare video via een wrapper met hoogte nul en een bottom-margin met een percentage. Een beetje voetenwerk om het in alle browsers goed te krijgen was nodig, maar het kan de concurrentie aan met de eerder genoemde javascript-oplossing, die nu als fall-back wordt gebruik.