|
|
| (23 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | __TOC__
| + | {{#CUSTOMTITLE:Text Styling}} |
| − | Text formatting determines the way your text will look in the document. Advanced capabilities in editing text format is what distinguishes CKEditor from a standard website form text area or a basic editor. Font styling, changing the size of the text, its size and color, or applying a pre-defined set of consistent styles all happen within seconds, with one mouse click. Experiment with various CKEditor text formatting options to achieve a unique presentation of your documents. | + | Text styling determines the way your text will look in the document. Advanced capabilities in setting text format is what distinguishes CKEditor from a standard form textarea or a basic editor. Font styling, changing the size of the text and its color, or applying a pre-defined set of consistent styles, all take seconds and one mouse click. |
| | | | |
| − | == Font ==
| + | In CKEditor the text styling features are grouped together on the [[CKEditor_3.x/Users Guide/Interface/Toolbar|toolbar]]. Some are simple buttons that turn the style on and off when you click them. |
| − | In CKEditor the '''Font''' is the typeface that will be applied to the document text. Fonts are pre-defined sets of characters with uniform styling collected under one name. The CKEditor collection of fonts includes most popular [http://en.wikipedia.org/wiki/Serif serif fonts] (Times New Roman, Georgia), [http://en.wikipedia.org/wiki/Sans_serif sans-serif fonts] (Arial, Verdana, Tahoma), and [http://en.wikipedia.org/wiki/Monospaced_font monospaced fonts] (Courier New). | |
| | | | |
| − | To change a font for a text fragment, open the '''Font''' menu by clicking the [[Image:CKEditor_font.png|Font]] button on the toolbar. The font drop-down list contains a number of typefaces that you can use. To make the choice easier, the font names are displayed in a font that they represent, giving you a preview of what the text will look like.
| + | [[Image:CKEditor_textstyling_toolbar1.png|frame|center|Text styling buttons grouped on CKEditor toolbar.]] |
| | | | |
| − | [[Image:CKEditor_font_menu.png|frame|center|Font drop-down menu in CKEditor]]
| |
| | | | |
| | + | Other text styling options are available as a drop-down list. Upon clicking them the list opens, and you can select a styling option. |
| | | | |
| − | A font can be applied to the whole document, a paragraph, or a text fragment of arbitrary length — even a single letter. Do note, however, that for esthetic reasons it is recommended not to combine too many different fonts in one document.
| + | [[Image:CKEditor_textstyling_toolbar2.png|frame|center|Text styling drop-down lists on CKEditor toolbar.]] |
| | | | |
| − | [[Image:CKEditor_font_example.png|frame|center|Different fonts used in CKEditor]]
| |
| | | | |
| | + | Try experimenting with various text styling options available in CKEditor to achieve a unique presentation of your documents. Among the styling features you will find: |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Font|Font Name]] – typeface that will be applied to the document text. |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Size|Font Size]] – determines how big or small the text will be. |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Bold, Italic, Underline, and Strike-through|Bold, Italic, Underline, and Strike-through]] – add '''bold''', ''italic'', <ins>underline</ins> and <strike>strike-through</strike> formatting to a text fragment. |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Text Color|Text Color]] – changes the color of the document text. |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Background Color|Background Color]] – changes the color of the text background. |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Subscript and Superscript|Subscript and Superscript]] – text with subscript and superscript formatting is smaller and placed below or above the baseline, respectively. |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Styles|Formatting Styles]] – pre-defined sets of formatting features that can be applied to block and inline elements of the document. |
| | + | * [[CKEditor_3.x/Users Guide/Styling/Format|Paragraph Format]] – pre-defined sets of formatting features that can be applied to block-level elements only. |
| | | | |
| − | == Size ==
| + | To read more about a particular CKEditor text styling option and see some usage examples, click the name of the feature in the list above. |
| − | In CKEditor the '''Size''' determines how big or small a font used in the document text will be. The system administrator may customize the set of font sizes to the needs of a particular CKEditor installation, however, by default the following values are available: <code>8px</code>, <code>9px</code>, <code>10px</code>, <code>11px</code>, <code>12px</code>, <code>14px</code>, <code>16px</code>, <code>18px</code>, <code>20px</code>, <code>22px</code>, <code>24px</code>, <code>26px</code>, <code>28px</code>, <code>36px</code>, <code>48px</code> and <code>72px</code>. Depending on the needs of the system, font sizes may also be defined in a descriptive manner, like <code>Very small</code> or <code>Bigger</code>.
| |
| − | | |
| − | To change a font size for a text fragment, open the '''Size''' menu by clicking the [[Image:CKEditor_size.png|Size]] button on the toolbar. The font size drop-down list contains a number of sizes that you can use. To make the choice easier, the items of the list are displayed in a font size that they represent, giving you a preview of what the text will look like.
| |
| − | | |
| − | [[Image:CKEditor_size_menu.png|frame|center|Font size drop-down menu in CKEditor]]
| |
| − | | |
| − | | |
| − | A font size can be applied to the whole document, a paragraph, or a text fragment of arbitrary length — even a single letter. Do note, however, that for esthetic reasons it is recommended not to combine too many different font sizes in one document.
| |
| − | | |
| − | [[Image:CKEditor_size_example.png|frame|center|Different font sizes used in CKEditor]]
| |
| − | | |
| − | | |
| − | == Bold, Italic, Underlined and Strike-through<br> ==
| |
| − | | |
| − | User may arrange the way font is displayed, using four different options:
| |
| − | | |
| − | * To make font bold press the [[Image:CKEditor_bold.png]] on the toolbar.
| |
| − | * To have your text italic press the[[Image:CKEditor_italic.png]]on the toolbar .<br>
| |
| − | * For underlined press the [[Image:CKEditor_underline.png]] on the toolbar.<br>
| |
| − | * To strike lines through the text press [[Image:CKEditor_strikethrough.png|Strike-through]] on the toolbar.<br>
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_formatting.png]]
| |
| − | | |
| − | Choosing any options highlight the toolbar’s buttons. In order to cancel formatting press the button responsible for specific option again. <br>
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_mixed.png]] <br>
| |
| − | | |
| − | Notice that if you do not switch the underline option off the underline will go between your blanks.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_underliendfont.png]]<br>
| |
| − | | |
| − | This also includes the strike through function.
| |
| − | | |
| − | Mixing the options is available, however too much formatting makes the text illegibly and ugly. Keep that in mind and try not to overuse these options. <br>
| |
| − | | |
| − | == Styles ==
| |
| − | | |
| − | Using lots of different formatting on the text makes it ugly and difficult to read.
| |
| − | | |
| − | Styles keep all formatting uniform. Each style provides a predefined combination of formatting features. It combines all the formatting functions described in this chapter and enables fast access to the common used text formats. For example: Instead of changing individually: the font, its color, its background, its size user may simply pick a preferred style from the Style menu and start typing.
| |
| − | | |
| − | [[Image:CKEditor_style.png]]<br>
| |
| − | | |
| − | Please remember to be instructed on how properly use each style.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_style.png]]<br>
| |
| − | | |
| − | == Text Alignment ==
| |
| − | | |
| − | Paragraphs’ lines may be modified as well.
| |
| − | | |
| − | * To align the text at the left side of the editing area, User needs to press the [[Image:CKEditor_align_left.png]] button on the toolbar.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_align_left.png]]
| |
| − | | |
| − | * To align the text at the right side of the editing area[[Image:CKEditor_align_right.png]]button on the toolbar should be pressed.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_align_right.png]]
| |
| − | | |
| − | * To align the text in the center of the document, User should press[[Image:CKEditor_align_center.png]] button on the toolbar.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_align_center.png]]
| |
| − | * To use the block alignment also called "justify" user needs to press [[Image:CKEditor_justify.png]]on the toolbar (“Justify” expands the text and makes it equally long so that the lines will end in the same place)
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:AlignmentB example.png|Image:AlignmentB_example.png]]
| |
| − | | |
| − | == Paragraph (Block) Format ==
| |
| − | | |
| − | Format menu located in the toolbar is one of the most important functions. <br>
| |
| − | | |
| − | [[Image:CKEditor_format_menu.png]]
| |
| − | | |
| − | User uses format to organize the text and to distinguish different parts of the text e.g.: if user wishes to start a new chapter or to put different categories and subcategories he/she utilizes the format menu and chooses different headings.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_format.png]]
| |
| − | | |
| − | | |
| − | == Colors ==
| |
| − | | |
| − | CKEditor enables User to change the color of the text or the background.
| |
| − | | |
| − | In order to change color of the text User need to press [[Image:CKEditor_textcolor.png]]button. Several colors will appear in that menu. User may choose more colors available under "More colors...".
| |
| − | | |
| − | Clicking on the color activates it.<br>
| |
| − | | |
| − | [[Image:CKEditor_color_menu.png]]<br>
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_color.png]]
| |
| − | | |
| − | In order to change the background color User should [[Image:CKEditor_bgcolor.png]] button. A range of colors the same ones as in the text color will appear.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_bgcolor.png]]
| |
| − | | |
| − | You may also mix the colours of your text and the background.<br>
| |
| − | | |
| − | == Subscript and Superscript ==
| |
| − | | |
| − | Subscript and superscript are usually used for mathematical needs.
| |
| − | | |
| − | In order to put subscript to a letter or a number user should press [[Image:CKEditor_subscript.png]] button on the toolbar.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_subscript.png]]
| |
| − | | |
| − | As you can see letter and number are written a smaller font than the normal text.
| |
| − | | |
| − | The superscript function works in the same way as the subscript but instead of putting the index on the bottom, it is placed on the top.
| |
| − | | |
| − | In order to use superscript function user ought to press [[Image:CKEditor_superscript.png]] button
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_superscript.png]]
| |
| − | | |
| − | User could freely mixok dxi subscript and superscript function.
| |
| − | | |
| − | Example:
| |
| − | | |
| − | [[Image:CKEditor_example_mix.png]]
| |
Text styling determines the way your text will look in the document. Advanced capabilities in setting text format is what distinguishes CKEditor from a standard form textarea or a basic editor. Font styling, changing the size of the text and its color, or applying a pre-defined set of consistent styles, all take seconds and one mouse click.
To read more about a particular CKEditor text styling option and see some usage examples, click the name of the feature in the list above.
