Инструменты пользователя

Инструменты сайта


wiki:wrap_example

Примеры для плагина 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>

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

Вы можете эмулировать заголовок 1-го уровня с помощью курсива, выделения жирным или подчёркивания, например, так:

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

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

Заголовок 2-го уровня без подчёркивания выглядит, например, так:

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

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

**//Нет заголовка//**

Разные варианты float’ов

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

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

Ширина

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

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

Таблица внутри колонки или блока будет всегда иметь 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>
Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.

</WRAP> </code>

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 :en>
//**__Внешний блок отодвигается вправо__**//

<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>

זה עברית. 1)

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

О переводе

  1. Перевод осуществлён Анной Мартыновой и опубликован под лицензией CC-BY-SA.
  2. Описание актуально для версии v2011-05-15.
1)
Перевод: «Это — иврит», так, по крайней мере, утверждает Google Translate.
wiki/wrap_example.txt · Последние изменения: 2016/06/07 19:28 (внешнее изменение)