css-3Blog

Hogy egy kicsit elrugaszkodjunk a grafikai megoldásoktól, találtam valamit, ami inkább a szöveges tartalom prezentálására koncentrál. A CSS 3 tartalmaz egy lehetőséget, amivel beállítható, hogy egy szöveg hány oszlopba tördelve jelenjen meg. Kicsit olyan, mint a Word többhasábos beállítási lehetősége.

Hogy pontosabban értsük, itt egy példa, ami Firefox, Chrome és Safari alatt működik. De mire is jó ez? Manapság a legtöbb monitor inkább széles, mint magas. Viszont a weboldalak pont ellenkezőleg, inkább hosszúak, mint szélesek, ezért viszonylag sok hely marad kihasználatlanul. Persze tudom, hogy fontos a whitespace, de sokszor tényleg fölöslegesen sok hely marad. Egyszerűen azért, mert azt a szabályt is be akarjuk tartani, hogy a tartalom sorai bizonyos hosszt ne lépjenek túl. Ha figyelembe vesszük az olvasói szokásokat, nem mindegy, hogy mennyi tartalom tud a címlap rögtön látható részére kerülni. Az olvasók egy része hamarabb tovább áll, mielőtt lejjebb görgetne. Persze a túl sok és sűrű szöveg ijesztő, úgyhogy a több hasáb is csak mértékkel, és a megfelelő mennyiségű whitespace-szel együtt javasolt.

A CSS 3 többoszlopos formázási lehetőségeivel a szöveget tetszőleges számú, szélességű és távolságú hasábra lehet tördelni. Elsőre nem biztos, hogy világos ennek a jelentősége, hiszen most is készíthetünk akárhány div-et, és a szöveget elosztogathatjuk köztük. Vagy használhatjuk a következő beállítást:

p {
display: inline;
width: 200px;
}

De az első megoldással az a gond, hogy a dinamikus tartalmakról, különösen az adatbázisból származókról, szinte semmit nem feltételezhetünk előre. Lehet, hogy jól fog kinézni a szöveg, de lehet, hogy túl rövid vagy túl hosszú, megbontva ezzel a vizuális egyensúlyt. A második megoldás sem jobb, mert a bekezdések egymás mellett fognak sorakozni, így az első hasáb első bekezdése után a második hasáb első bekezdése következik, majd a harmadik hasábé, stb. És csak ha már elfogyott a vízszintes terület, mehetünk vissza folytatni az első hasáb olvasását.

A CSS-3 a column-width, a column-count, a column-rule, a column-rule-width és még több más, column előtagú beállítási lehetőséggel segít a probléma megoldásában. Mind a WebKit-ben, mind a Gecko-ban egyelőre csak kísérleti lehetőségként szerepel ez a formázás, de hellyel-közel működik. Az utasítások és a paraméterek ugyanazok, de használni kell a -webkit és a -moz előtagokat. A példában látott eredményt a következő beállítással kapjuk:

body {
    -webkit-column-count: 5;
    -webkit-column-width: 200px;
    -webkit-column-rule: dotted;
    -webkit-column-rule-width: thin;
    -moz-column-count: 5;
    -moz-column-width: 200px;
    -moz-column-rule: dotted;
    -moz-column-rule-width: thin;
}

A Firefox, legalábbis a 3.5, fontosabbnak tartja hogy az 5 oszlop betöltse a teljes body területet, mint azt, hogy egy oszlop 200 pixel széles legyen, de ez a szépséghiba feltételezhetően orvosolható ha az egészet egy fix szélességű div-be helyezzük. Ezt leszámítva működik, és szerintem egész ízléses eredmény mutat, persze nem így, hanem megfelelő módon az adott weboldal stílusához formázva.