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. Het werkt met MooTools vanaf versie 1.11 en kan makkelijk in een CMS 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. De toepassing kun je hier downloaden: npcolumn.
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.
Het gebruik van de oude versie 1.11 van MooTools was trouwens een serieuze tekortkoming van Joomla. Npcolumn werkt met de oude èn met nieuwere versies, maar andere JavaScript-toepassingen zijn minder vergevingsgezind. Zo werkte LightBox 2.04 niet goed samen met Joomla door de oude MooTools versie. Gelukkig is dit in Joomla versie 1.5.19 verholpen en kun je nu Mootools 1.2.4 gebruiken.
Update
Omdat Joomla je wel intro's in kolommen laat weergeven, maar links niet, gebruik ik deze oplossing ik nu ook voor de links onderaan de secties. Als er veel links zijn, maakt dat de weergave overzichtelijker. Omdat het jammer was je dat dit moois eerst niet zien kon in Internet Explorer 7 en 6, heb ik het programmaatje herschreven. Door gebruik van DIV's kunnen foto's nu goed geschaald worden in IE 7&6. Bijkomstig voordeel was dat het maken van dit programma me leerde hoe ik een mooi schalende foto op de voorpagina van mijn site kon zetten. Een en ander vereiste wel wat volharding door de positionele bugs van de oude versies van Internet Explorer. De toepassing zelf was snel geschreven, maar het debuggen van een kleine 'hasLayout' bug, die in mijn lokale installatie niet, en live wel, optrad kostte veel tijd. Voor een goede werking met Joomla moest ik een klein stukje code in de template voegen.
<!--[if lte IE 7.0]>
<style type="text/css">
#ja-footerwrap{display: inline-block;}
</style>
<![endif]-->