It's better when it's simple

User Tools

Site Tools


⇐ ckgedit Plugin Page

Font Styling

Important Preliminaries

  1. Before applying font and color styles, you should/must disable the Scayt Spell Checker. Simply click on the Spellchecker icon and select Disable Scayt. You can set the scayt_auto configuration option to off in the Configuration Manager. In the latter case, you can turn Scayt on from its toolbar menu.
  2. 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 x .
  3. You cannot style text that contains links.
  4. You cannot style headers. Headers in Dokuwiki are always discrete entities and cannot accept any kind of formatting, including bold,italic, etc.
  5. Styling is not meant for large blocks of text.
  6. If you are using font styling on the same page as tables, you must be sure to have on the 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 color. Or you can use an HTML_BLOCK.

About Font styling

Font styling1) 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.

This is some styling created in ckgedit using the font styling tools:

When saved, the result will be:

When your page is saved, it will have the following markup:

<font 24px/tahoma,sans-serif;;#ffffc8;;#0000ff>This is a text with  in a font tag</font>

The plugin converts this style data and its text into the final result as it will appear in the browser.2) 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 Styles

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.

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.

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.

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.

Editing Styles

There are two ways to edit font styles:

  1. Graphically, by re-selecting your text and re-setting the style(s) using the font toolbar buttons
  2. By editing the font plugin syntax from within the editor

Graphical Editing

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.

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.

Editing the font syntax directly

You do not have to switch over to the Dokuwiki editor to gain access to this syntax. Instead, you click on the Edit Fonts button which appears at the upper left of the ckgedit toolbar. This immediately switches the ckgeditor over to a mode in which the font plugin syntax replaces the rendered font styling. You can edit this syntax directly, as with any other syntax plugin. A number of examples of this syntax are found on this page. Its basic markup is:

 <font size/face;;color;;background-color>your text</font>

In addition to the Edit Fonts button, there is also the ~~NO_STYLING~~ macro which, when included on the page (or section being edited), will force the editor to replace the rendered styling with the plugin syntax.

Using the FontAssist plugin

The FontAssist plugin is available only when html styling has been disabled either by switching to the Edit fonts editing window or by using the ~~NO_STYLING~~ macro or by turning off html font styling in the configuration manager.

You can make changes by selecting the plugin syntax with its enclosed text, and then clicking on the font Assist toolbar icon . The font Assist dialog will open. There you can make changes and view your result.

Once you are satisfied with your changes, you can insert the changes into the editor by clicking the OK button.

Another option is to click anywhere on the font plugin's syntax or enclosed text, instead of making a selection. This will enable you to view but not save changes. Beneath the display window there is a textbox with the current plugin markup; this is updated with every change. The textbox is clickable. When clicked its contents are selected for copying. This makes it simple to copy and the paste changed markup into the editor. The tool comes with instructions in the Info tab.

Configuration Options Specific to Font Styling

  • nofont_styling: when set to true, font markup will be displayed and there is no need for the ~~NO_STYLING~~ macro or to use the Edit Fonts button.
  • color_options: when set to true the color options are removed from the ckgeditor toolbar
  • font_options: when set to true the font options are removed from the ckgeditor toolbar
Font style here covers font size, face, color, background-color.
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.
plugin/ckgedit/font_styling.txt · Last modified: 2017-07-12 02:50 by turnermm

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