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

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


wiki:plugin:typography

Это старая версия документа!


Typography для «ДокуВики»

Обширные возможности стилизации текста с помощью таких CSS-правил, как тип шрифта, размер, толщина и цвет текста.

Совместимость

  • 2024-02-06 «Kaos» да
  • 2023-04-04 «Jack Jackrum» да
  • 2022-07-31 «Igor» да
  • 2020-07-29 «Hogfather» да

Монтаж

Используйте менеджер плагинов для установки или…

  1. скачать zip-файл
  2. распаковать его в<dokuwiki>/lib/plugins/
  3. войдите как администратор и измените плагин в менеджере конфигурации

Примеры/Использование

Меню плагина Возможности плагина

Синтаксис

<ff Arial>Arial</ff>\\  
<ff TimesNewRoman>Times New Roman</ff>\\  
<ff Impact>Impact</ff>\\  
<ff BrushScriptMS>Brush Script MS</ff>\\  
<ff Georgia>Georgia</ff>\\  
<ff Tangerine; fs:30px>Tangerine</ff>\\  
<ff Tangerine; fs:48px>Making the Web Beautiful!</ff>
<ff Calligraph; fs:30px>Шрифт Calligraph</ff>\\  
<ff DS Yermak_D; fs:20px>Шрифт DS Yermak_D</ff>\\  
<ff CyrillicGoth; fs:20px>Шрифт CyrillicGoth</ff>\\  
<ff Tangerine; fs:48px>Dokuwiki's Main Configuration File Tangerine 48px</ff>\\  
\\   
<ff : Georgia; MS Serif; serif><fs:36px; lh:1.1>There is nothing either good or bad,\\  
but thinking makes it so. </fs>\\  
<fs:smaller;>//-- William Shakespeare, “Hamlet”, Act 2 scene 2//</fs></ff>

Arial
Times New Roman
Impact
Brush Script MS
Georgia
Tangerine
Шрифт Calligraph
Шрифт DS Yermak_D
Шрифт CyrillicGoth
Dokuwiki's Main Configuration File Tangerine 48px

There is nothing either good or bad,
but thinking makes it so.

– William Shakespeare, “Hamlet”, Act 2 scene 2

Функции

Плагин Typography расширяет разметку «ДокуВики» за счет возможностей набора текста. Парный тег разметки включает в себя в качестве параметров CSS-правила, такие как тип шрифта, размер, толщина и цвет текста. Аналогично CSS-синтаксису параметры состоят из пар «свойство:значение», отделяемых друг от друга точкой с запятой (;), однако последняя в списке может быть опущена. Между тегом и его параметрами ставится один пробел, после точки с запятой также можно в эстетических целях добавлять пробел. Вместо полного имени свойства можно использовать сокращённое. Значения поддерживают любые CSS-единицы, включая словарные (px, em, %, x-small и пр.)

Некоторые сокращения сами доступны как парные теги, например, <ff> (тип шрифта), <fs> (размер), <fc> (цвет), <bg> (цвет фона), <fw> (толщина). В качестве разделителя можно использовать как двоеточие, так и пробел. За счёт полного совпадения функционала и синтаксиса плагин Typography свободно, без правок статей может заменить плагины FontFamily, FontSize2 и FontColor.

Короткое имя CSS-cвойство Описание
fc color цвет шрифта
bg background-color цвет фона шрифта
fs font-size размер шрифта
fw font-weight толщина шрифта (толстые или тонкие символы в тексте)
fv font-variant капитель (уменьшенные прописные буквы)
ff font-family семейство шрифтов (если содержит пробелы и символы, отличные от ASCII - должно быть заключено в одинарные кавычки)
lh line-height пространство между строками (интерлиньяж)
ls letter-spacing пространство между символами (апрош или интерлеттраж)
ws word-spacing пространство между словами (спейс)
sp white-space указывает, как обрабатывается пробел (сохранить или свернуть)
va vertical-align вертикальное выравнивание
- text-transform режим заглавных букв в тексте (заглавные, прописные или строчные)
- text-shadow тень у текста
wf (web-font) класс веб-шрифта (с префиксом «wf-»)

