====== Примеры для плагина Wrap ======

===== Базовый синтаксис =====

Набранный в верхнем регистре тег **%%<WRAP>%%** (или же **%%<block>%%** или **%%<div>%%**) трансформируется в **''div''** и используется для оформления **"объёмных"** контейнеров, **отбивки** абзацев, списков, таблиц и других подобных элементов.

<code>
<WRAP классы ширина :язык>
«объёмный» контент
</WRAP>

или
<block классы ширина :язык>
«объёмный» контент
</block>

или
<div классы ширина :язык>
«объёмный» контент
</div>
</code>

Набранный в нижнем регистре тег **%%<wrap>%%** (или же **%%<inline>%%** или **%%<span>%%**) трансформируется в **''span''** и используется для оформления **"небольших"** контейнеров, текста **внутри** абзацев, списков, таблиц и других подобных элементов.

<code>
<wrap классы ширина :язык>"небольшой" контент</wrap>

или
<inline классы ширина :язык>"небольшой" контент</inline>

или
<span классы ширина :язык>"небольшой" контент</span>
</code>

:!: Пожалуйста, имейте в виду, что некоторые эффекты **невозможно получить, если спаны набраны в нижнем регистре:**
  * **выравнивание** (включая варианты выравнивания, созданные с помощью изменения направления текста)
  * **мультиколонки**
  * и **ширина**

и соответствующий обрамляющий блок тоже не является float’ом.

===== Классы и стили =====

==== Колонки и float’ы ====

Колонки легко добавляются с введением класса ''column'' и указанием ширины. Например:
<code><WRAP column 30%>...контент...</WRAP></code>

<WRAP column 30%>
//**__Эмуляция заголовка 1-го уровня__**//

Вы можете эмулировать заголовок 1-го уровня с помощью курсива, выделения жирным или подчёркивания, например, так:
<code>//**__Эмуляция заголовка 1-го уровня__**//</code>

//**Эмуляция заголовка 2-го уровня**//

Заголовок 2-го уровня без подчёркивания выглядит, например, так:
<code>//**Эмуляция заголовка 2-го уровня**//</code>

Если вам нужен текст, выделенный и курсивом, и жирным, просто используйте теги наоборот:
<code>**//Нет заголовка//**</code>
</WRAP>

<WRAP column 30%>
//**__Разные варианты float’ов__**//

