DokuWiki

Stránka je pouze pro čtení. Můžete zobrazit zdrojový kód, ale nemůžete ho měnit.
Pokud si myslíte, že je to chyba, kontaktujte správce.
====== Syntaxe Wrap ======

===== Příklady použití pluginu Wrap =====

===== Základní syntaxe =====

**%%<WRAP>%%** velkými písmeny „verzálkami“ (případně **%%<block>%%** nebo **%%<div>%%**) vytvoří prvek typu **''div''** a měl by se používat pro **„velké“** kontejnery, které **obklopují** odstavce, seznamy, tabulky apod.

<code>
<WRAP třídy #id šířka :jazyk>
„velký“ obsah
</WRAP>

nebo
<block třídy #id šířka :jazyk>
„velký“ obsah
</block>

nebo
<div třídy #id šířka :jazyk>
„velký“ obsah
</div>
</code>

**%%<wrap>%%** malými písmeny „minuskami“ (případně **%%<inline>%%** nebo **%%<span>%%**) vytvoří prvek typu **''span''** a měl by se používat pro **„malé“** kontejnery, které se nacházejí **uvnitř** odstavců, seznamů, tabulek apod.

<code>
<wrap třídy #id šířka :jazyk>„malý“ obsah</wrap>

nebo
<inline třídy #id šířka :jazyk>„malý“ obsah</inline>

nebo
<span třídy #id šířka :jazyk>„malý“ obsah</span>
</code>

:!: Upozornění: některé funkce **nefungují s malými prvky typu span**:
  * **zarovnání** (včetně zarovnání vzniklého změnou směru textu)
  * **vícesloupcové rozvržení**
  * a **šířky**
pokud daný wrap není zároveň plovoucí (floated).

Zkrácená syntaxe pomocí velkého **%%<WRAP />%%** a malého **%%<wrap />%%** je dostupná, pokud je kontejner prázdný nebo není potřeba.

<code>
<WRAP třídy #id />
nebo
<block třídy #id />
nebo
<div třídy #id />
</code>

a
<code>
<wrap třídy #id />
nebo
<inline třídy #id />
nebo
<span třídy #id />
</code>

===== Třídy a styly =====

==== Sloupce a plovoucí prvky ====

Sloupce lze snadno vytvořit přidáním třídy ''column'' a nastavením šířky, např.
  <WRAP column 30%>…obsah…</WRAP>

Následující příklad využívá tuto strukturu:

<code>
<WRAP group>

<WRAP third column>…obsah…</WRAP>
<WRAP third column>…obsah…</WRAP>
<WRAP third column>…obsah…</WRAP>

</WRAP>
</code>


<WRAP group>
<WRAP third column>
=== Možnosti plovoucího zarovnání ===

