Hrátky s okrajem textu v CSS – poznámky a kontextové nadpisy

V předchozím článku jsem se věnoval odsunování nadpisů a dalších elementů mimo tok textu. V tomto článku budu pokračovat – naučíme se umisťovat do levého okraje textu poznámky a vytvoříme si také zvláštní kontextové nadpisy.

V obou případech budeme opět předpokládat podobný text:

<div id=“obsah“>
  <p>Zot dře sýktoce…</p>
  <p>Mabro houpruh…</p>
  …
</div>

Prvku <div id="obsah"> bude tentokrát nastavena levá výplň 180 pixelů (budeme potřebovat víc místa), což zajistí textu levý okraj:

#obsah {
  padding-left: 180px;
}

Při čtení článku můžete sledovat ukázkový příklad (zdrojový kód).

Poznámky k textu odsunuté do levého okraje

Do textu někdy umísťujeme poznámky, které doplňují hlavní text, upřesňují ho nebo rozšiřují. Jejich přečtení není bezpodmínečně nutné k pochopení věci, a proto i tyto poznámky je možné odsunout do jeho levého okraje. Dosáhneme tím osvěžení textu a uživateli se tak bude lépe číst.

Poznámky k textu se většinou označují nějak takto:

<p class=“poznamka“><strong>Poznámka: </strong>Puň py pive lalesk lic býcmý cízl i kreďzoz voura o mězůh. S bač pukryk němřa. Puv z simo o šíktuňbir žív.</p>

K odsunutí do okraje textu použijeme stejný trik jako v předchozím článku:

p.poznamka {
  width: 140px;
  float: left;
  position: relative;
  left: -160px;
  margin-right: -160px;
}

Prvku nastavíme šířku 140 pixelů, necháme ho obtékat textem, poté ho pomocí relativního pozicování přesuneme do levého okraje a pomocí pravého záporného okraje přitáhneme text na místo, kde byla původně poznámka. To by teoreticky mělo stačit, ale Microsoft Internet Explorer (MSIE) vytváří u odstavce vedle poznámky chybně v textu jakýsi zub (více v článku Implementační chyby v prohlížečích – plovoucí prvky a obtékající text), proto nastavíme odstavci s poznámkou ještě záporný dolní okraj:

p.poznamka {
  margin-bottom: -200px;
}

Tímto jsme provedli odsunutí poznámky do levého okraje. Nyní ještě zbývá udělat s ní něco, aby to hezky vypadalo. Protože se jedná o méně důležitý text, nabízí se použití menšího písma (než pro hlavní text) a kurzívy:

p.poznamka {
  font-size: 85%;
  font-style: italic;
}

Mohli bychom použít i nějakou jednodušší ikonku, aby si uživatel poznámky lépe zapamatoval. Dobře vypadá i použití horního a dolního orámování. A také můžeme celý text poznámky nějak obarvit, čímž ji dostatečně odlišíme od hlavního textu:

p.poznamka {
  color: #ff781f;
  background: url(„poznamka.gif“) top center no-repeat;
  padding-top: 20px;
  padding-bottom: 7px;
  border-bottom: #ff781f solid 1px;
}

Zatím máme stále na začátku poznámky text "Poznámka: ". Ten je důležitý při čtení textu v prohlížeči bez stylů, ale ve chvíli, kdy jsme poznámku zvýraznili pomocí stylů, už ho nepotřebujeme. Proto ho označíme…

<p class=“poznamka“><strong class=“poznamka“>Poznámka: </strong>Puň py pive lalesk lic býcmý cízl i kreďzoz voura o mězůh. S bač pukryk němřa. Puv z simo o šíktuňbir žív.</p>

…a skryjeme:

p.poznamka strong.poznamka {
  …
}

Co doplnit místo tří teček, abychom prvek skryli? Pravděpodobně vás napadla vlastnost „display“, ale tou to nepůjde – obsah skrytý s její pomocí skryjí i některé hlasové čtečky, a ty by měly tento text přečíst. Proto prvek absolutně napozicujeme mimo stránku, což čtečkám nevadí:

p.poznamka strong.poznamka {
  position: absolute;
  top: -500px;
}

Nyní si můžete prohlédnout kompletní kód poznámky. Všimněte si, že horní rámeček poznámky je ve skutečnosti tvořen obrázkem na pozadí – museli jsme to tak udělat proto, že jsme chtěli, aby se ikonka nacházela nad ním.

