Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
wiki:plugin:wrap [2024/08/09 00:10] – [Лицензия] vladpolskiy | wiki:plugin:wrap [2025/02/01 10:00] (текущий) – внешнее изменение 127.0.0.1 |
---|
* %%//**__Большой подчеркнутый заголовок__**//%% (В примечаниях по технике безопасности они будут выглядеть немного иначе.) | * %%//**__Большой подчеркнутый заголовок__**//%% (В примечаниях по технике безопасности они будут выглядеть немного иначе.) |
* %%//**Малый заголовок**//%% | * %%//**Малый заголовок**//%% |
* не включайте ~~DISCUSSION~~ в блок WRAP <color #ed1c24>noprint</color> | * не включайте ~~DISCUSSION~~ в блок WRAP <fc #ed1c24>noprint</fc> |
=====Монтаж===== | =====Монтаж===== |
Используйте менеджер плагинов для установки или… | Используйте менеджер плагинов для установки или… |
| **''twothirds''** | подходит для двух столбцов подряд при использовании вместе с ''third'', один шириной 1/3, а другой шириной 2/3 | | | **''twothirds''** | подходит для двух столбцов подряд при использовании вместе с ''third'', один шириной 1/3, а другой шириной 2/3 | |
| **''quarter''** | помещается в четыре столбца подряд, следует использовать в четырехугольниках | | | **''quarter''** | помещается в четыре столбца подряд, следует использовать в четырехугольниках | |
^ **__выравнивания__ — аналогично <color #22b14c>divalign , columns , styler</color> —** :!: **не работают с промежутками!** || | ^ **__выравнивания__ — аналогично <fc #22b14c>divalign , columns , styler</fc> —** :!: **не работают с промежутками!** || |
| **''leftalign''** | выравнивает текст по левому краю | | | **''leftalign''** | выравнивает текст по левому краю | |
| **''rightalign''** | выравнивает текст по правому краю | | | **''rightalign''** | выравнивает текст по правому краю | |
| **''centeralign''** | центрирует текст | | | **''centeralign''** | центрирует текст | |
| **''justify''** | оправдывает текст | | | **''justify''** | оправдывает текст | |
^ **__коробки и заметки__ - аналогично <color #22b14c>коробке , заметке , подсказке</color>** || | ^ **__коробки и заметки__ - аналогично <fc #22b14c>коробке , заметке , подсказке</fc>** || |
| **''box''** | создает рамку вокруг контейнера (использует цвета из ''style.ini'') | | | **''box''** | создает рамку вокруг контейнера (использует цвета из ''style.ini'') | |
| **''info''** (было ''information'' в предыдущих версиях) | создает синее поле со значком информации | | | **''info''** (было ''information'' в предыдущих версиях) | создает синее поле со значком информации | |
| **''notice''** | создает синее уведомление о безопасности | | | **''notice''** | создает синее уведомление о безопасности | |
| **''safety''** | создает зеленую заметку о безопасности | | | **''safety''** | создает зеленую заметку о безопасности | |
^ **__метки__ — похожие на выделение , <color #22b14c>важный_параграф , важный текст</color> ** || | ^ **__метки__ — похожие на выделение , <fc #22b14c>важный_параграф , важный текст</fc> ** || |
| **''hi''** | помечает текст как выделенный | | | **''hi''** | помечает текст как выделенный | |
| **''lo''** | помечает текст как менее значимый | | | **''lo''** | помечает текст как менее значимый | |
| **''em''** | помечает текст как особо выделенный | | | **''em''** | помечает текст как особо выделенный | |
^ **__разнообразный__** || | ^ **__разнообразный__** || |
| **''clear''** | similar to [[clearfloat]], похоже на <color #22b14c>clearfloat</color> , желательно использовать с div, т.е. с прописными ''%%<WRAP>%%''буквами | | | **''clear''** | similar to [[clearfloat]], похоже на <fc #22b14c>clearfloat</fc> , желательно использовать с div, т.е. с прописными ''%%<WRAP>%%''буквами | |
| **''tabs''** | если обернуть список ссылок, они будут отображаться как вкладки | | | **''tabs''** | если обернуть список ссылок, они будут отображаться как вкладки | |
| **''hide''** | скрывает текст для CSS (текст по-прежнему будет отображаться в исходном коде, в несовременных браузерах и доступен для поиска) | | | **''hide''** | скрывает текст для CSS (текст по-прежнему будет отображаться в исходном коде, в несовременных браузерах и доступен для поиска) | |
| **''noprint''** | выводит текст на экран, но не на печать, аналогично <color #22b14c>noprint</color> | | | **''noprint''** | выводит текст на экран, но не на печать, аналогично <fc #22b14c>noprint</fc> | |
| **''onlyprint''** | отображает текст только в печатном виде, но не на экране | | | **''onlyprint''** | отображает текст только в печатном виде, но не на экране | |
| **''pagebreak''** | принудительно открывает новую страницу в распечатках (не отображается на экране), аналогично <color #22b14c>разрыву страницы</color> | | | **''pagebreak''** | принудительно открывает новую страницу в распечатках (не отображается на экране), аналогично <fc #22b14c>разрыву страницы</fc> | |
| **''nopagebreak''** | пытается избежать разрыва страницы в распечатках (не виден на экране) | | | **''nopagebreak''** | пытается избежать разрыва страницы в распечатках (не виден на экране) | |
| **''spoiler''** | показывает белый текст на белом фоне, который раскрывается только при его выделении; похоже на <color #22b14c>скрыть</color> | | | **''spoiler''** | показывает белый текст на белом фоне, который раскрывается только при его выделении; похоже на <fc #22b14c>скрыть</fc> | |
| **''button''** | при обертывании ссылки стилизует ее как кнопку | | | **''button''** | при обертывании ссылки стилизует ее как кнопку | |
| **''tablewidth''** | устанавливает ширину таблиц внутри в зависимости от ширины обертки, частично заменяет <color #22b14c>ширину таблицы</color> | | | **''tablewidth''** | устанавливает ширину таблиц внутри в зависимости от ширины обертки, частично заменяет <fc #22b14c>ширину таблицы</fc> | |
| **''indent''** | делает отступ в тексте, может использоваться вместо <color #22b14c>табуляции</color> | | | **''indent''** | делает отступ в тексте, может использоваться вместо <fc #22b14c>табуляции</fc> | |
| **''outdent''** | «выступающий» текст, может быть частично использован вместо <color #22b14c>«выступающий»</color> | | | **''outdent''** | «выступающий» текст, может быть частично использован вместо <fc #22b14c>«выступающий»</fc> | |
| **''prewrap''** | оборачивает текст внутри предварительно отформатированных блоков кода, аналогично <color #22b14c>wpre</color> | | | **''prewrap''** | оборачивает текст внутри предварительно отформатированных блоков кода, аналогично <fc #22b14c>wpre</fc> | |
| |
Возможно, вам придется настроить несколько классов в соответствии с потребностями вашего шаблона, особенно ''hi'', ''lo'' and ''em''. Если у вас темная или ярко окрашенная тема, используйте ''darkTpl'' [[#configuration_options|параметр конфигурации .]]. | Возможно, вам придется настроить несколько классов в соответствии с потребностями вашего шаблона, особенно ''hi'', ''lo'' and ''em''. Если у вас темная или ярко окрашенная тема, используйте ''darkTpl'' [[#configuration_options|параметр конфигурации .]]. |
* **Author:** [[anika@selfthinker.org|Anika Henke]] | * **Author:** [[anika@selfthinker.org|Anika Henke]] |
* **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]] | * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]] |
=====Переведенно на русский язык===== | |
====== Примеры для плагина 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 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]]. | |
| |