Obvykle postačí použít třídu ''column'', ale pro pokročilejší použití (nejen pro sloupce, ale i pro jiné třídy, jako např. [[#boxy a poznámky]]) lze využít různé typy „plovoucích“ prvků:

  * **''column''** odpovídá zarovnání vlevo u jazyků typu LTR a zarovnání vpravo u jazyků typu RTL
  * **''left''** zarovná wrap vlevo
  * **''right''** zarovná wrap vpravo
  * **''center''** umístí wrap horizontálně doprostřed stránky
</WRAP>

<WRAP third column>
=== Šířky ===

Lze nastavit libovolné platné jednotky šířky (pouze pro divy): ''%, px, em, rem, ex, ch, vw, vh, pt, pc, cm, mm, in'', ale nejčastěji se používají:

^ typ     ^ např.      ^ poznámka                                                            ^
^ ''%''   | ''30%''    | vhodné ve většině případů                                           |
^ ''px''  | ''420px''  | vhodné pro kontejnery s obrázky o dané šířce                        |
^ ''em''  | ''20em''   | vhodné pro kontejnery, které se mají přizpůsobovat velikosti písma  |
</WRAP>

<WRAP third column>
=== Klíčová slova pro šířku ===

Pomocí určitých klíčových slov lze automaticky přizpůsobit sloupce dostupnému horizontálnímu prostoru. Tyto sloupce se také přizpůsobují velikosti obrazovky, takže jsou responzivní a na mobilních zařízeních se zalamují pod sebe.

Existují čtyři klíčová slova pro šířku. Neměla by se kombinovat s jinými šířkami, pouze ''third'' lze kombinovat s ''twothirds''.

  * **''half''** vytvoří dva sloupce v řadě
  * **''third''** vytvoří tři sloupce v řadě
  * **''quarter''** vytvoří čtyři sloupce v řadě
  * **''twothirds''** spolu s ''third'' vytvoří poměr 2/3 a 1/3 v jedné řadě

:!: Pozor: Aby klíčová slova pro šířku fungovala správně, je nutné obalit jejich sadu pomocí **''%%<WRAP group>%%''**. Pokud kombinujete více typů v jedné skupině, může být potřeba přidat ''%%<WRAP clear />%%'' za řadu.
</WRAP>

</WRAP>

Možnosti lze použít i u prvků typu span (protože každý plovoucí prvek se automaticky stává blokovým prvkem), ale obvykle to nedává smysl.\\
:!: Šířky u span prvků obvykle nefungují (záměrně), ale mohou být užitečné, pokud je prvek plovoucí.

:!: Pozor: Jaký je rozdíl mezi běžnými šířkami a klíčovými slovy pro šířku - a kdy je vhodné co použít? **Běžné šířky** mohou způsobovat problémy a nikdy se zcela nesčítají, což může vést k narušení rozvržení (viz [[http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug|box model]] pro technické vysvětlení). Správné nastavení šířek vyžaduje testování v různých prohlížečích. **Klíčová slova pro šířku** se přizpůsobují automaticky a fungují lépe na mobilních zařízeních. Nevýhodou je nutnost obalujícího wrapu a nekompatibilita se staršími prohlížeči (IE8 a starší).

Všechny tyto možnosti lze použít i v wrapech typu [[#boxy a poznámky]] (viz níže).

=== Emulované nadpisy (zastaralé) ===

Pokud je aktivována konfigurační volba ''emulatedHeadlines'', každý text ve formátu ''%%//**__text jako tento__**//%%'' nebo ''%%//**takto**//%%'' vytvoří „emulovaný nadpis“ uvnitř wrapu. Tato funkce je zastaralá a bude v budoucnu odstraněna, protože běžné nadpisy uvnitř wrapů jsou již plně podporovány.

Pokud je tato volba aktivní a potřebujete pouze tučný a kurzívní text bez nadpisu, použijte opačné pořadí: ''%%**//Bez nadpisu//**%%''.


=== Vícesloupcové rozvržení ===

<WRAP colmedium>
Vícesloupcové rozvržení funguje nejlépe v moderních prohlížečích (nefunguje v IE9 a starších) a mělo by být považováno za experimentální, protože chování některých prohlížečů je stále nekonzistentní a chybové.

Stačí použít: **''%%colsmall%%''** pro sloupce s malou šířkou, **''%%colmedium%%''** pro střední šířku a **''%%collarge%%''** pro velkou šířku.\\
Nebo: **''%%col2%%''** pro 2 sloupce, **''%%col3%%''** pro 3 sloupce, **''%%col4%%''** pro 4 sloupce, **''%%col5%%''** pro 5 sloupců.
První typ sloupců je určen šířkou, druhý počtem. Sloupce podle šířky jsou vhodné pro různá rozvržení a přizpůsobení různým zařízením.

:!: Poznámka: Vícesloupcové rozvržení nedává smysl pro prvky typu span.
</WRAP>

Nepoužívejte tento typ rozvržení pro větší sloupce obsahující více než jen text. V takovém případě použijte [[#sloupce a plovoucí prvky]] uvedené výše.


==== Zarovnání ====

Lze použít následující typy zarovnání textu:

  * ''leftalign'' – zarovnání vlevo
  * ''rightalign'' – zarovnání vpravo
  * ''centeralign'' – zarovnání na střed
  * ''justify'' – zarovnání do bloku

<WRAP centeralign>
Text zarovnaný na střed…
</WRAP>

<WRAP rightalign>
…a text zarovnaný vpravo.
</WRAP>

<code>
<WRAP centeralign>
Text zarovnaný na střed…
</WRAP>

<WRAP rightalign>
…a text zarovnaný vpravo.
</WRAP>
</code>

:!: Zarovnání nelze použít u prvků typu span.

==== Boxy a poznámky ====

<WRAP round box 500px center>
=== Zaoblený box 500px na střed ===

  * ''box'' vytvoří rámeček kolem kontejneru a použije výchozí barvy ze souboru šablony ''style.ini'' (''%%__background_alt__%%'' a ''%%__text__%%'')
  * třídy ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' vytvoří speciální poznámkový kontejner s odpovídající ikonou
  * třídy ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' využívají bezpečnostní barvy (bez ikon)
  * ''round'' lze přidat k libovolnému prvku s pozadím nebo rámečkem; funguje pouze v moderních prohlížečích (nefunguje v IE8 a starších)
</WRAP>

<WRAP info 300px left>
=== Informace ===
%%<WRAP info></WRAP>%%
</WRAP>

<WRAP tip 300px left>
=== Tip ===
%%<WRAP tip></WRAP>%%
</WRAP>

<WRAP important 300px left>
=== Důležité ===
%%<WRAP important></WRAP>%%
</WRAP>

<WRAP alert 300px left>
=== Upozornění ===
%%<WRAP alert></WRAP>%%
</WRAP>

<WRAP help 300px left>
=== Nápověda ===
%%<WRAP help></WRAP>%%
</WRAP>

<WRAP download 300px left>
=== Stažení ===
%%<WRAP download></WRAP>%%
</WRAP>

<WRAP todo 300px left>
=== Úkol ===
%%<WRAP todo></WRAP>%%
</WRAP>

<WRAP clear />

=== Bezpečnostní poznámky ===

V bezpečnostních poznámkách doporučujeme používat pouze jednoduché formátování.

<WRAP danger 30% left>
=== Nebezpečí ===
%%<WRAP danger></WRAP>%%
</WRAP>

<WRAP warning 30% left>
=== Varování ===
%%<WRAP warning></WRAP>%%
</WRAP>

<WRAP caution 30% left>
=== Výstraha ===
%%<WRAP caution></WRAP>%%
</WRAP>

<WRAP notice 30% left>
=== Oznámení ===  
%%<WRAP notice></WRAP>%%
</WRAP>

<WRAP safety 30% left>
=== Bezpečnost ===  
%%<WRAP safety></WRAP>%%
</WRAP>

<WRAP clear />

Poznámky a boxy lze použít i uvnitř textu pomocí prvků typu span:\\
<wrap info>info</wrap>, <wrap help>nápověda</wrap>, <wrap alert>upozornění</wrap>, <wrap important>důležité</wrap>, <wrap tip>tip</wrap>, <wrap download>stažení</wrap>, <wrap todo>úkol</wrap>, <wrap round box>zaoblený box</wrap>, <wrap danger>nebezpečí</wrap>, <wrap warning>varování</wrap>, <wrap caution>výstraha</wrap>, <wrap notice>oznámení</wrap>, <wrap safety>bezpečnost</wrap>

  <wrap info>info</wrap>, <wrap help>nápověda</wrap>, atd.

==== Zvýraznění textu (Marks) ====

Text lze označit jako <wrap hi>zvýrazněný</wrap>, <wrap lo>méně významný</wrap> nebo <wrap em>zvláště zdůrazněný</wrap>.

  Text lze označit jako <wrap hi>zvýrazněný</wrap>, <wrap lo>méně významný</wrap> nebo <wrap em>zvláště zdůrazněný</wrap>.

:!: Upozornění: V některých šablonách může vzhled těchto označení působit nevhodně - doporučuje se jejich vzhled upravit podle potřeby.

==== Záložky (Tabs) ====

Řadu záložek lze vytvořit jednoduše tak, že seznam odkazů obalíte pomocí ''%%<WRAP tabs></WRAP>%%''.

<WRAP tabs>
  * [[syntaxe wrap|Nějaká stránka]]
  * [[syntaxe wrap|Tato stránka]]
  * [[syntaxe wrap|Další stránka]]
</WRAP>

  <WRAP tabs>
    * [[syntaxe wrap|Nějaká stránka]]
    * [[syntaxe wrap|Tato stránka]]
    * [[syntaxe wrap|Další stránka]]
  </WRAP>

:!: Upozornění: Vzhled těchto záložek závisí na použité šabloně, nikoli na pluginu Wrap. Pokud vidíte pouze seznam odkazů bez záložek, ujistěte se, že jste přidali „tabs“ do konfigurační volby ''noPrefix'' a že vaše šablona podporuje alespoň verzi DokuWiki „Angua“ z 25. 1. 2012.

==== Různé funkce ====

=== Vymazání plovoucího zarovnání ===

Po použití tříd pro plovoucí prvky se může stát, že následující text zasahuje do prostoru vyhrazeného pouze pro plovoucí kontejnery. K tomu, abyste tomu zabránili, jednoduše přidejte:

  <WRAP clear />

=== Šířka tabulky ===

Šířku tabulky lze nastavit pomocí třídy ''tablewidth''. Každá tabulka uvnitř tohoto wrapu bude mít vždy šířku 100 %. Tím lze nastavit libovolnou šířku tabulky přidáním šířky k wrapu (nebo žádnou pro 100 %).

<WRAP tablewidth 80%>
^ Tabulka ^ má   ^
| šířku   | 80 % |
</WRAP>

  <WRAP tablewidth 80%>
  ^ Tabulka ^ má   ^
  | šířku   | 80 % |
  </WRAP>

=== Odsazení ===

<wrap indent>Tento text bude zobrazen s odsazením.</wrap>

  <wrap indent>Tento text bude zobrazen s odsazením.</wrap>

=== Záporné odsazení ===

<wrap outdent>Tento text bude zobrazen s „negativním“ odsazením.</wrap>

  <wrap outdent>Tento text bude zobrazen s „negativním“ odsazením.</wrap>

=== Zalomení v kódu ===

<WRAP prewrap 250px>
<code>
Uvnitř tohoto bloku kódu se slova zalomí na nový řádek, i když jsou všechna na jednom řádku.
</code>
</WRAP>

  <WRAP prewrap 250px>
  <code>
  Uvnitř tohoto bloku kódu se slova zalomí na nový řádek, i když jsou všechna na jednom řádku.
  </code>
  </WRAP>

=== Spoiler ===

Následuje spoiler: <wrap spoiler>Darth Vader je Lukův otec.</wrap>

  Následuje spoiler: <wrap spoiler>Darth Vader je Lukův otec.</wrap>

Text ve spoileru lze přečíst výběrem myší.

=== Tlačítkové odkazy ===

Odkaz, který vypadá jako tlačítko: <wrap button>[[wiki:Syntax]]</wrap>

  Odkaz, který vypadá jako tlačítko: <wrap button>[[wiki:Syntax]]</wrap>

=== Skrytý text ===

Následující text je skrytý: <wrap hide>Johne, prosím uprav tu větu.</wrap>

  Následující text je skrytý: <wrap hide>Johne, prosím uprav tu větu.</wrap>

:!: Upozornění: Text je stále viditelný ve zdrojovém kódu, v ne-moderních prohlížečích a je dohledatelný. Nepoužívejte tuto funkci pro citlivé nebo bezpečnostní informace!

=== Zalomení stránky ===

Následující prvek přidá zalomení stránky: <WRAP pagebreak />

  Následující prvek přidá zalomení stránky: <WRAP pagebreak />

Toto nemá žádný vliv na zobrazení v prohlížeči. [[http://reference.sitepoint.com/css/page-break-after|Zalomení stránky]] vynutí novou stránku při tisku.

=== Zákaz zalomení stránky ===

Následující prvek se pokusí zabránit zalomení stránky: <WRAP nopagebreak>obsah, který má zůstat pohromadě (např. dlouhá tabulka)</WRAP>

  Následující prvek se pokusí zabránit zalomení stránky: <WRAP nopagebreak>obsah, který má zůstat pohromadě (např. dlouhá tabulka)</WRAP>

Toto také nemá vliv na zobrazení v prohlížeči. Při tisku se pokusí [[http://reference.sitepoint.com/css/page-break-inside|zabránit zalomení stránky]].

=== Pouze obrazovka / pouze tisk ===

<wrap noprint>Tento text se zobrazí na obrazovce, ale nebude vytištěn.</wrap>

  <wrap noprint>Tento text se zobrazí na obrazovce, ale nebude vytištěn.</wrap>

=== Onlyprint ===

<wrap onlyprint>Tento text se nezobrazí na obrazovce, ale bude vytištěn.</wrap>

  <wrap onlyprint>Tento text se nezobrazí na obrazovce, ale bude vytištěn.</wrap>


==== Kombinování a vnořování ====

Lze kombinovat a vnořovat všechny třídy a typy boxů, např.:

<WRAP box 350px right :cs>

=== Vnější box plovoucí vpravo ===

<WRAP 165px left>
Vnitřní vnořený box plovoucí vlevo a částečně <wrap em hi>__zdůrazněný__ a __zvýrazněný__ s vnořenou <wrap notice>__poznámkou__</wrap> uvnitř</wrap>.
</WRAP>

Text uvnitř vnějšího pravého boxu, ale pod vnitřním levým boxem.

<WRAP clear />

<WRAP round tip>
Zaoblený tip box pod tím, po ''clear''.
</WRAP>

</WRAP>

<code>
<WRAP box 350px right :cs>
=== Vnější box plovoucí vpravo ===

<WRAP 165px left>
Vnitřní vnořený box plovoucí vlevo a částečně <wrap em hi>__zdůrazněný__ a __zvýrazněný__ s vnořenou <wrap notice>__poznámkou__</wrap> uvnitř</wrap>.
</WRAP>

Text uvnitř vnějšího pravého boxu, ale pod vnitřním levým boxem.

<WRAP clear />

<WRAP round tip>
Zaoblený tip box pod tím, po ''clear''.
</WRAP>

</WRAP>
</code>

<wrap #nazevkotvy />

==== Kotva ====

Kotva umožňuje definovat konkrétní místo na stránce, na které lze odkazovat.

K definování kotvy použijte následující syntaxi:

  <wrap #nazevkotvy />

Na kotvu lze odkazovat pomocí: #nazevkotvy\\
Vyzkoušejte: [[#nazevkotvy]]

==== Jazyk a směr textu ====

Jazyk a směr čtení wrap kontejneru lze změnit přidáním dvojtečky a kódu jazyka, např.:

<code>
<WRAP :he>
זה עברית. ((<wrap :cs>To znamená „Toto je hebrejština“, alespoň podle [[http://translate.google.com/|Google Translate]].</wrap>))
</WRAP>
</code>

<WRAP :he>
זה עברית. ((<wrap :cs>To znamená „Toto je hebrejština“, alespoň podle [[http://translate.google.com/|Google Translate]].</wrap>))
</WRAP>

Směr textu (''rtl'' – zprava doleva, nebo ''ltr'' – zleva doprava) se nastaví automaticky a závisí výhradně na zvoleném jazyce. Seznam aktuálně podporovaných jazyků je dostupný na: http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code
(Pokud zadáte jazyk, který není v seznamu, nebude mít žádný účinek.)

 --- //Překlad ✿ [[https://dokuwiki.martinr.cz|MartinR]] 2026-02-03 19:19//