Přeskoč navigaci

Zde hledá Jyxo.

Jyxo

Pevná mezera v HTML

Miroslav Vejlupek, vydáno/aktualizováno: 8.10.2001/17.12.2001

Ti z vás, kdož se setkali s knižní grafikou, znají dobře úskalí sazby textu: především stahování jednoznakových předložek a spojek na koncích řádek do řádek následujících. Řeč je o pevné neboli nedělitelné či nezlomitelné mezeře, jež sváže cokoliv k čemukoliv, v našem případě předložky či spojky k následujícímu slovu.

K jedněm z nejrozšířenějších programů pro sazbu textu na profesionální úrovni se řadí QuarkXPress. Umožňuje naprosto přesné formátování textu a vložené grafiky. Naproti tomu uživatelské (domácí) rozhraní velmi používaného MS Wordu si na přílišnou přesnost nepotrpí, avšak na druhou stranu nabízí automatický přesun samostatného písmene na konci řádky do řádky další.

I na internetu se setkáváme s využitím pevné mezery buď namísto prázdného místa (např. v tabulce s prázdnou buňkou), nebo za účelem svázání dvou prvků (ať již slov, či obrázků). Co se však týče samotného textu, skutečně jen ojediněle se setkáme se stránkou, jež dbá přísných pravidel grafické estetiky.

Příkladem ojedinělé vlaštovky je elektronický projekt Občanského sdružení V-ART se sídlem v Písku -- autorský kolektiv tu dbá na zachování grafických norem stejně jako při sazbě knižního textu.

Proč se na internetu nesetkáváme s důsledným dodržováním grafických norem?

Jedním z důvodů je přílišná pracnost (respektive časová náročnost) procesu grafické úpravy. Samotný text lze snadno zkopírovat a vložit do zdrojového souboru, avšak ručnímu vkládání pevných mezer se nevyhneme. Lze sice vytvořit makro pro automatické doplnění nedělitelné mezery, toto však většinou zůstává na uživateli, neboť makro nebývá standardní součástí programu.

Dalším z důvodů je automatizovaná komunikace mezi klientem a serverem. Na klientův dotaz odpoví server bez jakéhokoliv přičinění člověka. Tento proces zasáhl i publikaci článků: text je automaticky zformátován skriptem a upravený vysílán do Sítě. Přiznejme si, že v přehršli článků a příspěvků není redaktor periodika schopen každý text zvlášť ručně formátovat -- zvláště jedná-li se například jen o aktualitu s omezenou platností.

Možnou příčinou je snad i neznalost tohoto pravidla, avšak domnívám se (věřím!), že tato pochybnost není na místě.

Editory a pevná mezera

Vkládání nedělitelných mezer usnadňuje například Homesite nebo freeware 1st Page 2000, ale i běžný MS Word: klávesovou zkratkou Ctrl + Shift + mezerník, přičemž kódový zápis   (non breaking space) tak nahradí klasickou mezeru (nikoliv ve Wordu).

Příklad:

Tohle je příklad s klasickou mezerou.
Tohle je příklad s pevnou mezerou.

Oba zápisy zobrazí browser shodně s rozdílem, že předložka "s" (s tím, že na další slovo "klasickou" již není v řádce místo) v prvém případě zůstane na konci řádku a v případě druhém se pevně sváže s následujícím slovem a skočí na začátek nové.

Tip:

Editory jako Notepad (Poznámkový blok) či WordPad nepodporují klávesovou zkratku pro zápis pevné mezery, leč lze ji chytře a jednoduše obejít: zdrojový zápis jednoduše zkopírujte (Ctrl + C) a vkládejte (Ctrl + V), kde je zapotřebí. ;-)

Praktické využití pevné mezery

Jak jsem zmínil, pevnou mezeru lze použít v místě, kde nic není, leč být by mělo - tedy v prázdné buňce tabulky. (Přestože k tomuto není nedělitelná mezera určena, lze ji zde účelně použít.)

Příklad:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>něco</td>
  </tr>
</table>

První buňka tabulky je prázdná, v druhé je "něco" (např. text či obrázek), přičemž šířka "prázdné" buňky se rovná právě šířce mezery. Velikost buňky lze samozřejmě nastavit parametry width a height, ovšem nikoliv nižšími hodnotami, než má samotná mezera. V případě, že potřebujeme buňku o šířce jen několika málo pixelů, je lépe použít transparentní (průhledný) GIF o velikosti 1×1 px a dle potřeby jej upravit vlastnostmi width a height.

Jak jistě mnozí víte, browser chápe jakýkoliv počet mezer jako jednu jedinou. Někdy však potřebujete použít mezer více než jednu, například pro odsazení textu či jiného prvku. V takovém případě i zde má své uplatnění &nbsp;. Platí to hlavně při optimalizaci pro starší verze prohlížečů, v novějších raději uplatňujte kaskádové styly.

Příklad:

&nbsp;&nbsp;&nbsp;<img src="obrazek.gif">

Obrázek "obrazek.gif" takto odsadíte o tři mezery. S úspěchem tak můžete odsadit jakékoliv prvky (např. tlačítka či textové odkazy ve vertikálním menu) i v případě, že musíte či chcete použít nulové hodnoty parametrů tabulky cellspacing a cellpadding. To opět platí pro starší prohlížeče, pro novější použijte následující řádek:

<img src="obrazek.gif" style="margin-left: 1em"> apod.

Příklad:

&nbsp;&nbsp;<a href="stranka1.html">STRÁNKA 1</a><br>
&nbsp;&nbsp;<a href="stranka2.html">STRÁNKA 2</a><br>
  .
  .
  .
&nbsp;&nbsp;<a href="strankaX.html">STRÁNKA X</a>

Tentýž příklad s využitím vlastností CSS:

<ul style="margin: 0px; list-style-type: none">
  .
  .
  .
  <li style="margin-left:1em;list-style-type:none">
  <a href="stranka2.html">STRÁNKA 2</a></li>
</ul>

© 2001 Miroslav Vejlupek
[email protected], http://miroslavvejlupek.webpark.cz

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.