p.poznamka {
  color: #ff781f;
  background: url(„poznamka.gif“) top center no-repeat;
  font-size: 85%;
  font-style: italic;
  width: 140px;
  float: left;
  position: relative;
  left: -160px;
  margin: 0 -160px -200px 0;
  padding-top: 20px;
  padding-bottom: 7px;
  border-bottom: #ff781f solid 1px;
}
p.poznamka strong.poznamka {
  position: absolute;
  top: -500px;
}

Podporu tohoto efektu jsem úspěšně testoval v MSIE 5, 5.5 a 6, Mozille a Opeře 7.

Kontextové nadpisy

Levý okraj textu by mohl obsahovat také nejdůležitější slova či témata z hlavního textu, přímo vedle pasáže, kde se vyskytují (umožní to čtenáři snažší orientaci v textu). Do hlavního textu bychom je mohli zahrnout pomocí prvku <strong> se speciální třídou:

<p>Machu bazo bi, a jilo vapať zam z hlkrásk nůle seh zéďla. Zeňsič údrádra běchré z polich k ci přáro vímůhy hýdřoř. Ťošo veděso zys vřoulec i brubatří. <strong class=“maly-nadpis“>Nuždryměp vámi.</strong> Nuždryměp vámi zicháň týštvěvupe pez. Pos probu dápyt a žiprůzi pouproť zusež. Pta sikyk zizoren mlnu luzou ratrychrež stod i chyčo věléň řu.</p>

Text nyní obsahuje jakýsi vnořený nadpis, který patří k následujícímu obsahu. Při čtení textu v prohlížeči bez stylů uživateli asi moc platný nebude, na druhou stranu mu ani příliš neuškodí. Pokud ale přesto nechcete, aby se zde tento text nacházel, můžete ho nechat vygenerovat JavaScriptem (viz níže). Teď k tomu, jak odsunout nadpis do levého okraje. Tentokrát využijeme absolutní pozicování:

strong.maly-nadpis {
  position: absolute;
  top: auto;
  left: 20px;
  width: 130px;
}

Kouzlo spočívá v tom, že nastavíme-li absolutně pozicovanému prvku jednu z pozicovacích vlatností na hodnotu „auto“, je umístěn, jako by v daném směru pozicován nebyl. Náš kontextový nadpis si tedy zachová své umístění ve svislém směru, změní ho jen ve vodorovném – tím pádem se posune do levého okraje vedle řádku, ve kterém se původně nacházel. Pro podobný účel bychom mohli využít i relativní pozicování, ale v takovém případě by nám zůstala po nadpisu v hlavním textu mezera, protože jen absolutně pozicovaný prvek je vyjmut z běžného toku dokumentu.

Pro vytvoření kontextových nadpisů bychom mohli použít i trik, který jsme používali k odsouvání do levého okraje až doposud, tedy kombinace plavání, relativního pozicování a záporných okrajů. Tento způsob ale produkoval nepřesné výsledky, takže nadpis byl v různých prohlížečích posunut o řádku výš či níž, než bylo potřeba, což je v tomto případě závažný problém.

Hodnota vlastnosti „left“ z pravidla výše je myšlena vzhledem k prvku <div id="obsah">, proto mu musíme nastavit relativní pozici, aby se vzhledem k tomuto prvku její hodnota i počítala (pozice absolutně pozicovaných prvků se počítá vzhledem k nejbližšímu pozicovanému předkovi prvku):

#obsah {
  position: relative;
}

Vlastnost „top“ v kódu výše by ani být nastavena nemusela, protože „auto“ je její výchozí hodnota a není dědičná. Nastavil jsem ji zde pouze pro názornost. Nyní nadpis ještě trochu vyzdobíme a zarovnáme jeho obsah na pravou stranu, aby bylo vidět, že je ve vztahu k hlavnímu textu:

strong.maly-nadpis {
  color: #ff781f;
  text-align: right;
  border-top: double #ff781f 3px;
  border-bottom: solid 1px #ff781f;
  padding: 3px 0;
}

Uvnitř textu bylo nutné do nadpisu zahrnou i tečku za ním. Při umístění nadpisu vlevo ji tu ale již nepotřebujeme, proto ji označíme…