Иногда встроенные стили необходимы, когда вы создаете страницу вручную. Однако вам следует по возможности избегать их для «семантической разметки», улучшения ремонтопригодности и возможности повторного использования. Плагин wrap предоставляет наиболее мощный и гибкий метод для определения атрибута класса.

Использование короткого синтаксиса с меню панели инструментов

Плагин Typography предоставляет синтаксис короткого имени (или отдельного свойства), который совместим с fontfamily, fontcolor и fontsize2. Если вы включили эти три плагина, короткий синтаксис обрабатывается соответствующими плагинами, а не этим плагином. Этот короткий синтаксис доступен через значки панели инструментов: . Пример одного параметра:

<typo font-size:large;>Large</typo>, 
<typo fs:x-large>Very large</typo>, 
<fs:xx-large>Huge</fs>, and 
<fs smaller>smaller</fs> size text

Example 1

Пример с несколькими параметрами:

<typo fs:larger; fw:bold; ff:serif>Bold serif</typo>, 
<fs:large; fv:small-caps>Small-caps</fs> text

Example 2

Синтаксис вложенности:

<ff:'Georgia', 'MS Serif', serif><fs:36px; lh:1.1>
There is nothing either good or bad, \\ but thinking makes it so.
</fs>\\
<fs:smaller;>//-- William Shakespeare, “Hamlet”, Act 2 scene 2//</fs></ff>

Example 3

Использование веб-шрифта

Для начала работы с Google Fonts API, вы можете добавить ссылку на таблицу стилей для запроса желаемого веб-шрифта(ов) в файле conf/meta.html, например:

conf/meta.html
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.wf-tangerine { font-family: Tangerine, serif; }
</style>

Затем вы можете использовать имя шрифта (например, Tangerine) в значении font-family:

<ff Tangerine; fs:48px>Making the Web Beautiful!</ff>
<wf:tangerine; fs:48px>Making the Web Beautiful!</wf>

Example 4


Поддержка рендерера

Начиная с выпуска 2014-10-13 этот плагин также поддерживает экспорт в текстовый формат открытого документа ODT. Слева вы видите снимок экрана, сделанный с тестовой страницы типографики, открытой в браузере, с правой стороны вы видите страницу, экспортированную в ODT:

рендеринг XHTML рендеринг ODT

Как видите, в настоящее время существуют некоторые ограничения на экспорт ODT:

  • изменение размера текста в настоящее время не поддерживается Изменение размера текста поддерживается с выпуска 2015-04-02.
  • после закрытия тега типографики высотой строки начинается новый абзац. ODT поддерживает только установку высоты строки для каждого абзаца. Средство визуализации XHTML остается в той же строке после закрытия тега.
  • межсловный интервал не поддерживается форматом ODT
  • параметры пробела в настоящее время не поддерживаются

Примечание. Для функции экспорта ODT плагина типографики требуется PHP 5 >= 5.3.0.


Правки плагина

Добавлена регистрация обработчика события fontname

action.php
  1. /* Добавлена регистрация обработчика события fontname*/
  2. if (plugin_isdisabled('fontname')) {
  3. $controller->register_hook('TOOLBAR_DEFINE', 'AFTER', $this, 'fontNameToolbar', array());
  4. }

Раскоментированы семейства шрифтов sans-serif и cursive и добавлены fantasy и monospace

action.php
  1. /*Раскоментированы семейства шрифтов sans-serif и cursive*/
  2. 'sans-serif' => 'sans-serif',
  3. 'cursive' => 'cursive',
  4. /*Добавлены семейства шрифтов fantasy и monospace*/
  5. 'fantasy' => 'fantasy',
  6. 'monospace' => 'monospace',

Добавлена кнопка FontName (примеры шрифтов) на панель инструментов.

