Rozdíly

Zde se zobrazují rozdíly mezi dvěma verzemi stránky.

--- wiki:syntaxe-wrap [2025-09-08 08:15] – vytvořeno MartinR
+++ wiki:syntaxe-wrap [2026-02-04 10:43] (aktuální) – MartinR
@@ Řádek 1: / Řádek 1: @@
+====== 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//