Различия

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

--- wiki:plugin:typography [2025/01/19 01:47] – [Лицензия] vladpolskiy
+++ wiki:plugin:typography [2025/01/19 02:47] (текущий) – [Использование короткого синтаксиса с меню панели инструментов] vladpolskiy
@@ Строка 19: / Строка 19: @@
   - войдите как администратор и измените плагин в менеджере конфигурации
 =====Примеры/Использование=====
+Меню плагина
+{{:wiki:plugin:plugin_typography_2.png?|}}
+Возможности плагина
 {{:wiki:plugin:plugin_typography_1.png?|}}
 ===== Синтаксис =====
@@ Строка 27: / Строка 30: @@
 <ff BrushScriptMS>Brush Script MS</ff>\\
 <ff Georgia>Georgia</ff>\\
-<ff Tangerine; fs:30px>Tangerine</ff>\\
+<ff Tangerine; fs:30px>Tangerin</ff>\\
 <ff Calligraph; fs:30px>Шрифт Calligraph</ff>\\
 <ff DS Yermak_D; fs:20px>Шрифт DS Yermak_D</ff>\\
@@ Строка 42: / Строка 45: @@
 <ff BrushScriptMS>Brush Script MS</ff>\\
 <ff Georgia>Georgia</ff>\\
-<ff Tangerine; fs:30px>Tangerine</ff>\\
+<ff Tangerine; fs:30px>Tangerin</ff>\\
 <ff Calligraph; fs:30px>Шрифт Calligraph</ff>\\
 <ff DS Yermak_D; fs:20px>Шрифт DS Yermak_D</ff>\\
@@ Строка 51: / Строка 54: @@
 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.
+^  Короткое имя  ^ 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?|}}
+Заменины и добавлены новые иконки
 =====Обновление=====