action.php
  1. /**
  2.   * Adds FontName toolbar button
  3. * Добавляет кнопку FontName на панель инструментов.
  4.   * @see https://www.dokuwiki.org/plugin:
  5.   */
  6. public function fontNameToolbar(Doku_Event $event, $param)
  7. {
  8. $options = array(
  9. 'Arial' => 'Arial',
  10. 'Calligraph' => 'Calligraph',
  11. 'DS Yermak_D' => 'DS Yermak_D',
  12. 'CyrillicGoth' => 'CyrillicGoth',
  13. 'Times New Roman' => 'TimesNewRoman',
  14. 'Impact' => 'Impact',
  15. 'Brush Script MS' => 'BrushScriptMS',
  16. 'Georgia' => 'Georgia',
  17. 'Tangerine' => 'Tangerine',
  18. 'Tangerine 48px' => 'Tangerine; fs:48px',
  19. 'Multiple options' => ': Georgia; MS Serif; serif; fs:36px; lh:1.1',
  20. 'Nesting syntax' => ': Georgia; MS Serif; serif><fs:36px; lh:1.1>There is nothing either good or bad, but thinking makes it so. </fs><fs:smaller;>//-- William Shakespeare, “Hamlet”, Act 2 scene 2//</fs',
  21.  
  22. );
  23. $button = array(
  24. 'type' => 'picker',
  25. 'title' => $this->getLang('fn_picker'),
  26. 'icon' => DOKU_REL.'lib/plugins/typography/images/fontname/picker.png',
  27. 'list' => array()
  28. );
  29. foreach ($options as $familyName => $familyValue) {
  30. $button['list'][] = array(
  31. 'type' => 'format',
  32. 'title' => $this->getLang('fn_'.$familyName),
  33. 'sample' => $this->getLang('fn_'.$familyName.'_sample'),
  34. 'icon' => DOKU_REL.'lib/plugins/typography/images/fontname/'.$familyName.'.png',
  35. 'open' => '<ff '.$familyValue.'>',
  36. 'close' => '</ff>',
  37. );
  38. }
  39. $event->data[] = $button;
  40.  
  41.  
  42.  
  43. }

файл fontcolor.php

Удалено условие для корректного отображения цветов текста

//if ($isSameHost && $isColorSet) {
// }
fontcolor.php
  1. <?php
  2. /**
  3.  * DokuWiki Plugin Typography; Syntax typography fontcolor
  4.  *
  5.  * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
  6.  * @author Satoshi Sahara <sahara.satoshi@gmail.com>
  7.  *
  8.  * provide fontcolor plugin syntax compatibility
  9.  * @see also https://www.dokuwiki.org/plugin:fontcolor
  10.  */
  11.  
  12. require_once(dirname(__FILE__).'/base.php');
  13.  
  14. class syntax_plugin_typography_fontcolor extends syntax_plugin_typography_base
  15. {
  16. /**
  17.   * Connect pattern to lexer
  18.   */
  19. public function preConnect()
  20. {
  21. // drop 'syntax_' from class name
  22. $this->mode = substr(get_class($this), 7);
  23.  
  24. // syntax pattern
  25. $this->pattern[1] = '<fc\b.*?>(?=.*?</fc>)';
  26. $this->pattern[4] = '</fc>';
  27. }
  28.  
  29. public function connectTo($mode)
  30. {
  31. if (plugin_isdisabled('fontcolor')) {
  32. $this->Lexer->addEntryPattern($this->pattern[1], $mode, $this->mode);
  33. }
  34. }
  35.  
  36. public function postConnect()
  37. {
  38. if (plugin_isdisabled('fontcolor')) {
  39. $this->Lexer->addExitPattern($this->pattern[4], $this->mode);
  40. }
  41. }
  42.  
  43. }

Заменины и добавлены новые иконки

Обновление

Для обновления удалите исходную папку lib/plugins/typography и установите новую версию, как указано выше.

Файл для загрузки

Лицензия

Только авторизованные участники могут оставлять комментарии.
wiki/plugin/typography.1737243114.txt.gz · Последнее изменение: 2025/01/19 02:31 — vladpolskiy