Site Tools


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. If you are editing color styles on a previously saved document, you should remove the previous styles and start over. You do the latter with the Remove Format tool, which looks like this: T x . Or else arrange to have the scayt_auto configuration option set to off in the Configuration Manager. In the latter case, you can turn Scayt on from its toolbar menu.
2. You cannot style text that contains links.

Font styling1) in ckgedit is created using the CKEditor's font and font-color tools, and the result is saved using the built-in ckgedit font plugin.

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

When saved, the result will be:

When your page is saved the ckgedit parser turns the style data into a markup syntax understood by ckgedit's built-in font plugin:

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

The plugin converts the style data and its text into the final result as it will appear in the browser.

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.

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 sectioln.

Editing the font syntax directly

You can create styles and make changes manually, as with any other plugin, as long as you understand the font plugin syntax:
<font size/face;;color;;background-color>your text</font>, a number of examples of which are found on this page.

But you can also 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.

If for some reason editor fails to recognize the styling and instead displays the font markup, you can use the above described methods for editing the font. You can also force the page to display the markup instead of converting it to styled text. Any place on your page, include the following macro:

  ~~NO_STYLING~~

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.
  • 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

It also has an editor button named Edit Fonts which immediately enters into to nofont_styling mode. The next time the editor is opened, the page displays the fonts as styled. In contrast, when the ~~NO_STYLING~~ macro is on a page, it will dispaly in the nofont_styling mode as long as the macro is present, and when the nofont_styling option is set to true, all pages will always open in nofont_styling mode.

Upgraded Font Styling Branch

If for some reason editor fails to recognize the styling and instead displays the font markup, you can use the above described methods for editing the font. You can also force the page to display the markup instead of converting it to styled text. Any place on your page, include the following macro:

  ~~NO_STYLING~~

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.
  • 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

It also has an editor button named Edit Fonts which immediately enters into to nofont_styling mode. The next time the editor is opened, the page displays the fonts as styled. In contrast, when the ~~NO_STYLING~~ macro is on a page, it will dispaly in the nofont_styling mode as long as the macro is present, and when the nofont_styling option is set to true, all pages will always open in nofont_styling mode.

1)
Font style here covers font size, face, color, background-color.