|
|
| (21 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, Underline, and Strike-through ==
| |
| − | These four basic font styles are frequently used in both print and online documents. Due to their popularity each one of them is available under a separate toolbar button. To turn the style on, press the button or use the respective keyboard shortcut. To turn it off, use the button or a keyboard shortcut again.
| |
| − | | |
| − | To write in bold (i.e. using thicker letters), press the [[Image:CKEditor_bold.png|Bold]] toolbar button or use the ''Ctrl+B'' keyboard shortcut.
| |
| − | | |
| − | To write in italics (i.e. using slanted letters), press the [[Image:CKEditor_italic.png|Italic]] toolbar button or use the ''Ctrl+I'' keyboard shortcut.
| |
| − | | |
| − | To underline the text (i.e. draw a horizontal line underneath the letters), press the [[Image:CKEditor_underline.png|Underline]] toolbar button or use the ''Ctrl+U'' keyboard shortcut. Remember that the underline style will also be applied to all white space of the selected fragment.
| |
| − | | |
| − | To strike the text through (i.e. draw a horizontal line through the letters), press the [[Image:CKEditor_strikethrough.png|Strike Through]] toolbar button. Remember that the strike-through style will also be applied to all white space of the selected fragment.
| |
| − | | |
| − | The bold, italics, underline and strike-through styles 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 formatting styles in one document.
| |
| − | | |
| − | [[Image:CKEditor_bold_italics_underline_strikethrough_example1.png|frame|center|Bold, italics, underline, and strike-through used in CKEditor]]
| |
| − | | |
| − | | |
| − | In CKEditor it is possible to combine these styles or use them in conjunction with other formatting methods. It is worth remembering, however, that bold, italics, underline, and strike-through often have special meaning. Strike-through, for example, is often employed to denote the recently deleted text, while underline may suggest recently inserted text or a link. Since their usage is partly standardized, it is important to use these styles consistently across your documents.
| |
| − | | |
| − | [[Image:CKEditor_bold_italics_underline_strikethrough_example2.png|frame|center|Bold, italics, underline, and strike-through combined in CKEditor]]
| |
| − | | |
| − | | |
| − | == Text Color ==
| |
| − | CKEditor allows you to change the color of text in your documents by using a color palette. To choose a color, select a text fragment and press the [[Image:CKEditor_textcolor.png|Text Color]] toolbar button. The '''Text Color''' drop-down menu that will open lets you select a color from a basic palette of 40 shades.
| |
| − | | |
| − | [[Image:CKEditor_textcolor_menu.png|frame|center|Text Color drop-down menu in CKEditor]]
| |
| − | | |
| − | If the color that you are after is not included in the basic palette, click the '''More Colors''' option in the drop-down menu. The '''Select color''' dialog window that will open lets you choose a color from an extended palette. You can either select a desired shade with your mouse or enter the RGB color value into the text box, using one of the following formats:
| |
| − | * <code>rgb(''nn'', ''nn'', ''nn'')</code> format, where <code>''nn''</code> is a numeric value on a scale from 0 to 255 representing the red, green and blue channel.
| |
| − | * <code>#''nnnnnn''</code> format, where the <code>''n''</code> letters stand for the three pairs of hex color values representing the red, green and blue channel.
| |
| − | | |
| − | [[Image:CKEditor_select_color.png|frame|center|Select Color dialog window in CKEditor]]
| |
| − | | |
| − | | |
| − | A color 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 colors in one document.
| |
| − | | |
| − | [[Image:CKEditor_textcolor_example.png|frame|center|Text color used in CKEditor]]
| |
| − | | |
| − | | |
| − | == 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.
