CKSource

Latest revision as of 11:34, 13 December 2010

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.

In CKEditor the text styling features are grouped together on the toolbar. Some are simple buttons that turn the style on and off when you click them.

Text styling buttons grouped on CKEditor toolbar.

Other text styling options are available as a drop-down list. Upon clicking them the list opens, and you can select a styling option.

Text styling drop-down lists on CKEditor toolbar.

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:

Font Name – typeface that will be applied to the document text.
Font Size – determines how big or small the text will be.
Bold, Italic, Underline, and Strike-through – add bold, italic, underline and ~~strike-through~~ formatting to a text fragment.
Text Color – changes the color of the document text.
Background Color – changes the color of the text background.
Subscript and Superscript – text with subscript and superscript formatting is smaller and placed below or above the baseline, respectively.
Formatting Styles – pre-defined sets of formatting features that can be applied to block and inline elements of the document.
Paragraph Format – pre-defined sets of formatting features that can be applied to block-level elements only.

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.

@@ Line 1: / Line 1: @@
-Text formatting is used to modify the text. This function keeps document legible and clear and gives user a chance to decide how the text will look like. <br>
+{{#CUSTOMTITLE:Text Styling}}
+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.
-== Bold, Italic, Underlined and Strike-through<br> ==
+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.
-User may arrange the way font is displayed, using four different options:
+[[Image:CKEditor_textstyling_toolbar1.png|frame|center|Text styling buttons grouped on CKEditor toolbar.]]
-* To make font bold press the [[Image:CKEditor_bold.png]] on the toolbar.&nbsp;
-* 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_strikethough.png|Strike-through]] on the toolbar.<br>
-Example:
+Other text styling options are available as a drop-down list. Upon clicking them the list opens, and you can select a styling option.
-[[Image:CKEditor_example_formatting.png]]
+[[Image:CKEditor_textstyling_toolbar2.png|frame|center|Text styling drop-down lists on CKEditor toolbar.]]
-Choosing any options highlight the toolbar’s buttons. In order to cancel formatting press the button responsible for specific option again. <br>
-Example:
+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]] &ndash; typeface that will be applied to the document text.
+* [[CKEditor_3.x/Users Guide/Styling/Size|Font Size]] &ndash; 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]] &ndash; 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]] &ndash; changes the color of the document text.
+* [[CKEditor_3.x/Users Guide/Styling/Background Color|Background Color]] &ndash; changes the color of the text background.
+* [[CKEditor_3.x/Users Guide/Styling/Subscript and Superscript|Subscript and Superscript]] &ndash; 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]] &ndash; 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]] &ndash; pre-defined sets of formatting features that can be applied to block-level elements only.
-[[Image:CKEditor_example_mixed.png]] <br>
+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.
-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]]
-== Fonts ==
-Different style of writing are called fonts. Fonts are functions which determine how the letters in the text look like. Most popular fonts are "Times New Roman" and "Arial”. In order to set a different font in the document User needs to access the font menu in the toolbar and chooses a font.
-[[Image:CKEditor_font_menu.png]]<br>
-Example:
-[[Image:CKEditor_example_font.png]]
-Make sure not to overuse this feature. Give preference to the [[#Styles|Styles]] menu instead. Styles have been precisely designed by the web side developer which make document more legible. <br>
-== Text Size ==
-If font’s size needs to be changed User should open the "Size menu" located in the toolbar. Predefined range of size will be display.  In order to change the font’s size user needs to choose one of the available options.
-[[Image:CKEditor_size_menu.png]]<br>
-Example:<br>
-[[Image:CKEditor_fontsize_example.png]]<br>
-CKEditor offers a big variety of sizes.
-== 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 work in the same way as the subscript but instead of placing the index in the bottom you place it in the top. This function is usually used in mathematical equations to write the "to the power of" function. You can access it from the toolbar using the [[Image:CKEditor_superscript.png‎]] button&nbsp;
-Example:
-[[Image:CKEditor_example_superscript.png]]
-You can also mix these two functions:
-Example:
-[[Image:CKEditor_example_mix.png]]

CKSource

Login / Create Account

Page Tools

Text Styling

Latest revision as of 11:34, 13 December 2010