Text do více sloupců a Firefox 1.5

Že vyšla nová verze Firefoxu, oblíbeného internetového prohlížeče, to už určitě víte. Píše se o tom všude (tady, tady, tady nebo třeba tady), oslavuje se a na počest ohnivé lišky byla dokonce složena alegorická báseň, vyjadřující obavy z reakce poťouchlé konkurence.

Firefox 1.5 však už ve své první betaverzi přinesl podporu tří zajímavých CSS3 vlastností, které zaujmou zejména typografy. Jedná se o vlastnosti column-width, column-count a column-gap (jejichž definice je už téměř pět let rozpracována zde), které umožňují formátování obsahu stránky do sloupců tak, že text (či vlastně libovolný obsah) může mezi sloupci volně přetékat. Počet sloupců navíc nemusí být konstantní, mohou se vykreslovat v závislosti na šířce okna prohlížeče. V nejbližší době se navíc chystá podpora vlastnosti column-rule, která má sloužit k vykreslení svislice mezi sloupci.

Syntaxe a hodnoty

Jelikož se jedná o experimentální implementaci, mají všechny zmiňované CSS vlastnosti před svým tělem prefix -moz-.

-moz-column-count

Vlastnost -moz-column-count označuje počet sloupců, do kterých bude obsah daného prvku rozdělen. Hodnotou vlastnosti může být libovolné celé číslo větší než nula či hodnota „auto“, která je zároveň výchozí. Nula a záporné hodnoty jsou vykresleny stejně, jako by hodnotou bylo číslo jedna. Počet sloupců je konstantní, není-li nastavena vlastnost -moz-column-width.

-moz-column-width

Vlastnost -moz-column-width řídí šířku jednoho sloupce. Hodnotou jí může být libovolné kladné reálné číslo s libovolnou v CSS deklarovanou rozměrovou jednotkou či výchozí hodnota „auto“. Je-li šířka určena procenty, vlastnost se vůbec neaplikuje.

Šířka sloupce není konstantní, hodnota určuje minimální šířku sloupce. Vzhledem k faktu, že sloupce vždy zabírají maximum dostupného horizontálního prostoru, se může stát, že šířka sloupce bude o něco větší, než je definovaná. Chcete-li mít sloupce za všech okolností stejně široké, musíte nadřazenému prvku nastavit konkrétní šířku.

Laicky řečeno: může nastat situace, kdy máte nastavenu vlastnost -moz-column-count na hodnotu 3 a zároveň -moz-column-width na hodnotu 150px.

div { -moz-column-count: 3; -moz-column-width: 150px; }

V takovém případě se při rozlišení 1024×768 vykreslí jeden sloupec něco přes 300px široký. Při zúžení okna prohlížeče se v jednom bodě počet sloupců redukuje na dva a následně na jeden. Bude to při rozměrech 450px a 300px.

Vyzkoušejte si to sami (nezapomeňte, že potřebujete Firefox 1.5).

-moz-column-gap

Vlastnost -moz-column-gap řídí vzdálenost mezi jednotlivými sloupci. Hodnotou jí mohou být všechna reálná čísla, zohledňuje tedy i záporné hodnoty. V takovém případě dochází k prolínání obsahu jednotlivých sloupců. Narozdíl od předchozí vlastnosti nemá nejmenší problém s použitím procent, konkrétní hodnotu počítá z šířky nadřazeného prvku.

Praxe

Když jsem si s těmito vlastnostmi hrál, bylo povětšinou vše v pořádku. Narazil jsem však na jednu nepříjemnou chybu. Mějme obalový box, kterému nastavíme formátování obsahu do několika sloupců a mezery mezi jednotlivými sloupci. Obsahem tohoto boxu bude další box, který v sobě bude mít spoustu textu a který bude mít nastaveno šedé pozadí. Mezi jednotlivými podbarvenými sloupci tak budou prosvítat bílé pruhy (za předpokladu, že dokument má bílé pozadí) o šířce nastavené hodnotou vlastnosti -moz-column-gap. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
      Sloupce textu
    </title>
    <style type="text/css">

        #dva_sloupce { -moz-column-count: 3; -moz-column-width: 150px; -moz-column-gap: 2%; }
        #dva_sloupce div { background-color: #eee; }

    </style>
  </head>
  <body>
        <div id="dva_sloupce">
                <div>
                    <p>Lorem ipsum ...</p>
                </div>
        </div>
  </body>
</html>

Ukázka zde.

