Содержание

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

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

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

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

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

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

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

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

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

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

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

Пожалуйста, имейте в виду, что некоторые эффекты невозможно получить, если спаны набраны в нижнем регистре:

выравнивание (включая варианты выравнивания, созданные с помощью изменения направления текста)
мультиколонки
и ширина

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

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

Колонки и float'ы

Колонки легко добавляются с введением класса column и указанием ширины. Например:

<WRAP column 30%>...контент...</WRAP>

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

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

Ширина

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

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

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

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

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

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

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

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

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

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

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

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

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

leftalign
rightalign
centeralign
justify

Текст, выравненный по левому краю…

…и по правому краю.

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

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

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

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

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 info></WRAP>

Подсказка

<WRAP tip></WRAP>

Важно!

<WRAP important></WRAP>

Предупреждение!

<WRAP alert></WRAP>

Помощь

<WRAP round help></WRAP>

Скачать

<WRAP download></WRAP>

Список дел

<WRAP todo></WRAP>

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

Опасность

<WRAP danger></WRAP>

Предупреждение

<WRAP warning></WRAP>

Осторожно!

<WRAP caution></WRAP>

Внимание!

<WRAP round notice></WRAP>

Безопасно

<WRAP round safety></WRAP>

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

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

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

Вы можете выделить текст ярким цветом, сделать более бледным или специально выделить.

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

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

Разное

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

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

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

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

Данный текст будет смещён влево.

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

prewrap

Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.

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

spoiler

Так выглядит спойлер: Дарт Вейдер — отец Люка.

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

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

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

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

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

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

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

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

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

В браузере данный код не производит никакого визуального эффекта. Однако при печати, благодаря разрыву страницы выводится новая страница.

nopagebreak

С помощью такого кода можно избежать разрыва страницы:

много связанного текста (например, длинная таблица)

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

В браузере данный код также не производит никакого визуального эффекта. Попробуем убрать разрыв страницы при выводе на печать.

noprint

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

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

onlyprint

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

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

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

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

Внешний блок отодвигается вправо

Внутренний вложенный блок отодвигается влево, он частично выделен и подчёркнут, а также содержит примечаниевнутри себя.

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

Блок со скруглённой рамкой внизу, после clear.

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

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

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

<WRAP clear></WRAP>

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

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

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

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

זה עברית. ¹⁾

Направление текста (rtl — справа налево или ltr — слева направо) подставится автоматически и будет зависеть только от выбранного языка. Этот список поддерживаемых в настоящий момент языков взят со страницы: Template:List of language names ordered by code. (Если вы укажете язык не входящий в список, тег просто не сработает).

О переводе

Перевод осуществлён Анной Мартыновой и опубликован под лицензией CC-BY-SA.

См. также

Справочный раздел

¹⁾ Перевод: «Это — иврит», так, по крайней мере, утверждает Google Translate.