| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| wiki:plugin:typography [2025/01/19 01:44] – [Файл для загрузки] vladpolskiy | wiki:plugin:typography [2025/01/19 02:47] (текущий) – [Использование короткого синтаксиса с меню панели инструментов] vladpolskiy |
|---|
| - войдите как администратор и измените плагин в менеджере конфигурации | - войдите как администратор и измените плагин в менеджере конфигурации |
| =====Примеры/Использование===== | =====Примеры/Использование===== |
| | Меню плагина |
| | {{:wiki:plugin:plugin_typography_2.png?|}} |
| | Возможности плагина |
| {{:wiki:plugin:plugin_typography_1.png?|}} | {{:wiki:plugin:plugin_typography_1.png?|}} |
| ===== Синтаксис ===== | ===== Синтаксис ===== |
| <ff BrushScriptMS>Brush Script MS</ff>\\ | <ff BrushScriptMS>Brush Script MS</ff>\\ |
| <ff Georgia>Georgia</ff>\\ | <ff Georgia>Georgia</ff>\\ |
| <ff Tangerine; fs:30px>Tangerine</ff>\\ | <ff Tangerine; fs:30px>Tangerin</ff>\\ |
| <ff Calligraph; fs:30px>Шрифт Calligraph</ff>\\ | <ff Calligraph; fs:30px>Шрифт Calligraph</ff>\\ |
| <ff DS Yermak_D; fs:20px>Шрифт DS Yermak_D</ff>\\ | <ff DS Yermak_D; fs:20px>Шрифт DS Yermak_D</ff>\\ |
| <ff BrushScriptMS>Brush Script MS</ff>\\ | <ff BrushScriptMS>Brush Script MS</ff>\\ |
| <ff Georgia>Georgia</ff>\\ | <ff Georgia>Georgia</ff>\\ |
| <ff Tangerine; fs:30px>Tangerine</ff>\\ | <ff Tangerine; fs:30px>Tangerin</ff>\\ |
| <ff Calligraph; fs:30px>Шрифт Calligraph</ff>\\ | <ff Calligraph; fs:30px>Шрифт Calligraph</ff>\\ |
| <ff DS Yermak_D; fs:20px>Шрифт DS Yermak_D</ff>\\ | <ff DS Yermak_D; fs:20px>Шрифт DS Yermak_D</ff>\\ |
| but thinking makes it so. </fs>\\ | but thinking makes it so. </fs>\\ |
| <fs:smaller;>//-- William Shakespeare, “Hamlet”, Act 2 scene 2//</fs></ff> | <fs:smaller;>//-- William Shakespeare, “Hamlet”, Act 2 scene 2//</fs></ff> |
| | ===== Функции ===== |
| | |
| | Плагин Typography расширяет разметку «ДокуВики» за счет возможностей набора текста. Парный тег разметки <typo …> </typo> включает в себя в качестве параметров 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-") | |
| | |
| | Иногда встроенные стили необходимы, когда вы создаете страницу вручную. Однако вам следует по возможности избегать их для «семантической разметки», улучшения ремонтопригодности и возможности повторного использования. Плагин [[wiki:plugin:wrap]] предоставляет наиболее мощный и гибкий метод для определения атрибута класса. |
| | ==== Использование короткого синтаксиса с меню панели инструментов ==== |
| | |
| | Плагин Typography предоставляет синтаксис короткого имени (или отдельного свойства), который совместим с [[plugin:fontfamily]], [[plugin:fontcolor]] и [[plugin:fontsize2]]. Если вы включили эти три плагина, короткий синтаксис обрабатывается соответствующими плагинами, а не этим плагином. Этот короткий синтаксис доступен через значки панели инструментов: |
| | {{https://raw.githubusercontent.com/ssahara/dw-plugin-typography/master/images/fontfamily/picker.png}} |
| | {{https://raw.githubusercontent.com/ssahara/dw-plugin-typography/master/images/fontcolor/picker.png}} |
| | {{https://raw.githubusercontent.com/ssahara/dw-plugin-typography/master/images/fontsize/picker.png}}. |
| | **Пример одного параметра:** |
| | |
| | <file txt> |
| | <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 |
| | </file> |
| | |
| | {{https://raw.githubusercontent.com/ssahara/dw-plugin-typography/master/example/typography-example1.png|Example 1}} |
| | |
| | **Пример с несколькими параметрами:** |
| | |
| | <file txt> |
| | <typo fs:larger; fw:bold; ff:serif>Bold serif</typo>, |
| | <fs:large; fv:small-caps>Small-caps</fs> text |
| | </file> |
| | |
| | {{https://raw.githubusercontent.com/ssahara/dw-plugin-typography/master/example/typography-example2.png|Example 2}} |
| | |
| | **Синтаксис вложенности:** |
| | |
| | <file txt> |
| | <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> |
| | </file> |
| | |
| | {{https://raw.githubusercontent.com/ssahara/dw-plugin-typography/master/example/typography-example3.png|Example 3}} |
| | |
| | **Использование веб-шрифта** |
| | |
| | Для [[https://developers.google.com/fonts/docs/getting_started|начала работы с Google Fonts API]], вы можете добавить ссылку на таблицу стилей для запроса желаемого веб-шрифта(ов) в файле [[template:dokuwiki#supported_include_hooks|conf/meta.html]], например: |
| | <file txt conf/meta.html> |
| | <link rel="stylesheet" |
| | href="https://fonts.googleapis.com/css?family=Tangerine"> |
| | <style> |
| | .wf-tangerine { font-family: Tangerine, serif; } |
| | </style> |
| | |
| | </file> |
| | |
| | Затем вы можете использовать имя шрифта (например, Tangerine) в значении font-family: |
| | <file> |
| | <ff Tangerine; fs:48px>Making the Web Beautiful!</ff> |
| | <wf:tangerine; fs:48px>Making the Web Beautiful!</wf> |
| | </file> |
| | |
| | <ff Tangerine; fs:48px>Tangerine 48px</ff> |
| | <wf:tangerine; fs:48px>Making the Web Beautiful!</wf> |
| | |
| | |
| | |
| | ---- |
| | ===== Поддержка рендерера ===== |
| | |
| | Начиная с выпуска 2014-10-13 этот плагин также поддерживает экспорт в текстовый формат открытого документа [[plugin:odt|ODT]]. Слева вы видите снимок экрана, сделанный с тестовой страницы типографики, открытой в браузере, с правой стороны вы видите страницу, экспортированную в ODT: |
| | |
| | {{https://raw.github.com/ssahara/dw-plugin-typography/master/example/TypographyXHTMLRendering.png?300|рендеринг XHTML}} |
| | {{ https://raw.github.com/ssahara/dw-plugin-typography/master/example/TypographyODTRendering.png?300|рендеринг ODT}} |
| | |
| | Как видите, в настоящее время существуют некоторые ограничения на экспорт ODT: |
| | |
| | * <del> изменение размера текста в настоящее время не поддерживается </del> Изменение размера текста поддерживается с выпуска 2015-04-02. |
| | * после закрытия тега типографики высотой строки начинается новый абзац. ODT поддерживает только установку высоты строки для каждого абзаца. Средство визуализации XHTML остается в той же строке после закрытия тега. |
| | * межсловный интервал не поддерживается форматом ODT |
| | * параметры пробела в настоящее время не поддерживаются |
| | |
| | Примечание. Для функции экспорта ODT плагина типографики требуется PHP 5 >= 5.3.0. |
| | |
| | ---- |
| |
| =====Правки плагина===== | =====Правки плагина===== |
| | Добавлена регистрация обработчика события fontname |
| | <code php action.php [enable_line_numbers="true", start_line_numbers_at="24"]> |
| | /* Добавлена регистрация обработчика события fontname*/ |
| | if (plugin_isdisabled('fontname')) { |
| | $controller->register_hook('TOOLBAR_DEFINE', 'AFTER', $this, 'fontNameToolbar', array()); |
| | } |
| | </code> |
| | Раскоментированы семейства шрифтов sans-serif и cursive и добавлены fantasy и monospace |
| | <code php action.php [enable_line_numbers="true", start_line_numbers_at="97"]> |
| | /*Раскоментированы семейства шрифтов sans-serif и cursive*/ |
| | 'sans-serif' => 'sans-serif', |
| | 'cursive' => 'cursive', |
| | /*Добавлены семейства шрифтов fantasy и monospace*/ |
| | 'fantasy' => 'fantasy', |
| | 'monospace' => 'monospace', |
| | </code> |
| | {{:wiki:plugin:plugin_typography_5.png?|}} |
| | Добавлена кнопка FontName (примеры шрифтов) на панель инструментов. |
| | <code php action.php [enable_line_numbers="true", start_line_numbers_at="161"]> |
| | /** |
| | * Adds FontName toolbar button |
| | * Добавляет кнопку FontName на панель инструментов. |
| | * @see https://www.dokuwiki.org/plugin: |
| | */ |
| | public function fontNameToolbar(Doku_Event $event, $param) |
| | { |
| | $options = array( |
| | 'Arial' => 'Arial', |
| | 'Calligraph' => 'Calligraph', |
| | 'DS Yermak_D' => 'DS Yermak_D', |
| | 'CyrillicGoth' => 'CyrillicGoth', |
| | 'Times New Roman' => 'TimesNewRoman', |
| | 'Impact' => 'Impact', |
| | 'Brush Script MS' => 'BrushScriptMS', |
| | 'Georgia' => 'Georgia', |
| | 'Tangerine' => 'Tangerine', |
| | 'Tangerine 48px' => 'Tangerine; fs:48px', |
| | 'Multiple options' => ': Georgia; MS Serif; serif; fs:36px; lh:1.1', |
| | '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', |
| |
| | ); |
| | $button = array( |
| | 'type' => 'picker', |
| | 'title' => $this->getLang('fn_picker'), |
| | 'icon' => DOKU_REL.'lib/plugins/typography/images/fontname/picker.png', |
| | 'list' => array() |
| | ); |
| | foreach ($options as $familyName => $familyValue) { |
| | $button['list'][] = array( |
| | 'type' => 'format', |
| | 'title' => $this->getLang('fn_'.$familyName), |
| | 'sample' => $this->getLang('fn_'.$familyName.'_sample'), |
| | 'icon' => DOKU_REL.'lib/plugins/typography/images/fontname/'.$familyName.'.png', |
| | 'open' => '<ff '.$familyValue.'>', |
| | 'close' => '</ff>', |
| | ); |
| | } |
| | $event->data[] = $button; |
| | |
| | |
| | |
| | } |
| | </code> |
| | {{:wiki:plugin:plugin_typography_4.png?|}} |
| | ====файл fontcolor.php==== |
| | Удалено условие для корректного отображения цветов текста |
| | <file> |
| | //if ($isSameHost && $isColorSet) { |
| | // } |
| | </file> |
| | <code php fontcolor.php [enable_line_numbers="true"]> |
| | <?php |
| | /** |
| | * DokuWiki Plugin Typography; Syntax typography fontcolor |
| | * |
| | * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) |
| | * @author Satoshi Sahara <sahara.satoshi@gmail.com> |
| | * |
| | * provide fontcolor plugin syntax compatibility |
| | * @see also https://www.dokuwiki.org/plugin:fontcolor |
| | */ |
| | |
| | require_once(dirname(__FILE__).'/base.php'); |
| | |
| | class syntax_plugin_typography_fontcolor extends syntax_plugin_typography_base |
| | { |
| | /** |
| | * Connect pattern to lexer |
| | */ |
| | public function preConnect() |
| | { |
| | // drop 'syntax_' from class name |
| | $this->mode = substr(get_class($this), 7); |
| | |
| | // syntax pattern |
| | $this->pattern[1] = '<fc\b.*?>(?=.*?</fc>)'; |
| | $this->pattern[4] = '</fc>'; |
| | } |
| | |
| | public function connectTo($mode) |
| | { |
| | if (plugin_isdisabled('fontcolor')) { |
| | $this->Lexer->addEntryPattern($this->pattern[1], $mode, $this->mode); |
| | } |
| | } |
| | |
| | public function postConnect() |
| | { |
| | if (plugin_isdisabled('fontcolor')) { |
| | $this->Lexer->addExitPattern($this->pattern[4], $this->mode); |
| | } |
| | } |
| | |
| | } |
| | |
| | </code> |
| | {{:wiki:plugin:plugin_typography_3.png?|}} |
| | Заменины и добавлены новые иконки |
| |
| =====Обновление===== | =====Обновление===== |
| {{ :wiki:plugin:typography.zip |typography.zip}} | {{ :wiki:plugin:typography.zip |typography.zip}} |
| =====Лицензия===== | =====Лицензия===== |
| * **Author:** [[dokuwiki@revolutionarts.de| Sascha Klawohn ]] | * **Author:** [[sahara.satoshi@gmail.com| Pawel Piekarski, Satoshi Sahara ]] |
| | * **Edit:** [[polskiyvn@gmail.com| VladPolskiy ]] |
| * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]] | * **License:** [[http://www.opensource.org/licenses/gpl-license.php|GNU GPL v2]] |
| | [[https://www.dokuwiki.org/ru:plugin:typography|Ссылка на оригинальную статью]] |
| |
| |
| |