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

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


wiki:plugin:typography

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия
Предыдущая версия
wiki:plugin:typography [2025/01/19 01:35] – [Совместимость] vladpolskiywiki:plugin:typography [2025/01/19 02:47] (текущий) – [Использование короткого синтаксиса с меню панели инструментов] vladpolskiy
Строка 7: Строка 7:
 =====Совместимость===== =====Совместимость=====
  
-2024-02-06 "Kaos" да +  * 2024-02-06 "Kaos" да 
-2023-04-04 "Jack Jackrum" да +  2023-04-04 "Jack Jackrum" да 
-2022-07-31 "Igor" да +  2022-07-31 "Igor" да 
-2020-07-29 "Hogfather" да+  2020-07-29 "Hogfather" да
  
 =====Монтаж===== =====Монтаж=====
Строка 18: Строка 18:
   - распаковать его в<dokuwiki>/lib/plugins/   - распаковать его в<dokuwiki>/lib/plugins/
   - войдите как администратор и измените плагин в менеджере конфигурации   - войдите как администратор и измените плагин в менеджере конфигурации
-=====Применение===== +=====Примеры/Использование===== 
-Настраивать нечего.  +Меню плагина 
- +{{:wiki:plugin:plugin_typography_2.png?|}} 
-<code> +Возможности плагина 
-<details+{{:wiki:plugin:plugin_typography_1.png?|}} 
-<summary>Резюме</summary+===== Синтаксис ===== 
-Основной текст +<code php
-</details>+<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>Tangerin</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>
 </code> </code>
 +<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>Tangerin</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>
 +===== Функции =====
  
-Приведенный выше текст приводит к+Плагин Typography расширяет разметку «ДокуВики» за счет возможностей набора текста. Парный тег разметки <typo …> </typo> включает в себя в качестве параметров CSS-правила, такие как тип шрифта, размер, толщина и цвет текста. Аналогично CSS-синтаксису параметры состоят из пар "свойство:значение", отделяемых друг от друга точкой с запятой (;), однако последняя в списке может быть опущена. Между тегом и его параметрами ставится один пробел, после точки с запятой также можно в эстетических целях добавлять пробел. Вместо полного имени свойства можно использовать сокращённое. Значения поддерживают любые CSS-единицы, включая словарные (px, em, %, x-small и пр.)
-Показу кнопки **«Подробности»** и скрытию основного текста +
-После нажатия на стрелку отображается содержимое+
-**Основной текст** +
-===== Синтаксис =====+
  
 +Некоторые сокращения сами доступны как парные теги, например, %%<ff> (тип шрифта), <fs> (размер), <fc> (цвет), <bg> (цвет фона), <fw> (толщина).%% В качестве разделителя можно использовать как двоеточие, так и пробел. За счёт полного совпадения функционала и синтаксиса плагин Typography свободно, без правок статей может заменить плагины FontFamily, FontSize2 и FontColor.
  
-  * Блок, который нужно скрыть, начинается с  ''<details>'' и заканчивается на ''</details>''+^  Короткое имя  ^ CSS-cвойство ^ Описание ^ 
-    * Если содержимое должно быть видимым по умолчанию, используйте ''<details open>'' вместо этого. +|  ''fc''  | color             | цвет шрифта | 
-  * Первым элементом контента должен быть ''<summary> TEXT </summary>''+|  ''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}}.
 +**Пример одного параметра:**
  
-<code php+<file txt
-<details+<typo font-size:large;>Large</typo>,  
-<summary>«Подробности»</summary+<typo fs:x-large>Very large</typo>,  
-Скрытый текст +<fs:xx-large>Huge</fs>, and  
-</details>+<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> </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',
  
-====Пример==== +        ); 
-<details+        $button array( 
-<summary>«Подробности»</summary+                'type' => 'picker', 
-**<color #22b14c>Скрытый текст</color>** +                'title' => $this->getLang('fn_picker'), 
-</details>+                '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 php> 
-<details open> 
-<summary>«Подробности»</summary> 
-Скрытый текст 
-</details> 
 </code> </code>
 +{{:wiki:plugin:plugin_typography_3.png?|}}
 +Заменины и добавлены новые иконки
  
-====Пример==== 
-<details open> 
-<summary>«Подробности»</summary> 
-**<color #22b14c>Скрытый текст</color>** 
-</details> 
 =====Обновление===== =====Обновление=====
-Для обновления удалите исходную папку lib/plugins/displaywikipage и установите новую версию, как указано выше.+Для обновления удалите исходную папку lib/plugins/typography и установите новую версию, как указано выше.
 =====Файл для загрузки===== =====Файл для загрузки=====
-{{ :wiki:plugin:detail.zip |}}+{{ :wiki:plugin:typography.zip |typography.zip}}
 =====Лицензия===== =====Лицензия=====
-  * **Author:** [[dokuwiki@revolutionarts.deSascha Klawohn ]]+  * **Author:** [[sahara.satoshi@gmail.com| Pawel Piekarski, Satoshi Sahara ]] 
 +  * **Edit:** [[polskiyvn@gmail.comVladPolskiy ]]
   * **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|Ссылка на оригинальную статью]]
  
  
  
wiki/plugin/typography.1737239710.txt.gz · Последнее изменение: 2025/01/19 01:35 — vladpolskiy