<p>Machu bazo bi, a jilo vapať zam z hlkrásk nůle seh zéďla. Zeňsič údrádra běchré z polich k ci přáro vímůhy hýdřoř. Ťošo veděso zys vřoulec i brubatří. <strong class=“maly-nadpis“>Nuždryměp vámi<span class=“tecka“>. </span></strong>Nuždryměp vámi zicháň týštvěvupe pez. Pos probu dápyt a žiprůzi pouproť zusež. Pta sikyk zizoren mlnu luzou ratrychrež stod i chyčo věléň řu.</p>

…a skryjeme opět pomocí pozicování mimo stránku:

strong.maly-nadpis span.tecka {
  position: absolute;
  left: -2000px;
/* nemůžeme použít top kvůli omezujícímu bloku prvku —
   nevíme, jak vysoko by ho bylo třeba umístit */
}

Celý kód pro vytvoření kontextových nadpisů tedy vypadá takto:

#obsah {
  position: relative;
}
strong.maly-nadpis {
  color: #ff781f;
  text-align: right;
  position: absolute;
  left: 20px;
  width: 130px;
  border-top: double #ff781f 3px;
  border-bottom: solid 1px #ff781f;
  padding: 3px 0;
}
strong.maly-nadpis span.tecka {
  position: absolute;
  left: -2000px;
}

Vše opět s úspěchem testováno na MSIE 5, 5.5, 6, Mozille a Opeře 7.

JavaScriptem k lepšímu kódu

Pokud nechcete vkládat texty nadpisů do hlavního textu (například proto, že vám to přijde matoucí pro uživatele s prohlížečem bez podpory stylů), můžete označit text nadpisu v textu pomocí prvku <span>…

<p>Vochu ktýňast. Boť vosdl o mejkřor ústůz, bůč břábežlesíh básk lehry třapež v lizi krustu zušt nále čá lopar. Pěvu dud v molbrýshé vir, s ťoumo dosk piď kýďuli zeli i koňse. <span class=“maly-nadpis“>Jid sohost</span> vistči, jest…</p>

…a nechat nadpis vygenerovat následujícím JavaScriptem (stačí ho nakopírovat do vašeho souboru skriptů):

function regInitFcn (fcn)
{
  if (!window.addEventListener && !window.attachEvent) return false;
  if (window.addEventListener) window.addEventListener(„load“, fcn, false);
  else window.attachEvent(„onload“, fcn);
  return true;
}
function vytvoritKontextoveNadpisy()
{
  var i, vsechnyPrvky, span, strong;
  
  vsechnyPrvky = (document.all ? document.all : (document.getElementsByTagName ? document.getElementsByTagName(„*“) : null));
  if (!document.getElementById || !vsechnyPrvky) return false;
  if (!(document.styleSheets || document.implementation.hasFeature(„StyleSheets“,““) || document.implementation.hasFeature(„CSS“,““) || document.implementation.hasFeature(„CSS2″,““))) return false;
  for (i = 0; i < vsechnyPrvky.length; i++) {
    if (vsechnyPrvky[i].tagName.toLowerCase() == „span“ && vsechnyPrvky[i].className.search(/(^m| m)aly-nadpi(s$|s )/) != -1) {
      vsechnyPrvky[i].className = „“;
      span = vsechnyPrvky[i].cloneNode(true);
      strong = document.createElement(„strong“);
      strong.className = „maly-nadpis“;
      strong.appendChild(span);
      vsechnyPrvky[i].parentNode.insertBefore(strong, vsechnyPrvky[i]);
    }
  }
  return true;
}
regInitFcn(vytvoritKontextoveNadpisy);

Vytvoření nadpisů (prvků <strong class="maly-nadpis"> s příslušným textem) zajišťuje funkce vytvoritKontextoveNadpisy(). Tato funkce nejprve testuje podporu základních funkcí DOMu a podporu CSS v prohlížeči, poté prochází všechny prvky dokumentu. Pokud najde příslušný <span>, zkopíruje jeho text, obalí ho příslušným prvkem <strong> a umístí do dokumentu před původní <span>. Zformátování prvku jako nadpisu se provede automaticky pomocí CSS, které jsme si již ukázali.

Funkce vytvoritKontextoveNadpisy() je spuštěna při nahrání stránky. To je zajištěno díky funkci regInitFcn(), která zaregistruje funkci, která je jí předána jako argument, ke spuštění po nahrání stránky. Její výhoda spočívá v tom, že s ní můžeme zaregistrovat libovolné množství funkcí, narozdíl od zápisu přes window.onload.

Druhý nadpis v ukázce je vytvořen právě touto metodou.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.