DokuWiki

It's better when it's simple

User Tools

Site Tools

Trace: • git • sandy • template
plugin:ckgedit:font_styling

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
plugin:ckgedit:font_styling [2016-05-27 01:10] – [Important Preliminaries] 24.78.88.211plugin:ckgedit:font_styling [2017-07-12 02:50] (current) – [Graphical Editing] turnermm
Line 1: Line 1:
 +[[plugin:ckgedit|⇐ ckgedit Plugin Page]]
 ===== Font Styling ===== ===== Font Styling =====
  
Line 6: Line 7:
    -  If you are editing color styles on a previously saved document, you should remove the previous styles and start over. You do this with the ''Remove Format'' tool, which looks like this: **__T__ <sub>x</sub> **.      -  If you are editing color styles on a previously saved document, you should remove the previous styles and start over. You do this with the ''Remove Format'' tool, which looks like this: **__T__ <sub>x</sub> **.  
    - You cannot style text that contains links.    - You cannot style text that contains links.
-   - You cannot style headers. Headers in  Dokuwiki are always discrete entities and cannot accept any knid of formatting, including bold,italic, etc.  +   - You cannot style headers. Headers in  Dokuwiki are always discrete entities and cannot accept any kind of formatting, including bold,italic, etc.   
 +   - Styling is not meant for large blocks of text. 
 +   - If you are using font styling on the same page as tables, you must be sure to have on the [[plugin:ckgedit:configuration#complex_tables|complex tables parser]].  In the latest versions of ''ckgedit'', the complex tables option is on by default.    
 +         *:!: Please Note: There are some cases where, even when the complex tables option is on, the table will be corrupted by the presence of font styling.  In these cases you can use one of the other font styling plugins, e.g [[plugin:color|]].  Or you can use an [[plugin:ckgedit#html_blocks|HTML_BLOCK]]. 
 + 
 +==== About Font styling ====
  
 Font styling((Font style here covers font size, face, color, background-color.))  in ckgedit is created using the CKEditor's font and font-color tools. Because Dokuwiki itself does not come with font styling syntax, the result is saved in a syntax which is rendered by a Dokuwiki font plugin that comes with ckgedit. Font styling((Font style here covers font size, face, color, background-color.))  in ckgedit is created using the CKEditor's font and font-color tools. Because Dokuwiki itself does not come with font styling syntax, the result is saved in a syntax which is rendered by a Dokuwiki font plugin that comes with ckgedit.
Line 12: Line 18:
 This is some styling created in ckgedit using the font styling tools: This is some styling created in ckgedit using the font styling tools:
  
-{{  http://i1369.photobucket.com/albums/ag206/turnermm03/font_styling_editor_zpsl1jwvnnq.png  }}+{{  http://i.imgur.com/hPkW0ei.png  }}
  
 When saved, the result will be: When saved, the result will be:
  
-{{  http://i1369.photobucket.com/albums/ag206/turnermm03/font_style_done_zpsakr9hlhv.png  }}+{{  http://i.imgur.com/BSptD83.png  }}
  
 When your page is saved, it will have the following markup: When your page is saved, it will have the following markup:
Line 24: Line 30:
 </code> </code>
  
-The plugin converts this style data and its text into the final result as it will appear in the browser. In previous versions of ckgedit ((prior to November 2014)), when a page was reloaded into the editor, the plugin syntax would be displayed and not the final rendered result. In other words, the font plugin was treated by ckgedit in the same way that it treats any other Dokuwiki syntax plugin. +The plugin converts this style data and its text into the final result as it will appear in the browser.((In previous versions of ckgedit, prior to November 2014, when a page was reloaded into the editor, the plugin syntax would be displayed and not the final rendered result.)) Ckgedit comes with a number of features which give direct access to the font syntax and make it possible to edit the plugin syntax in the ckgedit editor.
- +
-Ckgedit comes with a number of features which give direct access to the font syntax and make it possible to edit the plugin syntax in the ckgedit editor.+
  
 ===== Creating and Editing Font Styles ===== ===== Creating and Editing Font Styles =====
Line 34: Line 38:
 There are 5 tools for styling font: Font (face), Size, Text Color, Background Color, and the FontAssist plugin, which is used for inline editing of the font plugin's markup. There are 5 tools for styling font: Font (face), Size, Text Color, Background Color, and the FontAssist plugin, which is used for inline editing of the font plugin's markup.
  
-{{  http://i1369.photobucket.com/albums/ag206/turnermm03/font_tools_zpsws8vkju3.png?direct&300  }}+{{  http://i.imgur.com/CwLcwEu.png?&300 }}
  
 Select your text with mouse or keyboard and then click on the kinds of style you wish to set. You can apply all settings to the same text selection. Select your text with mouse or keyboard and then click on the kinds of style you wish to set. You can apply all settings to the same text selection.
Line 41: Line 45:
 ==== Combining font styles with Dokuwiki formats ==== ==== Combining font styles with Dokuwiki formats ====
 You can add formats, like bold and italic, to text which has been styled with font styling.  But you should apply the formats after the font styling, in particular if you are working at the end of a sentence or clause which will be concluded with a punctuation mark, like a period or comma.  Otherwise a space will be inserted between the punctuation mark and the preceding letter.   You can add formats, like bold and italic, to text which has been styled with font styling.  But you should apply the formats after the font styling, in particular if you are working at the end of a sentence or clause which will be concluded with a punctuation mark, like a period or comma.  Otherwise a space will be inserted between the punctuation mark and the preceding letter.  
 +
 +==== Conflicts with Dokuwiki Links ====
 +For the most part, when applying styles to links, the markup ends up being corrupted. The reason for this is that the font markup tends to get inter-laced with the link markup.  For this not to happen, the font markup has to be external to the links markup, as in this example: 
 +    <font inherit/tahoma,sans-serif;;#008000;;inherit>{{:snippets.tgz|:snippets}}</font>
 +The only foolproof way of doing this is to go into the native Dokuwiki editor.  If ''ckgedit'' notices a conflict when saving a file, it will display a warning and give the user a chance to recover from the conflict.  It is also possible to recover from font errors by clicking the ''Edit Fonts'' button, which shows up any time there is font styling on a page.
 +
  
  
Line 54: Line 64:
 The first of these techniques is the default. You can select all or part of a text and re-set its styles. When setting an alternate background-color for part of a text, white space tends to open up on either side of the inserted color. The first of these techniques is the default. You can select all or part of a text and re-set its styles. When setting an alternate background-color for part of a text, white space tends to open up on either side of the inserted color.
  
-{{  http://i1369.photobucket.com/albums/ag206/turnermm03/font_example_zpsmyj96qa4.png  }}+{{  http://i.imgur.com/GNWTZ3o.png  }}
  
 A similar effect may also occur between lines when creating a block of text against a single background-color. If you want a solid, unbroken background-color, it is best to use one of the block plugins, like the wrap plugin. If for any reason you canot get the effects you want, it is always possible to edit the font syntax directly, as detailed in the following section. A similar effect may also occur between lines when creating a block of text against a single background-color. If you want a solid, unbroken background-color, it is best to use one of the block plugins, like the wrap plugin. If for any reason you canot get the effects you want, it is always possible to edit the font syntax directly, as detailed in the following section.
Line 73: Line 83:
 You can make changes by selecting the plugin syntax with its enclosed text, and then clicking on the font Assist toolbar icon {{http://imageshack.us/a/img13/6504/fontsp.png?direct&}}. The font Assist dialog will open. There you can make changes and view your result. You can make changes by selecting the plugin syntax with its enclosed text, and then clicking on the font Assist toolbar icon {{http://imageshack.us/a/img13/6504/fontsp.png?direct&}}. The font Assist dialog will open. There you can make changes and view your result.
  
-{{  http://i1369.photobucket.com/albums/ag206/turnermm03/font_assist_zpswm4472om.png?direct&500  }}+{{  http://i.imgur.com/piIBDuy.png?400 }}
  
 Once you are satisfied with your changes, you can insert the changes into the editor by clicking the OK button. Once you are satisfied with your changes, you can insert the changes into the editor by clicking the OK button.
plugin/ckgedit/font_styling.1464304226.txt.gz · Last modified: 2016-05-27 01:10 by 24.78.88.211
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

Global DokuWiki Links