Обычно используется только класс ''column'', однако в случае более сложной вёрстки (когда речь идёт не только о колонках, но и о других классах, например о [[#Блоки и примечания|блоках и примечаниях]]), вы можете использовать несколько видов float'ов:

  * **''column''** --- даёт тот же эффект, что и ''left'' для языков, использующих письмо слева направо, а также ''right'' для языков, использующих письмо справа налево;
  * **''left''** позволяет сдвинуть ваш обрамляющий блок влево;
  * **''right''** позволяет обрамляющему блоку сдвинуться вправо;
  * **''center''** помещает обрамляющий блок в центр страницы по горизонтали.
</WRAP>

<WRAP column 30%>
//**__Ширина__**//

Ширина может быть указана (однако, только в div'ах) в: ''%, px, em, ex, pt, pc, cm, mm, in'', но в большинстве случаев вы будете использовать следующие варианты:

^тип^ пример^примечание^
^''%''|''30%''|имеет смысл использовать в «резиновой» вёрстке|
^''px''|''420px''| имеет смысл использовать при фиксированной ширине дизайна, а также если используемый контейнер содержит изображения определённой ширины|
^''em''|''20em''|имеет смысл использовать, если вы хотите, чтобы ваш обрамляющий блок мог масштабироваться в зависимости от размера шрифта в адаптивных дизайнах|

**Таблица** внутри колонки или блока будет всегда иметь **100% ширину**. Таким образом возможно масштабировать таблицы и менять их месторасположение.
</WRAP>

<wrap em>При использовании любого из этих классов для создания «плавающих» элементов может возникнуть ситуация, когда следующий текст выдаётся в пространство, где должны располагаться только «плавающие» контейнеры...</wrap>

<WRAP clear></WRAP>

Чтобы этого избежать, нужно просто добавить ''%%<WRAP clear></WRAP>%%'' после последней колонки.

Те же варианты **можно** использовать и со спанами (так как каждый «плавающий» элемент автоматически является блочным элементом), однако большого смысла в этом не будет. :!: Обычно указание значения ширины для спана не даёт никакого видимого эффекта, но может иметь значение при использовании float'ов.

:!: Внимание: Установка ширины элемента зачастую приводит к тому, что элемент выглядит по-разному и разрывает дизайн в некоторых браузерах. Если вы не являетесь специалистом в разработке сайтов, проблемы использования разных [[wp>Internet_Explorer_box_model_bug|блочных моделей]] могут быть вам непонятны. Просто попробуйте тестировать ваши колонки во всех основных браузерах и несколько уменьшите первоначальную ширину элементов.

Все эти варианты также применимы и с обрамляющими блоками типа [[#Блоки и примечания|блоков и примечаний]] (см. ниже).

=== Мультиколонки ===

<WRAP col3>
В современных браузерах (Firefox, Chrome и Safari) вы можете использовать мультиколонки. Просто используйте **''%%col2%%''** для 2 колонок, **''%%col3%%''** для 3 колонок, **''%%col4%%''** для 4 колонок, а **''%%col5%%''** для 5 колонок.

:!: Примечание: создать мультиколонку внутри спана не получится.
</WRAP>

==== Выравнивание ====

Можно использовать следующие типы выравнивания:

  * ''leftalign''
  * ''rightalign''
  * ''centeralign''
  * ''justify''

<WRAP centeralign>
Текст, выравненный по левому краю...
</WRAP>

<WRAP rightalign>
...и по правому краю.
</WRAP>

<code>
<WRAP centeralign>
Текст, выравненный по центру...
</WRAP>

<WRAP rightalign>
...и по правому краю.
</WRAP>
</code>

:!: Нельзя добавить выравнивание к span'ам.

==== Блоки и примечания ====

<WRAP round box 570px center>
//**__round box 570px center__**//

  * ''box'' создаёт блок вокруг контейнера, по умолчанию используя цвета из файла шаблона ''style.ini'' (''%%__background_alt__%%'' и ''%%__text__%%'');
  * любой из классов ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' создаёт специальный контейнер с предупреждением, помеченным соответствующей иконкой;
  * для классов ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' используются цвета сигнальной маркировки (без иконок);
  * ''round'' может добавляться к чему-угодно, имеющему цветную подложку или границу, однако работать такой код будет только в современных браузерах (не в Internet Explorer).
</WRAP>

<WRAP info 220px left>
//**Информация**//
<code><WRAP info></WRAP></code>
</WRAP>

<WRAP tip 220px left>
//**Подсказка**//
<code><WRAP tip></WRAP></code>
</WRAP>

<WRAP important 220px left>
//**Важно!**//
<code><WRAP important></WRAP></code>
</WRAP>

<WRAP alert 220px left>
//**Предупреждение!**//
<code><WRAP alert></WRAP></code>
</WRAP>

<WRAP round help 220px left>
//**Помощь**//
<code><WRAP round help></WRAP></code>
</WRAP>

<WRAP download 220px left>
//**Скачать**//
<code><WRAP download></WRAP></code>
</WRAP>

<WRAP todo 220px left>
//**Список дел**//
<code><WRAP todo></WRAP></code>
</WRAP>

<WRAP clear></WRAP>

**Оповещения об опасности:**

<WRAP danger 27% left>
//**Опасность**//
<code><WRAP danger></WRAP></code>
</WRAP>

<WRAP warning 27% left>
//**Предупреждение**//
<code><WRAP warning></WRAP></code>
</WRAP>

<WRAP caution 27% left>
//**Осторожно!**//
<code><WRAP caution></WRAP></code>
</WRAP>

<WRAP round notice 27% left>
//**Внимание!**//
<code><WRAP round notice></WRAP></code>
</WRAP>

<WRAP round safety 27% left>
//**Безопасно**//
<code><WRAP round safety></WRAP></code>
</WRAP>

<WRAP clear></WRAP>

Также блоки и примечания можно использовать внутри текстов со спанами, подобных этим: <wrap info>info</wrap>, <wrap help>help</wrap>, <wrap alert>alert</wrap>, <wrap important>important</wrap>, <wrap tip>tip</wrap>, <wrap download>download</wrap>, <wrap todo>todo</wrap> и<wrap round box>round box</wrap>, а также <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.

<code><wrap info>info</wrap>, <wrap help>help</wrap>, ...</code>

==== Маркирование ====

Вы можете выделить текст <wrap hi>ярким цветом</wrap>, <wrap lo>сделать более бледным</wrap> или <wrap em>специально выделить</wrap>.

<code>Вы можете выделить текст <wrap hi>ярким цветом</wrap>, <wrap lo>сделать более бледным</wrap> или <wrap em>специально выделить</wrap>.</code>

:!: В некоторых шаблонах такое выделение выглядит неаккуратным, поэтому рекомендуется действовать по ситуации.

==== Разное ====

=== indent — отступ вправо ===

<wrap indent>Данный текст будет смещён вправо.</wrap>

<code><wrap indent>Данный текст будет смещён вправо.</wrap></code>

=== outdent — отступ влево ===

<wrap outdent>Данный текст будет смещён влево.</wrap>

<code><wrap outdent>Данный текст будет смещён влево.</wrap></code>

=== prewrap ===

<WRAP prewrap 250px>
<code>
Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.
</code>
</WRAP>

<code>
<WRAP prewrap 250px>
<code>
Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.
</code>
</WRAP>
</code>

=== spoiler ===

Так выглядит спойлер: <wrap spoiler>Дарт Вейдер --- отец Люка.</wrap>

<code>Так выглядит спойлер: <wrap spoiler>Дарт Вейдер –-- отец Люка.</wrap></code>

Чтобы прочесть текст внутри блока спойлера, его достаточно просто выделить.

=== hide — скрытие текста ===

Следующий текст скрыт: <wrap hide>Иван, пожалуйста, проверьте это предложение.</wrap>

<code>Следующий текст скрыт: <wrap hide>Иван, пожалуйста, проверьте это предложение.</wrap></code>

:!: Внимание: скрываемый текст всё равно будет присутствовать в исходном коде, будет отображаться в старых браузерах и будет индексироваться поисковиками. Не используйте спойлеры для того, чтобы спрятать важные данные с его помощью!

=== pagebreak — разрыв страницы ===

Таким образом оформляется разрыв страницы: <WRAP pagebreak></WRAP>

<code>Таким образом оформляется разрыв страницы: <WRAP pagebreak></WRAP></code>

В браузере данный код не производит никакого визуального эффекта. Однако при печати, благодаря [[http://reference.sitepoint.com/css/page-break-after|разрыву страницы]] выводится новая страница.

=== nopagebreak ===

С помощью такого кода можно избежать разрыва страницы: <WRAP nopagebreak>много связанного текста (например, длинная таблица)</WRAP>

<code>С помощью такого кода можно избежать разрыва страницы: <WRAP nopagebreak>много связанного текста (например, длинная таблица)</WRAP></code>

В браузере данный код также не производит никакого визуального эффекта. Попробуем [[http://reference.sitepoint.com/css/page-break-inside|убрать разрыв страницы]] при выводе на печать.

=== noprint ===

<wrap noprint>Данный текст видно на экране, но он не выводится на печать.</wrap>

<code><wrap noprint>Данный текст видно на экране, но он не выводится на печать.</wrap></code>

=== onlyprint ===

<wrap onlyprint>Данный текст не видно на экране, но он выводится на печать.</wrap>

<code><wrap onlyprint>Данный текст не видно на экране, но он выводится на печать.</wrap></code>

==== Комбинирование и вложение ====

Вы можете комбинировать и вкладывать друг в друга все классы и все типы блоков. Например:

<WRAP box 350px right :en>
//**__Внешний блок отодвигается вправо__**//

<WRAP 165px left>
Внутренний вложенный блок отодвигается влево, он частично <wrap em hi>__вы__делен и __под__чёркнут, а также содержит <wrap notice>__примечание__</wrap>внутри себя</wrap>.
</WRAP>

Текст, располагающийся внутри внешнего правого блока под внутренним левым блоком.

<WRAP clear></WRAP>

<WRAP round tip>
Блок со скруглённой рамкой внизу, после ''clear''.
</WRAP>
</WRAP>

<code>
<WRAP box 350px right :en>
//**__Внешний блок отодвигается вправо__**//

<WRAP 165px left>
Внутренний вложенный блок отодвигается влево, он частично <wrap em hi>__вы__делен и __под__чёркнут, а также содержит <wrap notice>__примечание__</wrap>внутри себя</wrap>.
</WRAP>

Текст, располагающийся внутри внешнего правого блока под внутренним левым блоком.

<WRAP clear></WRAP>

<WRAP round tip>
Блок со скруглённой рамкой внизу, после ''clear''.
</WRAP>
</WRAP>
</code>

===== Язык и направление текста =====

Изменить язык и направление текста в обрамляющем блоке можно просто добавив двоеточие и код необходимого языка. Например:

<code>
<WRAP :he>
זה עברית. ((Перевод: «Это --- иврит», так, по крайней мере, утверждает <wrap :en>[[http://translate.google.com/|Google Translate]]</wrap>.))
</WRAP>
</code>

<WRAP :he>
זה עברית. ((Перевод: «Это --- иврит», так, по крайней мере, утверждает <wrap :en>[[http://translate.google.com/|Google Translate]]</wrap>.))
</WRAP>

Направление текста (''rtl'' --- справа налево или ''ltr'' --- слева направо) подставится автоматически и будет зависеть только от выбранного языка. Этот список поддерживаемых в настоящий момент языков взят со страницы: <wrap :en>[[wpmeta>Template:List_of_language_names_ordered_by_code?setlang=ru|Template:List of language names ordered by code]]</wrap>. (Если вы укажете язык не входящий в список, тег просто не сработает).

===== О переводе =====

  - Перевод осуществлён [[http://www.proz.com/translator/822770|Анной Мартыновой]] и опубликован под лицензией [[http://creativecommons.org/licenses/by-sa/3.0/|CC-BY-SA]].
  - Описание актуально для версии [[https://github.com/selfthinker/dokuwiki_plugin_wrap/releases|v2011-05-15]].