Dosud je vše v pořádku. Ovšem každého napadne, že by bylo mnohem hezčí, kdyby pozadí tak těsně svými okraji nepřisedalo k textu. Plni očekávání tedy nastavíte padding a… zklamání. Při aplikaci paddingu na vnitřní element se odsazení projeví pouze na třech stranách, tou čtvrtou, haprující, je vrchní okraj. Vrchní odsazení se neaplikuje na druhý a všechny další sloupce. Dolní odsazení je zcela v pořádku. Je to nepříjemná chyba, která bude doufejme brzy odstraněna.

Ukázka chyby zde.

Využití

Nový Firefox si v prvních dnech stáhlo přes dva miliony uživatelů, není tedy zcela od věci se touto sic proprietární, avšak velice užitečnou vlastností vážně zabývat. Nabízí velice zajímavé možnosti formátování obsahu webové stránky, které mohou být na mnoha místech k nezaplacení už třeba jen z důvodu úspory místa (podívejte se například na přehled nálepek na rootu). Používá-li někdo jiný prohlížeč, obsah se zobrazí normálně v jednom sloupci.

2. 12. 2005, 17.53 | (X)HTML, CSS, Typografie, Prohlížeče.


54 komentářů k “Text do více sloupců a Firefox 1.5”

  1. Roj říká:

    2. Je to velice pekna hracka, bohuzel zatim spis hracka. Pochybuju, ze krome me si to nekdo troufne natvrdo prdnout na web. Ale mozna, kdyby to delalo vic lidi, donutilo by to vahajici zavrhnout IE, ale to je spis zbozne prani.

    2. 12. 2005 v 20.45

  2. Jakub Vrána říká:

    3. [1] Tohle je přesně vlastnost, které se v řadě případů není třeba bát, protože pokud ji prohlížeč nezná, tak se text jednoduše zobrazí ve sloupci jednom, což často ničemu nevadí. Např. na Rootu už je tato vlasnost použita už od uvedení nového designu a teď jako mávnutím proutku začala fungovat i ve FF.

    2. 12. 2005 v 21.22

  3. Anonymous říká:

    4. Já už dlouho uvažuji o tom, že toto rozdělení do soupců ala časopis bouchnu na svůj blog (o kterém taktéž už dlouho uvažuji :)), jenže ne pomocí této -moz metody, ale pěkně ručně – rozdělit si obsah na sloupce pomocí vlastnosti float.. Jenže.. Nechce se mi vymýšlet způsob, jak dělit psaný text rovnoměrně do těchto soupců.. Mno, myslím, že ještě nějakou dobu zůstanu u klasiky..

    2. 12. 2005 v 23.43

  4. Vojtěch Bulant říká:

    5. Omlouvám se, zapomněl jsem na podpis (anonymous jsem já).

    2. 12. 2005 v 23.44

  5. rony říká:

    6. [1] priklanam sa k nazoru [2], myslim, ze pouzitie netreba ani moc hladat ;-) isty potencial vidno aj v oblasti sporov co s nasimi obrovskymi displejmi pri zobrazovani uzkych 800px slizikov (resp. ich definitivnom pochovavani a formatovania webu trosku inak ako sadzbu A4koveho merkantilu)

    2. 12. 2005 v 23.44

  6. Roj říká:

    7. Panove, napadlo me uz i prakticke vyuziti. Do textu se takle da krasne prdnout obrazek sirky jako je sirka sloupce! To je konecne to, na co cekam. Exploderisti budou mit obrazek trapne uprostred sirokeho bloku, my hezky ve sloupecku. JO!! :-)

    3. 12. 2005 v 0.14

  7. Jaro říká:

    8. Dero, vďaka za názorné príklady, táto CSS3 vlastnosť môže nájsť zaujímavé využitie v internetových novinách, ale viem si predstaviť text v stĺpcoch aj napríklad na blogoch. Myslím však, že s touto vlastnosťou bude treba zachádzať opatrne a nenútiť užívateľa príliš skrolovať hore dole ak si chce prečítať jeden článok.

    [6] Myslím, že práve takto by sme túto vlastnosť nemali využívať ;). Chceme predsa užívateľom poskytnúť rovnaký zážitok z prehliadania stránok bez ohľadu na to aký prehliadač používajú. Často nie je v schopnostiach a ani moci užívateľa prejsť na iný prehliadač.

    A ohľadom obrázku v šírke stĺpca. Nie je predsa základnou prednosťou tejto CSS vlastnosti to, že šírka a počet stĺpcov je flexibilná v závislosti na rozlíšení, veľkosti písma alebo šírky práve otvoreného okna? Obrázky s pevnou širkou do tohto konceptu nezapadajú, alebo sa mýlim?

    3. 12. 2005 v 9.17

  8. mlok říká:

    9. Jinak "nic nového"

    Asi by bloggeři měli rozebírat více i jiné věci..(Opera 9 TP1) ;p

    3. 12. 2005 v 17.01

  9. Roj říká:

    10. [7] rovnaky zazitek? takze se vratime k tabulkovym lejoutum, aby i uzivatele Necek 4.x videli web stejne, jako v gecku 1.8? Tak to ode me rozhodne necekej.

    Obrazek v sirce sloupce vadi mnohem mene, pokud se pocet sloupcu prizpusobi sirce okna, nez vadi obrazek v sirce okna. Tedy pokud nepouzivas lejout s pevnou sirkou, ale to pak nepotrebujes ani sloupcovou sazbu.

    3. 12. 2005 v 20.31

  10. Lukáš Lánský říká:

    11. [9] No však na stařičkém Netscapu by moderní webové dokumenty měly být čitelné stejně jako ty stejné v nejnovějším prohlížeči.

    Jásat nad tím, že Firefox má konečně něco, co IE ne, radovat se z toho, že uživatel jednoho prohlížeče bude znevýhodněn, je velice signifikantním projevem technologické evangelizace.

    4. 12. 2005 v 1.48

  11. Roj říká:

    12. [10] Nevsiml jsem si, ze by pouziti sloupcove sazby zpusobovalo necitelnost textu v IE/NN/lynxu/…. Dokonce ani s pouzitim obrazku.

    Ale pujdu do sebe a napisu na W3C, at se na CSS3 vykaslou, pac to lidi povazujou za signi… a dal pastnu ta cizi slova, kterym nerozumim :-)

    4. 12. 2005 v 8.48

  12. BiG FooT říká:

    13. Další vlastnost do sbírky nestandardních, další příspěvěk k tomu, aby ve vytváření stránek nebyl jednotný uznávaný standard už nikdy.. Je Firefox prohlížečem, pyšnícím se korektním zobrazováním stránek podle W3C, nebo si stále budou vývojáři dětinsky hrát a nutit tak uživatele, aby na každou stránku použili jiný prohlížeč? Zobrazování ve sloupcích je vlastnost samozřejmě užitečná, ale způsob uvedení ve stylu „my máme toto a IE ne, heč“ není dle mě tím pravým ořechovým…

    4. 12. 2005 v 21.03

  13. Roj říká:

    14. [12] Takze vlastnosti rozpracovane W3C jsou nestandardni? To jsou veci… W3C bude cekat, az to nekdo bude podporovat a Big foot bude cekat, az mu prijde bumazka se stemplem od W3C, ze uz muze. Zpatky na stromy :-)

    5. 12. 2005 v 3.03

  14. von banhoff říká:

    15. [1] já už to na blogu mám, ale nepoužívám to na všechny příspěvky, přeci jen u příspěvků s velkými obrázky to není ten pravý Dadák :) [7] je blbost dávat všech uživatelům stejný obsah, byla by škoda diskriminovat uživatele prohlížečů jen proto, že MSIE neumí spoustu věcí zobrazit správně, navíc kulaté rohy, vícesloupcová „sazba“, průhledné PNG, hover efekt, position fixed a většina použití generovaných prvků nezabrání uživatelům MSIE dostat se k obsahu, jen ho nemají graficky úplně stejně zobrazený jako jiní uživatelé, podle této logiky bysme museli vymýšlet, jak zobrazit v FF a Opeře reklamu a popup okna aby se nedala vypnout a jak omezit uživatele FF a O na prohlížení jen jedné jediné stránky :))

    5. 12. 2005 v 6.51

  15. mlok říká:

    16. [14] Není to blbost (placené weby nepočítám), protože 70% MSIE positivních lidí ho používá k plné spokojenosti jen kvůli tomu, že neznají lepší volby (Presto, Gecko)…tím, že jim "fan" stránka nepojede, se třeba začnou zajímat PROČ to nejede jak má, ale jestli ne, přidou o obsah..mně to líto nebude :-)

    Vůbec nechápu dnešní začínajíci webdesignery, že se jim chce patlat s IE.

    btw hezky to ma rakaz.nl ;))

    10. 12. 2005 v 19.33

  16. Derův zápisník » Archív » Mozillácké drobnosti: Link Prefetching říká:

    17. […] zajímavé funkce. Na tomto blogu jsem již psal o chvályhodné snaze implementovat podporu rozdělení textu do více sloupců ve Firefoxu 1.5. Dnes bych se zaměřil na […]

    19. 3. 2006 v 14.58

  17. peta říká:

    18. Mne to jako chyba s tim paddingem neprijde. Je treba si uvedomit, ze ikdyz jsou to 3 sloupce, stale je to jeden blok a ten tedy muze mit padding pouze na zacatku a na konci. Levy pravy okraj se chovaji take spravne, blok ma nastavenou urcitou sirku a ze se zobrazuje 3× vedle sebe nez 1× souvisle je uz jina vec. Toto se da poresit dalsim DIVem nebo :after, :before, content.

    20. 4. 2008 v 13.13

  18. dsdf říká:

    19. <h1>tiffanychina iphonewholesale fashion</h1>

    30. 12. 2009 v 9.52

  19. dsdf říká:

    20. <h1>buy shoesiphone 3gs wholesale无为人生</h1>

    30. 12. 2009 v 9.52

  20. qqwe říká:

    21. sdfzumba dvd wholesalesdf wholesale bootssdf wholesale nflsdf

    1. 3. 2010 v 10.11

  21. Dropship říká:

    22. Bar Stool Merchant Cash Advance Merchant Accounts just to say hi to everyone!

    23. 3. 2010 v 7.33

  22. lady bags říká:

    23. hot bags fdrdr handbags lady bags golf bags

    9. 4. 2010 v 5.08

  23. Christian Louboutin Shoes říká:

    24. You Christian Louboutin Shoes might be paying attention in knowing ysl boots yellow sole that whether these light weight shoes

    17. 4. 2010 v 3.41

  24. MiuMiu handbags říká:

    25. Hermes Belts
    Hermes Wallets
    Burberry handbags
    YSL handbags

    19. 4. 2010 v 20.15

  25. MiuMiu handbags říká:

    26. herve leger bandage dress
    Herve Leger Dresses
    herve leger

    19. 4. 2010 v 20.16

  26. replica watches říká:

    27. cheap replica watches
    U-Boat watches
    replica Rolex Prince</A

    26. 4. 2010 v 6.22

  27. shox r4 říká:

    28. stale je to jeden blok a ten tedy muze mit padding pouze na zacatku a na konci. Levy pravy okraj se chovaji take spravne, wholesale cardy ugg boots nike sb dunks dunk high pro sb blok ma nastavenou urcitou sirku a ze se zobrazuje 3× vedle sebe nez 1× souvisle je uz jina vec.

    9. 5. 2010 v 14.42

  28. shox r4 říká:

    29. all kinds of shoes, like nike,jordan,prada,air force etc shoes, LV,prada,gucci bag, watch etc. Over the past few years’ development, as a professional trade company, dunk low pro sb short sleeve polo shirt fashion t shirts we are recognized by the clients from all over the world for our high standard products, popular styles, competitive price and best service. And we will accept any kind of challenges.

    9. 5. 2010 v 14.43

  29. gucci shoes říká:

    30. Není to blbost (placené weby nepočítám), protože 70% MSIE positivních lidí ho používá k plné spokojenosti jen kvůli tomu, že neznají lepší volby (Presto, Gecko)…tím, wikishoes fashion blog wholesale jordan shoes wholesale puma shoes že jim „fan“ stránka nepojede, se třeba začnou zajímat PROČ to nejede jak má, ale jestli ne, přidou o obsah..mně to líto nebude

    9. 5. 2010 v 14.43

  30. gucci shoes říká:

    31. Není to blbost (placené weby nepočítám), protože 70% MSIE positivních lidí ho používá k plné spokojenosti jen kvůli tomu, že neznají lepší volby (Presto, Gecko)…tím, wikishoes fashion blog wholesale jordan shoes wholesale puma shoes že jim „fan“ stránka nepojede, se třeba začnou zajímat PROČ to nejede jak má, ale jestli ne, přidou o obsah..mně to líto nebude

    9. 5. 2010 v 14.44

  31. jersey říká:

    32. I've been to China travel, in my opinion chinese people are very freidly, and i especially like the city of beijingshenzhen, i have a friend from china, i ike her blog discount china, now she is in Jewish, just now, she send me a Jewish Directory website, i think the it is very useful.

    10. 5. 2010 v 3.09

  32. herve leger říká:

    33. Herve Leger Dresses
    herve leger bandage dress
    herve leger

    11. 5. 2010 v 9.36

  33. china wholesale usb mouse říká:

    34. china wholesale usb mouse classic boots sale online china wholesale Connector is what you get when you don get what china wholesale Laptop Accessories cardy you want. sale commodity keeps a dear</p>

    23. 5. 2010 v 13.58

  34. Replica Handbags říká:

    35. or design handbags. and other as Replica Louis Vuitton Handbagsfd fdsa f

    13. 6. 2010 v 17.59

  35. Orange Dress říká:

    36. for me Firefox latest version is fully comfortable for user interface.
    it just like a Denim Dress. :)

    18. 6. 2010 v 6.54

  36. Replica Armor říká:

    37. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful infoBar Food Coat Dress Watches Info Gold Jewelry

    1. 7. 2010 v 6.44

  37. replica watches říká:

    38. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the usef

    9. 7. 2010 v 8.56

  38. new era Los Angeles Dodgers Hats říká:

    39. Fantastic website （http://www.goahats.com） I will bookmark it and come back later. Thanks for posting this. cheap new era hats ,Very nice recap of some of the key points in my talk. I hope you and your readers find it useful! discount new era hats Thanks again

    14. 7. 2010 v 13.04

  39. hollister uk říká:

    40. hollister ukthank you

    26. 7. 2010 v 10.45

  40. UGG Classic Tall Boots říká:

    41. [url=http://www.uggboots5815.com]UGG Boots,UGG Boots 5815[/url]

    27. 7. 2010 v 10.04

  41. UGG 5825 říká:

    42. UGG Boots 5163, 5163

    28. 7. 2010 v 4.57

  42. UGG 5825 říká:

    43. UGG Classic Short Boots 001

    28. 7. 2010 v 6.37

  43. UGG 5825 říká:

    44. ghd hair straighteners, ghd styler 001

    28. 7. 2010 v 6.44

  44. Gucci Handbags říká:

    45. Gucci Handbags,Gucci Bags 0032

    28. 7. 2010 v 6.52

  45. Gucci Handbags říká:

    46. UGG Boots,UGG Classic Boots /***

    28. 7. 2010 v 7.02

  46. UGG Classic Cardy říká:

    47. These well-known UGG Classic Cardy are now becoming more and more fashionable and popular, to some extent. I believe you may ask what the shoes can bring us. As I know, if one person struck by lightning in Holland, his family must put all his Classic Cardy Boots up as soon as possible. And in the fairy tale, the shoes are more magic indeed. Now, I always say that the UGG Classic Cardy Boots are so magic and popular.http://www.uggscardy.com *//0 0

    28. 7. 2010 v 7.09

  47. abercrombie říká:

    48. It's always nice when you can not only be informed, but also engaged! abercrombie fitch

    30. 7. 2010 v 15.37

  48. tiffany online říká:

    49. Well said, such a person should be a good sentenceed eyebrow with this as welltiffany outlet755454dfgd dfgcxb dfgd dfgsd

    2. 8. 2010 v 10.55

  49. Wholesale accessories říká:

    50. Greet,Prosím jednu porci vypečených otázek i pro mě, pokud je ještě místo…Wholesale Accessories

    4. 8. 2010 v 2.29

  50. womens ugg boots říká:

    51. Not even as I shook womens ugg boots and trembled uncontrollably in the trenches, did I forget your ugg boots face. I would sit huddled into the wet mud, terrified, as the ugg australia hails of bullets and mortars crashed down around me. WYQ

    16. 8. 2010 v 1.44

  51. shoesmbt říká:

    52. Have comfortable mbt shoes equal to have health have suitable mbt shoes

    21. 8. 2010 v 10.18

  52. NFL Jersey říká:

    53. Thanks for such a great post and the review, I am totally impressed! Keep stuff like this coming.

    8. 9. 2010 v 8.09

  53. mbt shoes on sale říká:

    54. Thanks for such a great post and the review [URL=http://www.mbtonshoes.com/]mbt shoes on sale[/URL], I am totally impressed! Keep stuff like this coming [URL=http://www.mbtonshoes.com/]discount mbt shoes [/URL].

    8. 9. 2010 v 10.34

  54. mbt shoes on sale říká:

    55. Thanks for such a great post and the review <p>mbt shoes , I am totally impressed! Keep stuff like this coming discount mbt shoes

    8. 9. 2010 v 10.35

Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.