3.0 source code
This commit is contained in:
agolybev
@@ -1,27 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Add borders</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add borders to your document selecting their style" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Add borders</h1>
|
||||
<p>To add borders to a paragraph, page, or the whole document,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
|
||||
<li>click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar,</li>
|
||||
<li>switch to the <b>Borders & Fill</b> tab in the opened <b>Paragraph - Advanced Settings</b> window,</li>
|
||||
<li>set the needed value for <b>Border Size</b> and select a <b>Border Color</b>,</li>
|
||||
<li>click within the available diagram or use buttons to select borders and apply the chosen style to them,</li>
|
||||
<li>click the <b>OK</b> button.</li>
|
||||
</ol>
|
||||
<p><img alt="Paragraph Advanced Settings - Borders & Fill" src="../images/paradvsettings_borders.png" /></p>
|
||||
<p>After you add borders, you can also set <b>margins</b> i.e. distances between the <b>right</b>, <b>left</b>, <b>top</b> and <b>bottom</b> borders and the paragraph text within them.</p>
|
||||
<p>To set the necessary values, switch to the <b>Margins</b> tab of the <b>Paragraph - Advanced Settings</b> window:</p>
|
||||
<p><img alt="Paragraph Advanced Settings - Margins" src="../images/paradvsettings_margins.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Add borders</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add borders to your document selecting their style" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Add borders</h1>
|
||||
<p>To add borders to a paragraph, page, or the whole document,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
|
||||
<li>click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar,</li>
|
||||
<li>switch to the <b>Borders & Fill</b> tab in the opened <b>Paragraph - Advanced Settings</b> window,</li>
|
||||
<li>set the needed value for <b>Border Size</b> and select a <b>Border Color</b>,</li>
|
||||
<li>click within the available diagram or use buttons to select borders and apply the chosen style to them,</li>
|
||||
<li>click the <b>OK</b> button.</li>
|
||||
</ol>
|
||||
<p><img alt="Paragraph Advanced Settings - Borders & Fill" src="../images/paradvsettings_borders.png" /></p>
|
||||
<p>After you add borders, you can also set <b>paddings</b> i.e. distances between the <b>right</b>, <b>left</b>, <b>top</b> and <b>bottom</b> borders and the paragraph text within them.</p>
|
||||
<p>To set the necessary values, switch to the <b>Paddings</b> tab of the <b>Paragraph - Advanced Settings</b> window:</p>
|
||||
<p><img alt="Paragraph Advanced Settings - Paddings" src="../images/paradvsettings_margins.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Add hyperlinks</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add hyperlinks to a word or text fragment leading to an external website" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Add hyperlinks</h1>
|
||||
<p>To add a hyperlink,</p>
|
||||
<ol>
|
||||
<li>place the cursor to a position where a hyperlink will be added,</li>
|
||||
<li>click the <b>Add Hyperlink</b> <img alt="Add Hyperlink icon" src="../images/addhyperlink.png" /> icon at the top toolbar,</li>
|
||||
<li>after that a window will appear where you can specify the hyperlink parameters:
|
||||
<ul>
|
||||
<li><b>Link to</b> - enter a URL in the format <i>http://www.example.com</i>.</li>
|
||||
<li><b>Display</b> - enter a text that will get clickable and lead to the web address specified in the upper field.</li>
|
||||
<li><b>ScreenTip text</b> - enter a text that will become visible in a small pop-up window that provides a brief note or label pertaining to the hyperlink being pointed to.</li>
|
||||
</ul>
|
||||
<p><img alt="Add Hyperlink window" src="../images/hyperlinkwindow.png" /></p>
|
||||
</li>
|
||||
<li>Click the <b>OK</b> button.</li>
|
||||
</ol>
|
||||
<p>To add a hyperlink, you can also click with the right mouse button at a position where a hyperlink will be added and select the <b>Hyperlink</b> option in the menu that opens the window displayed above.</p>
|
||||
<p class="note"><b>Note</b>: it's also possible to select a caracter, word, word combination, text passage containing an image with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a> and
|
||||
click the <b>Add Hyperlink</b> <img alt="Add Hyperlink icon" src="../images/addhyperlink.png" /> icon at the top toolbar or right-click the selection and choose the <b>Hyperlink</b> option in the menu.
|
||||
After that the window displayed above will open with the <b>Display</b> field filled with the text fragment you selected.</p>
|
||||
<p>By hovering the cursor over the added hyperlink, the ScreenTip will appear containing the text you specified.
|
||||
You can follow the link by pressing the <b>CTRL</b> key and clicking the link in your document.</p>
|
||||
<p>To edit or delete the added hyperlink, click it with the right mouse button, select the <b>Hyperlink</b> option and then the action you want to perform - <b>Edit Hyperlink</b> or <b>Remove Hyperlink</b>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Add hyperlinks</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add hyperlinks to a word or text fragment leading to an external website" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Add hyperlinks</h1>
|
||||
<p>To add a hyperlink,</p>
|
||||
<ol>
|
||||
<li>place the cursor to a position where a hyperlink will be added,</li>
|
||||
<li>click the <b>Add Hyperlink</b> <img alt="Add Hyperlink icon" src="../images/addhyperlink.png" /> icon at the top toolbar,</li>
|
||||
<li>after that the <b>Hyperlink Settings</b> window will appear where you can specify the hyperlink parameters:
|
||||
<ul>
|
||||
<li><b>Link to</b> - enter a URL in the format <i>http://www.example.com</i>.</li>
|
||||
<li><b>Display</b> - enter a text that will get clickable and lead to the web address specified in the upper field.</li>
|
||||
<li><b>ScreenTip text</b> - enter a text that will become visible in a small pop-up window that provides a brief note or label pertaining to the hyperlink being pointed to.</li>
|
||||
</ul>
|
||||
<p><img alt="Hyperlink Settings window" src="../images/hyperlinkwindow.png" /></p>
|
||||
</li>
|
||||
<li>Click the <b>OK</b> button.</li>
|
||||
</ol>
|
||||
<p>To add a hyperlink, you can also click with the right mouse button at a position where a hyperlink will be added and select the <b>Hyperlink</b> option in the menu that opens the window displayed above.</p>
|
||||
<p class="note"><b>Note</b>: it's also possible to select a caracter, word, word combination, text passage with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a> and
|
||||
click the <b>Add Hyperlink</b> <img alt="Add Hyperlink icon" src="../images/addhyperlink.png" /> icon at the top toolbar or right-click the selection and choose the <b>Hyperlink</b> option in the menu.
|
||||
After that the window displayed above will open with the <b>Display</b> field filled with the text fragment you selected.</p>
|
||||
<p>By hovering the cursor over the added hyperlink, the ScreenTip will appear containing the text you specified.
|
||||
You can follow the link by pressing the <b>CTRL</b> key and clicking the link in your document.</p>
|
||||
<p>To edit or delete the added hyperlink, click it with the right mouse button, select the <b>Hyperlink</b> option and then the action you want to perform - <b>Edit Hyperlink</b> or <b>Remove Hyperlink</b>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Align your text in a line or paragraph</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Everything that pertains to the text alignment in line or paragraph: aligning left, right, justified, center" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Align your text in a line or paragraph</h1>
|
||||
<p>The text is commonly aligned in four ways: left, right, center or justified. To do that,</p>
|
||||
<ol>
|
||||
<li>place the cursor to the position where you want the alignment to be applied (this can be a new line or already entered text),</li>
|
||||
<li>select the alignment type you would like to apply:
|
||||
<ul>
|
||||
<li><b>Left</b> alignment with the text lined up by the left side of the page (the right side remains unaligned) is done with the <b>Align Left</b> <img alt="Align Left icon" src="../images/alignleft.png" /> icon situated at the top toolbar.</li>
|
||||
<li><b>Center</b> alignment with the text lined up by the center of the page (the right and the left sides remains unaligned) is done with the <b>Align Center</b> <img alt="Align Center icon" src="../images/aligncenter.png" /> icon situated at the top toolbar.</li>
|
||||
<li><b>Right</b> alignment with the text lined up by the right side of the page (the left side remains unaligned) is done with the <b>Align Right</b> <img alt="Align Right icon" src="../images/alignright.png" /> icon situated at the top toolbar.</li>
|
||||
<li><b>Justify</b> alignment with the text lined up by both the left and the right sides of the page (additional spacing is added where necessary to keep the alignment) is done with the <b>Justify</b> <img alt="Justify icon" src="../images/justify.png" /> icon situated at the top toolbar.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Align your text in a line or paragraph</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Everything that pertains to the text alignment in line or paragraph: aligning left, right, justified, center" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Align your text in a line or paragraph</h1>
|
||||
<p>The text is commonly aligned in four ways: left, right, center or justified. To do that,</p>
|
||||
<ol>
|
||||
<li>place the cursor to the position where you want the alignment to be applied (this can be a new line or already entered text),</li>
|
||||
<li>select the alignment type you would like to apply:
|
||||
<ul>
|
||||
<li><b>Left</b> alignment with the text lined up by the left side of the page (the right side remains unaligned) is done with the <b>Align Left</b> <img alt="Align Left icon" src="../images/alignleft.png" /> icon situated at the top toolbar.</li>
|
||||
<li><b>Center</b> alignment with the text lined up by the center of the page (the right and the left sides remains unaligned) is done with the <b>Align Center</b> <img alt="Align Center icon" src="../images/aligncenter.png" /> icon situated at the top toolbar.</li>
|
||||
<li><b>Right</b> alignment with the text lined up by the right side of the page (the left side remains unaligned) is done with the <b>Align Right</b> <img alt="Align Right icon" src="../images/alignright.png" /> icon situated at the top toolbar.</li>
|
||||
<li><b>Justify</b> alignment with the text lined up by both the left and the right sides of the page (additional spacing is added where necessary to keep the alignment) is done with the <b>Justify</b> <img alt="Justify icon" src="../images/justify.png" /> icon situated at the top toolbar.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Select background color for a paragraph</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Learn how to select background color for a paragraph" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Select background color for a paragraph</h1>
|
||||
<p>Background color is applied to the whole paragraph.</p>
|
||||
<p>To apply a background color to a certain paragraph or change the current one,</p>
|
||||
<ol>
|
||||
<li>select a color sheme for your document from the available ones clicking the <b>Change Color Scheme</b> <img alt="Change Color Scheme" src="../images/changecolorscheme.png" /> icon at the top toolbar</li>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or the whole text using the <b>Ctrl+A</b> key combination</li>
|
||||
<li>open the color palettes window clicking the color field next to the <b>Background Color</b> caption at the right sidebar
|
||||
<p class="note"><b>Note</b>: you can also access the color palettes window clicking the 'Show advanced settings' link at the right sidebar or selecting the 'Paragraph Advanced Settings' option in the right-click menu, then switching to the 'Borders & Fill' tab within the 'Paragraph - Advanced Settings' window and clicking the color field next to the <b>Background Color</b> caption.</p>
|
||||
</li>
|
||||
<li>select any color in the available palettes
|
||||
<p><img alt="Palette" src="../images/palette.png" /></p>
|
||||
<ul>
|
||||
<li><b>Theme Colors</b> - the colors that correspond to the selected color scheme of the document.</li>
|
||||
<li><b>Standard Colors</b> - the default colors set.</li>
|
||||
<li><b>Custom Color</b> - click this caption if there is no needed color in the available palettes. Select the necessary colors range moving the vertical color slider and set the specific color dragging the color picker within the large square color field. Once you select a color with the color picker, the appropriate RGB and sRGB color values will be displayed in the fields on the right. You can also specify a color on the base of the RGB color model entering the necessary numeric values into the <b>R</b>, <b>G</b>, <b>B</b> (red, green, blue) fields or enter the sRGB hexadecimal code into the field marked with the <b>#</b> sign. The selected color appears in the <b>New</b> preview box. If the object was previously filled with any custom color, this color is displayed in the <b>Current</b> box so you can compare the original and modified colors. When the color is specified, click the <b>Add</b> button:
|
||||
<p><img alt="Palette - Custom Color" src="../images/palette_custom.png" /></p>
|
||||
<p>The custom color will be applied to the paragraph and added to the <b>Custom color</b> palette.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p>To clear the background color of a certain paragraph,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or the whole text using the <b>Ctrl+A</b> key combination</li>
|
||||
<li>open the color palettes window clicking the color field next to the <b>Background Color</b> caption at the right sidebar</li>
|
||||
<li>select the <img alt="No Fill" src="../images/nofill.png" /> icon.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Select background color for a paragraph</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Learn how to select background color for a paragraph" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Select background color for a paragraph</h1>
|
||||
<p>Background color is applied to the whole paragraph and completely fills all the paragraph space from the left page margin to the right page margin.</p>
|
||||
<p>To apply a background color to a certain paragraph or change the current one,</p>
|
||||
<ol>
|
||||
<li>select a color scheme for your document from the available ones clicking the <b>Change Color Scheme</b> <img alt="Change Color Scheme" src="../images/changecolorscheme.png" /> icon at the top toolbar</li>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or the whole text using the <b>Ctrl+A</b> key combination</li>
|
||||
<li>open the color palettes window. You can access it in one of the following ways:
|
||||
<ul>
|
||||
<li>click the downward arrow next to the <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> icon at the top toolbar, or</li>
|
||||
<li>click the color field next to the <b>Background Color</b> caption at the right sidebar, or</li>
|
||||
<li>click the 'Show advanced settings' link at the right sidebar or select the 'Paragraph Advanced Settings' option in the right-click menu, then switch to the 'Borders & Fill' tab within the 'Paragraph - Advanced Settings' window and click the color field next to the <b>Background Color</b> caption.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>select any color in the available <a href="../UsageInstructions/ChangeColorScheme.htm">palettes</a></li>
|
||||
</ol>
|
||||
<p>After you select the necessary color using the <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> icon, you'll be able to apply this color to any selected paragraph just clicking the <img alt="Selected Paragraph Background Color" src="../images/backgroundcolor_selected.png" /> icon (it displays the selected color), without the necessity to choose this color on the palette again. If you use the <b>Background Color</b> option at the right sidebar or within the 'Paragraph - Advanced Settings' window, remember that the selected color is not retained for quick access. (These options can be useful if you wish to select a different background color for a specific paragraph, while you are also using some general color selected with the help of the <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> icon).</p>
|
||||
<hr />
|
||||
<p>To clear the background color of a certain paragraph,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or the whole text using the <b>Ctrl+A</b> key combination</li>
|
||||
<li>open the color palettes window clicking the color field next to the <b>Background Color</b> caption at the right sidebar</li>
|
||||
<li>select the <img alt="No Fill" src="../images/nofill.png" /> icon.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Change color scheme</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Learn how to change color scheme for a document" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Change color scheme</h1>
|
||||
<p>Color schemes are applied to the whole document. They are used to quickly change the appearance of your document, since they are define the <b>Theme Colors</b> palette for document elements (<a href="../UsageInstructions/FontTypeSizeColor.htm">font</a>, <a href="../UsageInstructions/BackgroundColor.htm">background</a>, <a href="../UsageInstructions/InsertTables.htm">tables</a>, <a href="../UsageInstructions/InsertAutoshapes.htm">autoshapes</a>, <a href="../UsageInstructions/InsertCharts.htm">charts</a>). If you've applied some <b>Theme Colors</b> to document elements and then selected a different <b>Color Scheme</b>, the applied colors in your document change correspondingly.</p>
|
||||
<p>To change a color scheme, click the downward arrow next to the <b>Change Color Scheme</b> <img alt="Change Color Scheme" src="../images/changecolorscheme.png" /> icon at the right part of the top toolbar and select the necessary color scheme from the available ones: <b>Office</b>, <b>Grayscale</b>, <b>Apex</b>, <b>Aspect</b>, <b>Civic</b>, <b>Concourse</b>, <b>Equity</b>, <b>Flow</b>, <b>Foundry</b>, <b>Median</b>, <b>Metro</b>, <b>Module</b>, <b>Odulent</b>, <b>Oriel</b>, <b>Origin</b>, <b>Paper</b>, <b>Solstice</b>, <b>Technic</b>, <b>Trek</b>, <b>Urban</b>, <b>Verve</b>.</p>
|
||||
<p><img alt="Color Schemes" src="../images/colorscheme.png" /></p>
|
||||
<p>Once you select the preferred color scheme, you can select colors in a color palettes window that corresponds the document element you want to appply the color to. The following palettes are available:</p>
|
||||
<p><img alt="Palette" src="../images/palette.png" /></p>
|
||||
<ul>
|
||||
<li><b>Theme Colors</b> - the colors that correspond to the selected color scheme of the document.</li>
|
||||
<li><b>Standard Colors</b> - the default colors set. The selected color scheme does not affect them.</li>
|
||||
<li><b>Custom Color</b> - click this caption if there is no needed color in the available palettes. Select the necessary colors range moving the vertical color slider and set the specific color dragging the color picker within the large square color field. Once you select a color with the color picker, the appropriate RGB and sRGB color values will be displayed in the fields on the right. You can also specify a color on the base of the RGB color model entering the necessary numeric values into the <b>R</b>, <b>G</b>, <b>B</b> (red, green, blue) fields or enter the sRGB hexadecimal code into the field marked with the <b>#</b> sign. The selected color appears in the <b>New</b> preview box. If the object was previously filled with any custom color, this color is displayed in the <b>Current</b> box so you can compare the original and modified colors. When the color is specified, click the <b>Add</b> button:
|
||||
<p><img alt="Palette - Custom Color" src="../images/palette_custom.png" /></p>
|
||||
<p>The custom color will be applied to the selected element and added to the <b>Custom color</b> palette.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Copy/clear text formatting</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Copy/clear text formatting within your document" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Copy/clear text formatting</h1>
|
||||
<p>To copy a certain text formatting,</p>
|
||||
<ol>
|
||||
<li>select the text passage which formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a>,</li>
|
||||
<li>click the <b>Copy Style</b> <img alt="Copy Style" src="../images/copystyle.png" /> icon at the top toolbar,</li>
|
||||
<li>select the text passage you want to apply the same formatting to.</li>
|
||||
</ol>
|
||||
<p>To quickly remove the applied formatting from your text,</p>
|
||||
<ol>
|
||||
<li>select the text passage which formatting you want to remove,</li>
|
||||
<li>click the <b>Clear Style</b> <img alt="Clear Style" src="../images/clearstyle.png" /> icon at the top toolbar.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Copy/clear text formatting</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Copy/clear text formatting within your document" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Copy/clear text formatting</h1>
|
||||
<p>To copy a certain text formatting,</p>
|
||||
<ol>
|
||||
<li>select the text passage which formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a>,</li>
|
||||
<li>click the <b>Copy Style</b> <img alt="Copy Style" src="../images/copystyle.png" /> icon at the top toolbar (the mouse pointer will look like this <img alt="Mouse pointer while pasting style" src="../images/paste_style.png" />),</li>
|
||||
<li>select the text passage you want to apply the same formatting to.</li>
|
||||
</ol>
|
||||
<p>To quickly remove the applied formatting from your text,</p>
|
||||
<ol>
|
||||
<li>select the text passage which formatting you want to remove,</li>
|
||||
<li>click the <b>Clear Style</b> <img alt="Clear Style" src="../images/clearstyle.png" /> icon at the top toolbar.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Copy/paste text passages, undo/redo your actions</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Perform the basic operations with the document text: copy, paste, undo, redo" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Copy/paste text passages, undo/redo your actions</h1>
|
||||
<p>To perform these operations, use the corresponding icons at the top toolbar:</p>
|
||||
<ul>
|
||||
<li><b>Copy</b> – select a text fragment and use the <b>Copy</b> <img alt="Copy icon" src="../images/copy.png" /> icon to copy the selection to the computer clipboard memory. The copied text can be later inserted to another place in the same document, into another document, or into some other program.</li>
|
||||
<li><b>Paste</b> – find the place in your document where you need to paste the previously copied text fragment and use the <b>Paste</b> <img alt="Paste icon" src="../images/paste.png" /> icon.
|
||||
The text will be inserted at the current cursor position. The text can be previously copied from the same document, from another document or from some other program.</li>
|
||||
<li><b>Undo</b> – use the <b>Undo</b> <img alt="Undo icon" src="../images/undo.png" /> icon to undo the last operation you performed.</li>
|
||||
<li><b>Redo</b> – use the <b>Redo</b> <img alt="Redo icon" src="../images/redo.png" /> icon to redo the last undone operation.</li>
|
||||
</ul>
|
||||
<p class="note"><b>Note</b>: for the security reasons some browsers don't allow access to your computer clipboard. So when you try to select one of the cutting operations, the program will ask you to use the keyboard shortcuts common for all browsers: <b>Ctrl+X</b> for cutting, <b>Ctrl+C</b> for copying, <b>Ctrl+V</b> for pasting.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Copy/paste text passages, undo/redo your actions</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Perform the basic operations with the document text: copy, paste, undo, redo" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Copy/paste text passages, undo/redo your actions</h1>
|
||||
<p>To cut, copy and paste text passages and inserted objects (autoshapes, images, charts) within the current document use the corresponding options from the right-click menu or icons at the top toolbar:</p>
|
||||
<ul>
|
||||
<li><b>Cut</b> – select a text fragment or an object and use the <b>Cut</b> option from the right-click menu to delete the selection and send it to the computer clipboard memory. The cut data can be later inserted to another place in the same document.</li>
|
||||
<li><b>Copy</b> – select a text fragment or an object and use the <b>Copy</b> option from the right-click menu, or the <b>Copy</b> <img alt="Copy icon" src="../images/copy.png" /> icon at the top toolbar to copy the selection to the computer clipboard memory. The copied data can be later inserted to another place in the same document.</li>
|
||||
<li><b>Paste</b> – find the place in your document where you need to paste the previously copied text fragment/object and use the <b>Paste</b> option from the right-click menu, or the <b>Paste</b> <img alt="Paste icon" src="../images/paste.png" /> icon at the top toolbar.
|
||||
The text/object will be inserted at the current cursor position. The data can be previously copied from the same document.</li>
|
||||
</ul>
|
||||
<p>To copy or paste data from/into another document or some other program use the following key combinations:</p>
|
||||
<ul>
|
||||
<li><b>Ctrl+X</b> key combination for cutting;</li>
|
||||
<li><b>Ctrl+C</b> key combination for copying;</li>
|
||||
<li><b>Ctrl+V</b> key combination for pasting.</li>
|
||||
</ul>
|
||||
<p class="note"><b>Note</b>: instead of cutting and pasting text within the same document you can just select the necessary text passage and drag and drop it to the necessary position.</p>
|
||||
<p>To perform the undo/redo operations, use the corresponding icons at the top toolbar or keyboard shortcuts:</p>
|
||||
<ul>
|
||||
<li><b>Undo</b> – use the <b>Undo</b> <img alt="Undo icon" src="../images/undo.png" /> icon at the top toolbar or the <b>Ctrl+Z</b> key combination to undo the last operation you performed.</li>
|
||||
<li><b>Redo</b> – use the <b>Redo</b> <img alt="Redo icon" src="../images/redo.png" /> icon at the top toolbar or the <b>Ctrl+Y</b> key combination to redo the last undone operation.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Create lists</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Create bulleted and numbered lists in the document changing the lists outline" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Create lists</h1>
|
||||
<p>To create a list in your document,</p>
|
||||
<ol>
|
||||
<li>place the cursor to the position where a list will be started (this can be a new line or the already entered text),</li>
|
||||
<li>select the list type you would like to start:
|
||||
<ul>
|
||||
<li><b>Unordered list</b> with markers is created using the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> icon situated at the top toolbar</li>
|
||||
<li><b>Ordered list</b> with digits or letters is created using the <b>Numbering</b> <img alt="Ordered List icon" src="../images/numbering.png" /> icon situated at the top toolbar
|
||||
<p class="note"><b>Note</b>: click the downward arrow next to the <b>Bullets</b> or <b>Numbering</b> icon to select how the list is going to look like.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>now each time you press the <b>Enter</b> key at the end of the line a new ordered or unordered list item will appear. To stop that, press the <b>Backspace</b> key and continue with the common text paragraph.</li>
|
||||
</ol>
|
||||
<p>You can also change the text indentation in the lists and their nesting using the <b>Outline</b> <img alt="Outline icon" src="../images/outline.png" />, <b>Decrease Indent</b> <img alt="Decrease Indent icon" src="../images/decreaseindent.png" />, and <b>Increase Indent</b> <img alt="Increase Indent icon" src="../images/increaseindent.png" /> icons at the top toolbar.</p>
|
||||
<p class="note"><b>Note</b>: the additional indentation and spacing parameters can be changed at the right sidebar and in the advanced settings window. To learn more about it, read the <a href="ParagraphIndents.htm">Change paragraph indents</a> and <a href="LineSpacing.htm">Set paragraph line spacing</a> section.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Create lists</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Create bulleted and numbered lists in the document changing the lists outline" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Create lists</h1>
|
||||
<p>To create a list in your document,</p>
|
||||
<ol>
|
||||
<li>place the cursor to the position where a list will be started (this can be a new line or the already entered text),</li>
|
||||
<li>select the list type you would like to start:
|
||||
<ul>
|
||||
<li><b>Unordered list</b> with markers is created using the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> icon situated at the top toolbar</li>
|
||||
<li><b>Ordered list</b> with digits or letters is created using the <b>Numbering</b> <img alt="Ordered List icon" src="../images/numbering.png" /> icon situated at the top toolbar
|
||||
<p class="note"><b>Note</b>: click the downward arrow next to the <b>Bullets</b> or <b>Numbering</b> icon to select how the list is going to look like.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>now each time you press the <b>Enter</b> key at the end of the line a new ordered or unordered list item will appear. To stop that, press the <b>Backspace</b> key and continue with the common text paragraph.</li>
|
||||
</ol>
|
||||
<p>You can also change the text indentation in the lists and their nesting using the <b>Outline</b> <img alt="Outline icon" src="../images/outline.png" />, <b>Decrease Indent</b> <img alt="Decrease Indent icon" src="../images/decreaseindent.png" />, and <b>Increase Indent</b> <img alt="Increase Indent icon" src="../images/increaseindent.png" /> icons at the top toolbar.</p>
|
||||
<p class="note"><b>Note</b>: the additional indentation and spacing parameters can be changed at the right sidebar and in the advanced settings window. To learn more about it, read the <a href="ParagraphIndents.htm">Change paragraph indents</a> and <a href="LineSpacing.htm">Set paragraph line spacing</a> section.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,71 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Apply font decoration styles</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Apply font decoration styles: increment/decrement values, bold, italic, underline, strikeout, superscript/subscript" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Apply font decoration styles</h1>
|
||||
<p>You can apply various font decoration styles using the corresponding icons situated at the top toolbar.</p>
|
||||
<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a> and apply the formatting.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Increment font size</td>
|
||||
<td><img alt="Increment font size" src="../images/larger.png" /></td>
|
||||
<td>Is used to change the font size making it larger one point each time the button is pressed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Decrement font size</td>
|
||||
<td><img alt="Decrement font size" src="../images/smaller.png" /></td>
|
||||
<td>Is used to change the font size making it smaller one point each time the button is pressed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bold</td>
|
||||
<td><img alt="Bold" src="../images/bold.png" /></td>
|
||||
<td>Is used to make the font bold giving it more weight.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Italic</td>
|
||||
<td><img alt="Italic" src="../images/italic.png" /></td>
|
||||
<td>Is used to make the font italicized giving it some right side tilt.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Underline</td>
|
||||
<td><img alt="Underline" src="../images/underline.png" /></td>
|
||||
<td>Is used to make the text underlined with the line going under the letters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Strikeout</td>
|
||||
<td><img alt="Strikeout" src="../images/strike.png" /></td>
|
||||
<td>Is used to make the text struck out with the line going through the letters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Superscript</td>
|
||||
<td><img alt="Superscript" src="../images/sup.png" /></td>
|
||||
<td>Is used to make the text smaller and place it to the upper part of the text line, e.g. as in fractions.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Subscript</td>
|
||||
<td><img alt="Subscript" src="../images/sub.png" /></td>
|
||||
<td>Is used to make the text smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>To access advanced font settings, click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar. Then the <b>Paragraph - Advanced Settings</b> window will open where you need to switch to the <b>Font</b> tab.</p>
|
||||
<p>Here you can use the following font decoration styles and settings:</p>
|
||||
<ul>
|
||||
<li><b>Strikethrough</b> is used to make the text struck out with the line going through the letters.</li>
|
||||
<li><b>Double strikethrough</b> is used to make the text struck out with the double line going through the letters.</li>
|
||||
<li><b>Superscript</b> is used to make the text smaller and place it to the upper part of the text line, e.g. as in fractions.</li>
|
||||
<li><b>Subscript</b> is used to make the text smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</li>
|
||||
<li><b>Small caps</b> is used to make all letters lower case.</li>
|
||||
<li><b>All caps</b> is used to make all letters upper case.</li>
|
||||
<li><b>Spacing</b> is used to set the space between the characters.</li>
|
||||
<li><b>Position</b> is used to set the characters position in the line.</li>
|
||||
</ul>
|
||||
<p><img alt="Paragraph Advanced Settings - Font" src="../images/paradvsettings_font.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Apply font decoration styles</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Apply font decoration styles: increment/decrement values, bold, italic, underline, strikeout, superscript/subscript" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Apply font decoration styles</h1>
|
||||
<p>You can apply various font decoration styles using the corresponding icons situated at the top toolbar.</p>
|
||||
<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a> and apply the formatting.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Increment font size</td>
|
||||
<td><img alt="Increment font size" src="../images/larger.png" /></td>
|
||||
<td>Is used to change the font size making it larger one point each time the button is pressed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Decrement font size</td>
|
||||
<td><img alt="Decrement font size" src="../images/smaller.png" /></td>
|
||||
<td>Is used to change the font size making it smaller one point each time the button is pressed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bold</td>
|
||||
<td><img alt="Bold" src="../images/bold.png" /></td>
|
||||
<td>Is used to make the font bold giving it more weight.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Italic</td>
|
||||
<td><img alt="Italic" src="../images/italic.png" /></td>
|
||||
<td>Is used to make the font italicized giving it some right side tilt.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Underline</td>
|
||||
<td><img alt="Underline" src="../images/underline.png" /></td>
|
||||
<td>Is used to make the text underlined with the line going under the letters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Strikeout</td>
|
||||
<td><img alt="Strikeout" src="../images/strike.png" /></td>
|
||||
<td>Is used to make the text struck out with the line going through the letters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Superscript</td>
|
||||
<td><img alt="Superscript" src="../images/sup.png" /></td>
|
||||
<td>Is used to make the text smaller and place it to the upper part of the text line, e.g. as in fractions.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Subscript</td>
|
||||
<td><img alt="Subscript" src="../images/sub.png" /></td>
|
||||
<td>Is used to make the text smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>To access advanced font settings, click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar. Then the <b>Paragraph - Advanced Settings</b> window will open where you need to switch to the <b>Font</b> tab.</p>
|
||||
<p>Here you can use the following font decoration styles and settings:</p>
|
||||
<ul>
|
||||
<li><b>Strikethrough</b> is used to make the text struck out with the line going through the letters.</li>
|
||||
<li><b>Double strikethrough</b> is used to make the text struck out with the double line going through the letters.</li>
|
||||
<li><b>Superscript</b> is used to make the text smaller and place it to the upper part of the text line, e.g. as in fractions.</li>
|
||||
<li><b>Subscript</b> is used to make the text smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</li>
|
||||
<li><b>Small caps</b> is used to make all letters lower case.</li>
|
||||
<li><b>All caps</b> is used to make all letters upper case.</li>
|
||||
<li><b>Spacing</b> is used to set the space between the characters.</li>
|
||||
<li><b>Position</b> is used to set the characters position in the line.</li>
|
||||
</ul>
|
||||
<p><img alt="Paragraph Advanced Settings - Font" src="../images/paradvsettings_font.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set font type, size, and color</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Change the following text formatting parameters: font type, size, and color" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set font type, size, and color</h1>
|
||||
<p>You can select the font type, its size and color using the corresponding icons situated at the top toolbar.</p>
|
||||
<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a> and apply the formatting.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Font Name</td>
|
||||
<td><img alt="Font Name" src="../images/fontfamily.png" /></td>
|
||||
<td>Is used to select one of the fonts from the list of the available ones.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Font Size</td>
|
||||
<td><img alt="Font Size" src="../images/fontsize.png" /></td>
|
||||
<td>Is used to select among the preset font size values from the dropdown list, or can be entered manually to the font size field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Highlight Color</td>
|
||||
<td><img alt="Highlight Color" src="../images/highlightcolor.png" /></td>
|
||||
<td>Is used to change the background used for the separate sentences, phrases, words, or even characters. Click the downward arrow next to the icon to select the color. To clear the background color, choose the <b>No Fill</b> option. <b>Highlight Color</b> is different from the <b>Background Color</b> as the latter is applied to the whole paragraph.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Font Color</td>
|
||||
<td><img alt="Font Color" src="../images/fontcolor.png" /></td>
|
||||
<td>Is used to change the color of the letters/characters in the text. Click the downward arrow next to the icon to select a color from the available palettes. The colors on the palettes depend on the color scheme selected clicking the <b>Change Color Scheme</b> <img alt="Change Color Scheme" src="../images/changecolorscheme.png" /> icon at the top toolbar.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set font type, size, and color</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Change the following text formatting parameters: font type, size, and color" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set font type, size, and color</h1>
|
||||
<p>You can select the font type, its size and color using the corresponding icons situated at the top toolbar.</p>
|
||||
<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection">using the keyboard</a> and apply the formatting.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Font Name</td>
|
||||
<td><img alt="Font Name" src="../images/fontfamily.png" /></td>
|
||||
<td>Is used to select one of the fonts from the list of the available ones.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Font Size</td>
|
||||
<td><img alt="Font Size" src="../images/fontsize.png" /></td>
|
||||
<td>Is used to select among the preset font size values from the dropdown list, or can be entered manually to the font size field.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Highlight Color</td>
|
||||
<td><img alt="Highlight Color" src="../images/highlightcolor.png" /></td>
|
||||
<td>Is used to mark separate sentences, phrases, words, or even characters by adding a color band that imitates highlighter pen effect around the text. You can select the necessary part of the text and then click the downward arrow next to the icon to select a color on the palette (this color set does not depend on the selected <b>Color Scheme</b> and includes 16 colors) - the color will be applied to the text selection. Alternatively, you can first choose a highlight color and then start selecting the text with the mouse - the mouse pointer will look like this <img alt="Mouse pointer while highlighting" src="../images/highlight_color_mouse_pointer.png" /> and you'll be able to highlight several different parts of your text sequentially. To stop highlighting just click the icon once again. To clear the highlight color, choose the <b>No Fill</b> option. <b>Highlight Color</b> is different from the <a href="../UsageInstructions/BackgroundColor.htm"><b>Background Color</b></a> <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> as the latter is applied to the whole paragraph and completely fills all the paragraph space from the left page margin to the right page margin.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Font Color</td>
|
||||
<td><img alt="Font Color" src="../images/fontcolor.png" /></td>
|
||||
<td>Is used to change the color of the letters/characters in the text. By default, the automatic font color is set in a new blank document. It is displayed as a black font on the white background. If you change the background color into black, the font color will automatically change into white to keep the text clearly visible. To choose a different color, click the downward arrow next to the icon and select a color from the available palettes (the colors on the <b>Theme Colors</b> palette depend on the selected <a href="../UsageInstructions/ChangeColorScheme.htm">color scheme</a>). After you change the default font color, you can use the <b>Automatic</b> option in the color palettes window to quickly restore the automatic color for the selected text passage.</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="note"><b>Note</b>: to learn more about the work with color palettes, please refer to <a href="../UsageInstructions/ChangeColorScheme.htm">this page</a>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,21 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Apply formatting presets</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Apply formatting presets: normal, heading, paragraph, table, etc." />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Apply formatting presets</h1>
|
||||
<p>To apply one of the available text formatting presets,</p>
|
||||
<ol>
|
||||
<li>place the cursor at the line or select several lines or paragraphs you want to apply one of the formatting presets to,</li>
|
||||
<li>select the needed preset on the right at the top toolbar.</li>
|
||||
</ol>
|
||||
<p>The following formatting presets are available: normal, no spacing, heading 1-9, title, subtitle, quote, intense quote, list paragraph.</p>
|
||||
<p><img alt="Formatting Presets" src="../images/formattingpresets.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Apply formatting presets</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Apply formatting presets: normal, heading, paragraph, table, etc." />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Apply formatting presets</h1>
|
||||
<p>To apply one of the available text formatting presets,</p>
|
||||
<ol>
|
||||
<li>place the cursor at the line or select several lines or paragraphs you want to apply one of the formatting presets to,</li>
|
||||
<li>select the needed preset on the right at the top toolbar.</li>
|
||||
</ol>
|
||||
<p>The following formatting presets are available: normal, no spacing, heading 1-9, title, subtitle, quote, intense quote, list paragraph.</p>
|
||||
<p><img alt="Formatting Presets" src="../images/formattingpresets.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,163 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert autoshapes</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add an autoshape to your document and adjust its properties." />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert autoshapes</h1>
|
||||
<p>To add an autoshape to your document,</p>
|
||||
<ol>
|
||||
<li>click the <b>Insert Autoshape</b> <img alt="Insert Autoshape icon" src="../images/insertautoshape.png" /> icon at the top toolbar,</li>
|
||||
<li>select one of the available autoshape groups: basic shapes, figured arrows, math, charts, stars & ribbons, callouts, buttons, rectangles, lines,</li>
|
||||
<li>click the necessary autoshape within the selected group,</li>
|
||||
<li>place the mouse cursor where you want the shape to be put,</li>
|
||||
<li>once the autoshape is added you can change its size, position and properties.
|
||||
<p class="note"><b>Note</b>: to add a caption within the autoshape make sure the shape is selected on the page and start typing your text. The text you add in this way becomes a part of the autoshape (when you move or rotate the shape, the text moves or rotates with it).</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p><img class="floatleft" alt="Reshaping autoshape" src="../images/reshaping.png" />To change the autoshape size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on the shape edges. To maintain the original proportions of the selected autoshape while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
|
||||
<p>When modifying some shapes, for example figured arrows or callouts, the yellow diamond-shaped <img alt="Yellow diamond icon" src="../images/yellowdiamond.png" /> icon is also available. It allows you to adjust some aspects of the shape, for example, the length of the head of an arrow.</p>
|
||||
<p>To alter the autoshape position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the autoshape. Drag the autoshape to the necessary position without releasing the mouse button.
|
||||
To move the autoshape by three-pixel increments, hold down the <b>Ctrl</b> key and use the keybord arrows.
|
||||
To move the autoshape strictly horizontally/vertically and prevent it from moving in a perpendicular direction, hold down the <b>Shift</b> key when dragging.</p>
|
||||
<p>To rotate the autoshape, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
|
||||
<hr />
|
||||
<p>To align and arrange autoshapes, use the <b>right-click menu</b>. The menu options are:</p>
|
||||
<ul>
|
||||
<li><b>Arrange</b> is used to bring the selected autoshape to foreground, send to background, move forward or backward as well as group or ungroup shapes to perform operations with several of them at once.</li>
|
||||
<li><b>Align</b> is used to align the shape left, center, right, top, middle, bottom.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <img alt="Editing Wrap Boundary" src="../images/wrap_boundary.png" /></li>
|
||||
<li><b>Advanced Settings</b> is used to open the 'Shape - Advanced Settings' window.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>Some of the autoshape settings can be altered using the <b>Shape Settings</b> tab of the right sidebar. To activate it click the shape and choose the <b>Shape Settings</b> <img alt="Shape Settings icon" src="../images/shape_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
|
||||
<ul>
|
||||
<li><b>Fill</b> - use this section to select the autoshape fill. You can choose the following options:
|
||||
<ul>
|
||||
<li><b>Color Fill</b> - select this option to specify the solid color you want to fill the inner space of the selected autoshape with.
|
||||
<p><img alt="Color Fill" src="../images/fill_color.png" /></p>
|
||||
<p id="color">Click the colored box below and select the necessary color from the available color sets or specify any color you like:</p>
|
||||
<p><img alt="Palettes" src="../images/palette.png" /></p>
|
||||
<ul>
|
||||
<li><b>Theme Colors</b> - the colors that correspond to the selected color scheme of the document.</li>
|
||||
<li><b>Standard Colors</b> - the default colors set.</li>
|
||||
<li><b>Custom Color</b> - click this caption if there is no needed color in the available palettes. Select the necessary colors range moving the vertical color slider and set the specific color dragging the color picker within the large square color field. Once you select a color with the color picker, the appropriate RGB and sRGB color values will be displayed in the fields on the right. You can also specify a color on the base of the RGB color model entering the necessary numeric values into the <b>R</b>, <b>G</b>, <b>B</b> (red, green, blue) fields or enter the sRGB hexadecimal code into the field marked with the <b>#</b> sign. The selected color appears in the <b>New</b> preview box. If the object was previously filled with any custom color, this color is displayed in the <b>Current</b> box so you can compare the original and modified colors. When the color is specified, click the <b>Add</b> button:
|
||||
<p><img alt="Palette - Custom Color" src="../images/palette_custom.png" /></p>
|
||||
<p>The custom color will be applied to your autoshape and added to the <b>Custom color</b> palette.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Gradient Fill</b> - select this option to fill the shape with two colors which smoothly change from one to another.
|
||||
<p><img alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
|
||||
<ul>
|
||||
<li><b>Style</b> - choose one of the available options: <b>Linear</b> (colors change in a straight line i.e. along a horizontal/vertical axis or diagonally at a 45 degree angle) or <b>Radial</b> (colors change in a circular path from the center to the edges).</li>
|
||||
<li><b>Direction</b> - choose a template from the menu. If the <b>Linear</b> gradient is selected, the following directions are available : top-left to bottom-right, top to bottom, top-right to bottom-left, right to left, bottom-right to top-left, bottom to top, bottom-left to top-right, left to right. If the <b>Radial</b> gradient is selected, only one template is available.</li>
|
||||
<li><b>Gradient</b> - click on the left slider <img alt="Slider" src="../images/gradientslider.png" /> under the gradient bar to activate the color box which corresponds to the first color. Click on the color box on the right to choose the first color in the palette. Drag the slider to set the gradient stop i.e. the point where one color changes into another. Use the right slider under the gradient bar to specify the second color and set the gradient stop.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Picture or Texture</b> - select this option to use an image or a predefined texture as the shape background.
|
||||
<p><img alt="Picture or Texture Fill" src="../images/fill_picture.png" /></p>
|
||||
<ul>
|
||||
<li>If you wish to use an image as a background for the shape, you can add an image <b>From File</b> selecting it on your computer HDD or <b>From URL</b> inserting the appropriate URL address into the opened window.</li>
|
||||
<li>If you wish to use a texture as a background for the shape, open the <b>From Texture</b> menu and select the necessary texture preset.
|
||||
<p>Currently, the following textures are available: canvas, carton, dark fabric, grain, granite, grey paper, knit, leather, brown paper, papyrus, wood.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>In case the selected <b>Picture</b> has less or more dimensions than the autoshape has, you can choose the <b>Stretch</b> or <b>Tile</b> setting from the dropdown list.
|
||||
<p>The <b>Stretch</b> option allows you to adjust the image size to fit the autoshape size so that it could fill the space completely.</p>
|
||||
<p>The <b>Tile</b> option allows you to display only a part of the bigger image keeping its original dimensions or repeat the smaller image keeping its original dimensions over the autoshape surface so that it could fill the space completely.</p>
|
||||
<p class="note"><b>Note</b>: any selected <b>Texture</b> preset fills the space completely, but you can apply the <b>Stretch</b> effect if necessary.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Pattern</b> - select this option to fill the shape with a two-colored design composed of regularly repeated elements.
|
||||
<p><img alt="Pattern Fill" src="../images/fill_pattern.png" /></p>
|
||||
<ul>
|
||||
<li><b>Pattern</b> - select one of the predefined designs from the menu.</li>
|
||||
<li><b>Foreground color</b> - click this color box to change the color of the pattern elements.</li>
|
||||
<li><b>Background color</b> - click this color box to change the color of the pattern background.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>No Fill</b> - select this option if you don't want to use any fill.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p><img class="floatleft" alt="Autoshape Settings tab" src="../images/right_autoshape.png" /></p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Opacity</b> - use this section to set an <b>Opacity</b> level dragging the slider or entering the percent value manually. The default value is <b>100%</b>. It corresponds to the full opacity. The <b>0%</b> value corresponds to the full transparency.</li>
|
||||
<li><b>Stroke</b> - use this section to change the autoshape stroke width and color.
|
||||
<ul>
|
||||
<li>To change the stroke width, select one of the available options from the <b>Size</b> dropdown list. The available options are: 0.5 pt, 1 pt, 1.5 pt, 2.25 pt, 3 pt, 4.5 pt, 6 pt. Alternatively, select the <b>No Line</b> option if you don't want to use any stroke.</li>
|
||||
<li>To change the stroke <b>color</b>, click on the colored box below and <a href="#color">select the necessary color</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Wrapping Style</b> - use this section to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
|
||||
<li><b>Change Autoshape</b> - use this section to replace the current autoshape with another one selected from the dropdown list.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>To change the <b>advanced settings</b> of the autoshape, right-click it and select the <b>Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar. The 'Shape - Advanced Settings' window will open:</p>
|
||||
<img alt="Shape - Advanced Settings" src="../images/shape_properties.png" />
|
||||
<p>The <b>Size</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Width</b> and <b>Height</b> - use these options to change the autoshape width and/or height. If the <b>Constant Proportions</b> <img alt="Constant Proportions icon" src="../images/constantproportions.png" /> button is clicked, the width and height will be changed together preserving the original shape aspect ratio.</li>
|
||||
</ul>
|
||||
<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_1.png" /></p>
|
||||
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Wrapping Style</b> - use this option to change the way the shape is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
|
||||
<ul>
|
||||
<li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the shape is considered to be a part of the text, like a character, so when the text moves, the shape moves as well. In this case the positioning options are inaccessible.</p>
|
||||
<p>If one of the following styles is selected, the shape can be moved independently of the text and positioned on the page exactly:</p>
|
||||
</li>
|
||||
<li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the shape.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual shape edges.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the shape edges and fills in the open white space within the shape. So that the effect can appear, use the <b>Edit Wrap Boundary</b> option from the right-click menu.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the shape.</p></li>
|
||||
<li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the shape overlaps the text.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the shape.</p></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you select the square, tight, through, or top and bottom style you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
|
||||
<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_2.png" /></p>
|
||||
<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
|
||||
<ul>
|
||||
<li><b>Horizontal</b> parameters include the autoshape <b>alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin as well as the autoshape <b>position</b> <b>to the right of</b> character, column, left margin, margin, page or right margin.</li>
|
||||
<li><b>Vertical</b> parameters include the autoshape <b>alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin as well as the autoshape <b>position below</b> line, margin, bottom margin, paragraph, page or top margin.</li>
|
||||
<li><b>Move object with text</b> controls whether the autoshape moves as the text to which it is anchored moves.</li>
|
||||
<li><b>Allow overlap</b> controls whether two autoshapes overlap or not if you drag them near each other on the page.</li>
|
||||
</ul>
|
||||
<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_3.png" /></p>
|
||||
<p>The <b>Shape Settings</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Line Style</b> - this option group allows to specify the following parameters:
|
||||
<ul>
|
||||
<li><b>Cap Type</b> - this option allows to set the style for the end of the line, therefore it can be applied only to the shapes with the open outline, such as lines, polylines etc.:
|
||||
<ul>
|
||||
<li><b>Flat</b> - the end points will be flat.</li>
|
||||
<li><b>Round</b> - the end points will be rounded.</li>
|
||||
<li><b>Square</b> - the end points will be square.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Join Type</b> - this option allows to set the style for the intersection of two lines, for example, it can affect a polyline or the corners of the triangle or rectangle outline:
|
||||
<ul>
|
||||
<li><b>Round</b> - the corner will be rounded.</li>
|
||||
<li><b>Bevel</b> - the corner will be cut off angularly.</li>
|
||||
<li><b>Miter</b> - the corner will be pointed. It goes well to shapes with sharp angles.</li>
|
||||
</ul>
|
||||
<p class="note"><b>Note</b>: the effect will be more noticeable if you use a large outline width.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Arrows</b> - this option group is available if a shape from the <b>Lines</b> shape group is selected. It allows to set the arrow <b>Start</b> and <b>End Style</b> and <b>Size</b> by selecting the appropriate option from the dropdown lists.</li>
|
||||
</ul>
|
||||
<img alt="Shape - Advanced Settings" src="../images/shape_properties_4.png" />
|
||||
<p>The <b>Margins</b> tab allows to change the autoshape <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> internal margins (i.e. the distance between the text within the shape and the autoshape borders).</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert autoshapes</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add an autoshape to your document and adjust its properties." />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert autoshapes</h1>
|
||||
<p>To add an autoshape to your document,</p>
|
||||
<ol>
|
||||
<li>click the <b>Insert Autoshape</b> <img alt="Insert Autoshape icon" src="../images/insertautoshape.png" /> icon at the top toolbar,</li>
|
||||
<li>select one of the available autoshape groups: basic shapes, figured arrows, math, charts, stars & ribbons, callouts, buttons, rectangles, lines,</li>
|
||||
<li>click the necessary autoshape within the selected group,</li>
|
||||
<li>place the mouse cursor where you want the shape to be put,</li>
|
||||
<li>once the autoshape is added you can change its size, position and properties.
|
||||
<p class="note"><b>Note</b>: to add a caption within the autoshape make sure the shape is selected on the page and start typing your text. The text you add in this way becomes a part of the autoshape (when you move or rotate the shape, the text moves or rotates with it).</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p><img class="floatleft" alt="Reshaping autoshape" src="../images/reshaping.png" />To change the autoshape size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on the shape edges. To maintain the original proportions of the selected autoshape while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
|
||||
<p>When modifying some shapes, for example figured arrows or callouts, the yellow diamond-shaped <img alt="Yellow diamond icon" src="../images/yellowdiamond.png" /> icon is also available. It allows you to adjust some aspects of the shape, for example, the length of the head of an arrow.</p>
|
||||
<p>To alter the autoshape position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the autoshape. Drag the autoshape to the necessary position without releasing the mouse button.
|
||||
When you move the autoshape, guide lines are displayed to help you position the object on the page precisely.
|
||||
To move the autoshape by three-pixel increments, hold down the <b>Ctrl</b> key and use the keybord arrows.
|
||||
To move the autoshape strictly horizontally/vertically and prevent it from moving in a perpendicular direction, hold down the <b>Shift</b> key when dragging.</p>
|
||||
<p>To rotate the autoshape, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
|
||||
<hr />
|
||||
<p>To align and arrange autoshapes, use the <b>right-click menu</b>. The menu options are:</p>
|
||||
<ul>
|
||||
<li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
|
||||
<li><b>Arrange</b> is used to bring the selected autoshape to foreground, send to background, move forward or backward as well as group or ungroup shapes to perform operations with several of them at once.</li>
|
||||
<li><b>Align</b> is used to align the shape left, center, right, top, middle, bottom.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <img alt="Editing Wrap Boundary" src="../images/wrap_boundary.png" /></li>
|
||||
<li><b>Advanced Settings</b> is used to open the 'Shape - Advanced Settings' window.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>Some of the autoshape settings can be altered using the <b>Shape Settings</b> tab of the right sidebar. To activate it click the shape and choose the <b>Shape Settings</b> <img alt="Shape Settings icon" src="../images/shape_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
|
||||
<ul>
|
||||
<li id="shape_fill"><b>Fill</b> - use this section to select the autoshape fill. You can choose the following options:
|
||||
<ul>
|
||||
<li><b>Color Fill</b> - select this option to specify the solid color you want to fill the inner space of the selected autoshape with.
|
||||
<p><img alt="Color Fill" src="../images/fill_color.png" /></p>
|
||||
<p id="color">Click the colored box below and select the necessary color from the available <a href="../UsageInstructions/ChangeColorScheme.htm">color sets</a> or specify any color you like:</p>
|
||||
</li>
|
||||
<li><b>Gradient Fill</b> - select this option to fill the shape with two colors which smoothly change from one to another.
|
||||
<p><img alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
|
||||
<ul>
|
||||
<li><b>Style</b> - choose one of the available options: <b>Linear</b> (colors change in a straight line i.e. along a horizontal/vertical axis or diagonally at a 45 degree angle) or <b>Radial</b> (colors change in a circular path from the center to the edges).</li>
|
||||
<li><b>Direction</b> - choose a template from the menu. If the <b>Linear</b> gradient is selected, the following directions are available : top-left to bottom-right, top to bottom, top-right to bottom-left, right to left, bottom-right to top-left, bottom to top, bottom-left to top-right, left to right. If the <b>Radial</b> gradient is selected, only one template is available.</li>
|
||||
<li><b>Gradient</b> - click on the left slider <img alt="Slider" src="../images/gradientslider.png" /> under the gradient bar to activate the color box which corresponds to the first color. Click on the color box on the right to choose the first color in the palette. Drag the slider to set the gradient stop i.e. the point where one color changes into another. Use the right slider under the gradient bar to specify the second color and set the gradient stop.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Picture or Texture</b> - select this option to use an image or a predefined texture as the shape background.
|
||||
<p><img alt="Picture or Texture Fill" src="../images/fill_picture.png" /></p>
|
||||
<ul>
|
||||
<li>If you wish to use an image as a background for the shape, you can add an image <b>From File</b> selecting it on your computer HDD or <b>From URL</b> inserting the appropriate URL address into the opened window.</li>
|
||||
<li>If you wish to use a texture as a background for the shape, open the <b>From Texture</b> menu and select the necessary texture preset.
|
||||
<p>Currently, the following textures are available: canvas, carton, dark fabric, grain, granite, grey paper, knit, leather, brown paper, papyrus, wood.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>In case the selected <b>Picture</b> has less or more dimensions than the autoshape has, you can choose the <b>Stretch</b> or <b>Tile</b> setting from the dropdown list.
|
||||
<p>The <b>Stretch</b> option allows you to adjust the image size to fit the autoshape size so that it could fill the space completely.</p>
|
||||
<p>The <b>Tile</b> option allows you to display only a part of the bigger image keeping its original dimensions or repeat the smaller image keeping its original dimensions over the autoshape surface so that it could fill the space completely.</p>
|
||||
<p class="note"><b>Note</b>: any selected <b>Texture</b> preset fills the space completely, but you can apply the <b>Stretch</b> effect if necessary.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Pattern</b> - select this option to fill the shape with a two-colored design composed of regularly repeated elements.
|
||||
<p><img alt="Pattern Fill" src="../images/fill_pattern.png" /></p>
|
||||
<ul>
|
||||
<li><b>Pattern</b> - select one of the predefined designs from the menu.</li>
|
||||
<li><b>Foreground color</b> - click this color box to change the color of the pattern elements.</li>
|
||||
<li><b>Background color</b> - click this color box to change the color of the pattern background.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>No Fill</b> - select this option if you don't want to use any fill.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p><img class="floatleft" alt="Autoshape Settings tab" src="../images/right_autoshape.png" /></p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Opacity</b> - use this section to set an <b>Opacity</b> level dragging the slider or entering the percent value manually. The default value is <b>100%</b>. It corresponds to the full opacity. The <b>0%</b> value corresponds to the full transparency.</li>
|
||||
<li id="shape_stroke"><b>Stroke</b> - use this section to change the autoshape stroke width and color.
|
||||
<ul>
|
||||
<li>To change the stroke width, select one of the available options from the <b>Size</b> dropdown list. The available options are: 0.5 pt, 1 pt, 1.5 pt, 2.25 pt, 3 pt, 4.5 pt, 6 pt. Alternatively, select the <b>No Line</b> option if you don't want to use any stroke.</li>
|
||||
<li>To change the stroke <b>color</b>, click on the colored box below and <a href="../UsageInstructions/ChangeColorScheme.htm">select the necessary color</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Wrapping Style</b> - use this section to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
|
||||
<li><b>Change Autoshape</b> - use this section to replace the current autoshape with another one selected from the dropdown list.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>To change the <b>advanced settings</b> of the autoshape, right-click it and select the <b>Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar. The 'Shape - Advanced Settings' window will open:</p>
|
||||
<img alt="Shape - Advanced Settings" src="../images/shape_properties.png" />
|
||||
<p>The <b>Size</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Width</b> and <b>Height</b> - use these options to change the autoshape width and/or height. If the <b>Constant Proportions</b> <img alt="Constant Proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant Proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original shape aspect ratio.</li>
|
||||
</ul>
|
||||
<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_1.png" /></p>
|
||||
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Wrapping Style</b> - use this option to change the way the shape is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
|
||||
<ul>
|
||||
<li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the shape is considered to be a part of the text, like a character, so when the text moves, the shape moves as well. In this case the positioning options are inaccessible.</p>
|
||||
<p>If one of the following styles is selected, the shape can be moved independently of the text and positioned on the page exactly:</p>
|
||||
</li>
|
||||
<li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the shape.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual shape edges.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the shape edges and fills in the open white space within the shape. So that the effect can appear, use the <b>Edit Wrap Boundary</b> option from the right-click menu.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the shape.</p></li>
|
||||
<li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the shape overlaps the text.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the shape.</p></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you select the square, tight, through, or top and bottom style you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
|
||||
<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_2.png" /></p>
|
||||
<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
|
||||
<ul>
|
||||
<li><b>Horizontal</b> parameters include the autoshape <b>alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin as well as the autoshape <b>position</b> <b>to the right of</b> character, column, left margin, margin, page or right margin.</li>
|
||||
<li><b>Vertical</b> parameters include the autoshape <b>alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin as well as the autoshape <b>position below</b> line, margin, bottom margin, paragraph, page or top margin.</li>
|
||||
<li><b>Move object with text</b> controls whether the autoshape moves as the text to which it is anchored moves.</li>
|
||||
<li><b>Allow overlap</b> controls whether two autoshapes overlap or not if you drag them near each other on the page.</li>
|
||||
</ul>
|
||||
<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_3.png" /></p>
|
||||
<p>The <b>Shape Settings</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Line Style</b> - this option group allows to specify the following parameters:
|
||||
<ul>
|
||||
<li><b>Cap Type</b> - this option allows to set the style for the end of the line, therefore it can be applied only to the shapes with the open outline, such as lines, polylines etc.:
|
||||
<ul>
|
||||
<li><b>Flat</b> - the end points will be flat.</li>
|
||||
<li><b>Round</b> - the end points will be rounded.</li>
|
||||
<li><b>Square</b> - the end points will be square.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Join Type</b> - this option allows to set the style for the intersection of two lines, for example, it can affect a polyline or the corners of the triangle or rectangle outline:
|
||||
<ul>
|
||||
<li><b>Round</b> - the corner will be rounded.</li>
|
||||
<li><b>Bevel</b> - the corner will be cut off angularly.</li>
|
||||
<li><b>Miter</b> - the corner will be pointed. It goes well to shapes with sharp angles.</li>
|
||||
</ul>
|
||||
<p class="note"><b>Note</b>: the effect will be more noticeable if you use a large outline width.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Arrows</b> - this option group is available if a shape from the <b>Lines</b> shape group is selected. It allows to set the arrow <b>Start</b> and <b>End Style</b> and <b>Size</b> by selecting the appropriate option from the dropdown lists.</li>
|
||||
</ul>
|
||||
<img alt="Shape - Advanced Settings" src="../images/shape_properties_4.png" />
|
||||
<p>The <b>Text Padding</b> tab allows to change the autoshape <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> internal margins (i.e. the distance between the text within the shape and the autoshape borders).</p>
|
||||
<p class="note"><b>Note</b>: this tab is only available if text is added within the autoshape, otherwise the tab is disabled.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert charts</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add a chart to your document and adjust its position, size and properties" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert charts</h1>
|
||||
<p>To insert a chart into your document,</p>
|
||||
<ol>
|
||||
<li>put the cursor at the place where you want to add a chart,</li>
|
||||
<li>click the <b>Insert Chart</b> <img alt="Insert Chart icon" src="../images/insertchart.png" /> icon at the top toolbar,</li>
|
||||
<li>select the needed chart type from the available ones - column, line, pie, bar, area, point, stock - and choose its style,</li>
|
||||
<li>after that the <b>Chart Editor</b> window will appear where you can enter the necessary data into the cells using the following controls:
|
||||
<ul>
|
||||
<li><img alt="Copy" src="../images/copy.png" /> and <img alt="Paste" src="../images/paste.png" /> for copying and pasting the copied data</li>
|
||||
<li><img alt="Undo" src="../images/undo.png" /> and <img alt="Redo" src="../images/redo.png" /> for undoing and redoing actions</li>
|
||||
<li><img alt="Insert function" src="../images/insertfunction.png" /> for inserting a function</li>
|
||||
<li><img alt="Decrease decimal" src="../images/decreasedec.png" /> and <img alt="Increase decimal" src="../images/increasedec.png" /> for decreasing and increasing decimal places</li>
|
||||
<li><img alt="Number format" src="../images/numberformat.png" /> for changing the number format, i.e. the way the numbers you enter appear in cells</li>
|
||||
</ul>
|
||||
<p><img alt="Chart Editor window" src="../images/charteditor.png" /></p>
|
||||
</li>
|
||||
<li>change the chart settings clicking the <b>Edit Chart</b> button situated in the <b>Chart Editor</b> window. The <b>Chart - Advanced Settings</b> window will open.
|
||||
<p><img alt="Chart - Advanced Settings window" src="../images/chartsettings.png" /></p>
|
||||
<p>The <b>Type & Data</b> tab allows you to select the chart type, its style as well as the data you wish to use to create a chart.</p>
|
||||
<ul>
|
||||
<li>Select a chart <b>Type</b> you wish to insert: line chart, column chart, bar chart, area chart, pie chart, point chart, or stock chart and its <b>Style</b>.</li>
|
||||
<li>Check the selected <b>Data Range</b> and modify it, if necessary, clicking the <b>Select Data</b> button and entering the desired data range in the following format: <em>Sheet1!A1:B4</em>.</li>
|
||||
<li>Choose the way to arrange the data. You can either select the <b>Data series</b> to be used on the X axis: <b>in rows</b> or <b>in columns</b>.</li>
|
||||
</ul>
|
||||
<p><img alt="Chart - Advanced Settings window" src="../images/chartsettings2.png" /></p>
|
||||
<p>The <b>Layout</b> tab allows you to change the layout of chart elements.</p>
|
||||
<ul>
|
||||
<li>
|
||||
Specify the <b>Chart Title</b> position in regard to your chart selecting the necessary option from the drop-down list:
|
||||
<ul>
|
||||
<li><b>None</b> to not display a chart title,</li>
|
||||
<li><b>Overlay</b> to overlay and center a title on the plot area,</li>
|
||||
<li><b>No Overlay</b> to display the title above the plot area.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Specify the <b>Legend</b> position in regard to your chart selecting the necessary option from the drop-down list:
|
||||
<ul>
|
||||
<li><b>None</b> to not display a legend,</li>
|
||||
<li><b>Bottom</b> to display the legend and align it to the bottom of the plot area,</li>
|
||||
<li><b>Top</b> to display the legend and align it to the top of the plot area,</li>
|
||||
<li><b>Right</b> to display the legend and align it to the right of the plot area,</li>
|
||||
<li><b>Left</b> to display the legend and align it to the left of the plot area,</li>
|
||||
<li><b>Left Overlay</b> to overlay and center the legend to the left on the plot area,</li>
|
||||
<li><b>Right Overlay</b> to overlay and center the legend to the right on the plot area.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Specify if you wish to display the <b>Horizontal Axis Title</b> or not selecting the necessary option from the drop-down list:
|
||||
<ul>
|
||||
<li><b>None</b> to not display a horizontal axis title,</li>
|
||||
<li><b>No Overlay</b> to display the title below the horizontal axis.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Specify the <b>Vertical Axis Title</b> orientation selecting the necessary option from the drop-down list:
|
||||
<ul>
|
||||
<li><b>None</b> to not display a vertical axis title,</li>
|
||||
<li><b>Rotated</b> to display the title from top to bottom to the left of the vertical axis,</li>
|
||||
<li><b>Horizontal</b> to display the title from bottom to top to the left of the vertical axis.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Specify which of the <b>Horizontal/Vertical Gridlines</b> you wish to display selecting the necessary option from the drop-down list: <b>Major</b>, <b>Minor</b>, or <b>Major and Minor</b>. You can hide the gridlines at all using the <b>None</b> option.
|
||||
<p class="note"><b>Note</b>: the <b>Horizontal/Vertical Axis Title</b> and <b>Horizontal/Vertical Gridlines</b> sections will be disabled for <b>Pie charts</b> since charts of this type have no axes and gridlines.</p>
|
||||
</li>
|
||||
<li>
|
||||
Specify the <b>Data Labels</b> (i.e. text labels that represent exact values of data points) parameters:<br />
|
||||
<ul>
|
||||
<li>select the data you wish to include into your labels checking the corresponding boxes: <b>Series Name</b>, <b>Category Name</b>, <b>Value</b>,</li>
|
||||
<li>specify the <b>Data Labels</b> position relative to the data points selecting the necessary option from the drop-down list: <b>Center</b>, <b>Inner Bottom</b>, <b>Inner Top</b>, <b>Outer Top</b>,</li>
|
||||
<li>enter a character (comma, semicolon etc.) you wish to use for separating several labels into the <b>Data Labels Separator</b> entry field.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Lines</b> - is used to choose a line style for <b>Line/Point charts</b>. You can choose one of the following options: <b>Straight</b> to use straight lines between data points, <b>Smooth</b> to use smooth curves between data points, or <b>None</b> to not display lines.</li>
|
||||
<li><b>Markers</b> - is used to specify whether the markers should be displayed (if the box is checked) or not (if the box is unchecked) for <b>Line/Point charts</b>.
|
||||
<p class="note"><b>Note</b>: the <b>Lines</b> and <b>Markers</b> options are available for <b>Line charts</b> and <b>Point charts</b> only.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p><img alt="Chart - Advanced Settings window" src="../images/chartsettings3.png" /></p>
|
||||
<p class="note"><b>Note</b>: the <b>Vertical/Horizontal Axis</b> tabs will be disabled for <b>Pie charts</b> since charts of this type have no axes.</p>
|
||||
<p>The <b>Vertical Axis</b> tab allows you to change the parameters of the vertical axis also referred to as the values axis or y-axis which displays numeric values. Note that the vertical axis will be the category axis which displays text labels for the <b>Bar charts</b>, therefore in this case the <b>Vertical Axis</b> tab options will correspond to the ones described in the next section. For the <b>Point charts</b>, both axes are value axes.</p>
|
||||
<ul>
|
||||
<li>The <b>Axis Options</b> section allows to set the following parameters:
|
||||
<ul>
|
||||
<li><b>Minimum Value</b> - is used to specify a lowest value displayed at the vertical axis start. The <b>Auto</b> option is selected by default, in this case the minimum value is calculated automatically depending on the selected data range. You can select the <b>Fixed</b> option from the drop-down list and specify a different value in the entry field on the right.</li>
|
||||
<li><b>Maximum Value</b> - is used to specify a highest value displayed at the vertical axis end. The <b>Auto</b> option is selected by default, in this case the maximum value is calculated automatically depending on the selected data range. You can select the <b>Fixed</b> option from the drop-down list and specify a different value in the entry field on the right.</li>
|
||||
<li><b>Axis Crosses</b> - is used to specify a point on the vertical axis where the horizontal axis should cross it. The <b>Auto</b> option is selected by default, in this case the axes intersection point value is calculated automatically depending on the selected data range. You can select the <b>Value</b> option from the drop-down list and specify a different value in the entry field on the right, or set the axes intersection point at the <b>Minimum/Maximum Value</b> on the vertical axis.</li>
|
||||
<li><b>Display Units</b> - is used to determine a representation of the numeric values along the vertical axis. This option can be useful if you're working with great numbers and wish the values on the axis to be displayed in more compact and readable way (e.g. you can represent 50 000 as 50 by using the <b>Thousands</b> display units). Select desired units from the drop-down list: <b>Hundreds</b>, <b>Thousands</b>, <b>10 000</b>, <b>100 000</b>, <b>Millions</b>, <b>10 000 000</b>, <b>100 000 000</b>, <b>Billions</b>, <b>Trillions</b>, or choose the <b>None</b> option to return to the default units.</li>
|
||||
<li><b>Values in reverse order</b> - is used to display values in an opposite direction. When the box is unchecked, the lowest value is at the bottom and the highest value is at the top of the axis. When the box is checked, the values are ordered from top to bottom.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <b>Tick Options</b> section allows to adjust the appearance of tick marks on the vertical scale. Major tick marks are the larger scale divisions which can have labels displaying numeric values. Minor tick marks are the scale subdivisions which are placed between the major tick marks and have no labels. Tick marks also define where gridlines can be displayed, if the corresponding option is set at the <b>Layout</b> tab. The <b>Major/Minor Type</b> drop-down lists contain the following placement options:
|
||||
<ul>
|
||||
<li><b>None</b> to not display major/minor tick marks,</li>
|
||||
<li><b>Cross</b> to display major/minor tick marks on both sides of the axis,</li>
|
||||
<li><b>In</b> to display major/minor tick marks inside the axis,</li>
|
||||
<li><b>Out</b> to display major/minor tick marks outside the axis.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <b>Label Options</b> section allows to adjust the appearance of major tick mark labels which display values. To specify a <b>Label Position</b> in regard to the vertical axis, select the necessary option from the drop-down list:
|
||||
<ul>
|
||||
<li><b>None</b> to not display tick mark labels,</li>
|
||||
<li><b>Low</b> to display tick mark labels to the left of the plot area,</li>
|
||||
<li><b>High</b> to display tick mark labels to the right of the plot area,</li>
|
||||
<li><b>Next to axis</b> to display tick mark labels next to the axis.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p><img alt="Chart - Advanced Settings window" src="../images/chartsettings4.png" /></p>
|
||||
<p>The <b>Horizontal Axis</b> tab allows you to change the parameters of the horizontal axis also referred to as the categories axis or x-axis which displays text labels. Note that the horizontal axis will be the value axis which displays numeric values for the <b>Bar charts</b>, therefore in this case the <b>Horizontal Axis</b> tab options will correspond to the ones described in the previous section. For the <b>Point charts</b>, both axes are value axes.</p>
|
||||
<ul>
|
||||
<li>The <b>Axis Options</b> section allows to set the following parameters:
|
||||
<ul>
|
||||
<li><b>Axis Crosses</b> - is used to specify a point on the horizontal axis where the vertical axis should cross it. The <b>Auto</b> option is selected by default, in this case the axes intersection point value is calculated automatically depending on the selected data range. You can select the <b>Value</b> option from the drop-down list and specify a different value in the entry field on the right, or set the axes intersection point at the <b>Minimum/Maximum Value</b> (that corresponds to the first and last category) on the horizontal axis.</li>
|
||||
<li><b>Axis Position</b> - is used to specify where the axis text labels should be placed: <b>On Tick Marks</b> or <b>Between Tick Marks</b>.</li>
|
||||
<li><b>Values in reverse order</b> - is used to display categories in an opposite direction. When the box is unchecked, categories are displayed from left to right. When the box is checked, the categories are ordered from right to left.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <b>Tick Options</b> section allows to adjust the appearance of tick marks on the horizontal scale. Major tick marks are the larger divisions which can have labels displaying category values. Minor tick marks are the smaller divisions which are placed between the major tick marks and have no labels. Tick marks also define where gridlines can be displayed, if the corresponding option is set at the <b>Layout</b> tab. You can adjust the following tick mark parameters:
|
||||
<ul>
|
||||
<li><b>Major/Minor Type</b> - is used to specify the following placement options: <b>None</b> to not display major/minor tick marks, <b>Cross</b> to display major/minor tick marks on both sides of the axis, <b>In</b> to display major/minor tick marks inside the axis, <b>Out</b> to display major/minor tick marks outside the axis.</li>
|
||||
<li><b>Interval between Marks</b> - is used to specify how many categories should be displayed between two adjacent tick marks.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <b>Label Options</b> section allows to adjust the appearance of labels which display categories.
|
||||
<ul>
|
||||
<li><b>Label Position</b> - is used to specify where the labels should be placed in regard to the horizontal axis. Select the necessary option from the drop-down list: <b>None</b> to not display category labels, <b>Low</b> to display category labels at the bottom of the plot area, <b>High</b> to display category labels at the top of the plot area, <b>Next to axis</b> to display category labels next to the axis.</li>
|
||||
<li><b>Axis Label Distance</b> - is used to specify how closely the labels should be placed to the axis. You can specify the necessary value in the entry field. The more the value you set, the more the distance between the axis and labels is.</li>
|
||||
<li><b>Interval between Labels</b> - is used to specify how often the labels should be displayed. The <b>Auto</b> option is selected by default, in this case labels are displayed for every category. You can select the <b>Manual</b> option from the drop-down list and specify the necessary value in the entry field on the right. For example, enter 2 to display labels for every other category etc.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p><img class="floatleft" alt="Moving chart" src="../images/moving_chart.png" />Once the chart is added, you can change its size and position. To change the chart size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges. To maintain the original proportions of the selected chart while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
|
||||
<p>To alter the chart position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the chart. Drag the chart to the necessary position without releasing the mouse button. When you move the chart, guide lines are displayed to help you position the object on the page precisely.</p>
|
||||
<hr />
|
||||
<p><img class="floatleft" alt="Chart Settings tab" src="../images/right_chart.png" />
|
||||
<p>Some of the chart settings can be altered using the <b>Chart Settings</b> tab of the right sidebar. To activate it click the chart and choose the <b>Chart Settings</b> <img alt="Chart Settings icon" src="../images/chart_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Size</b> is used to view the current chart <b>Width</b> and <b>Height</b>.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
|
||||
<li><b>Change Chart Type</b> is used to change the selected chart type and/or style.</li>
|
||||
<li><b>Edit Data</b> is used to open the 'Chart Editor' window.
|
||||
<p class="note"><b>Note</b>: to quickly open the 'Chart Editor' window you can also double-click the chart in the document.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Some of these options you can also find in the <b>right-click menu</b>. The menu options are:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
|
||||
<li><b>Arrange</b> is used to bring the selected chart to foreground, send to background, move forward or backward as well as group or ungroup charts to perform operations with several of them at once.</li>
|
||||
<li><b>Align</b> is used to align the chart left, center, right, top, middle, bottom.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind. The <b>Edit Wrap Boundary</b> option is unavailable for charts.</li>
|
||||
<li><b>Edit Data</b> is used to open the 'Chart Editor' window.</li>
|
||||
<li><b>Advanced Settings</b> is used to open the 'Chart - Advanced Settings' window.</li>
|
||||
</ul>
|
||||
<p>When the chart is selected, the <b>Shape Settings</b> <img alt="Shape Settings icon" src="../images/shape_settings_icon.png" /> icon is also available on the right, since a shape is used as a background for the chart. You can click this icon to open the <b>Shape Settings</b> tab at the right sidebar and adjust the shape <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill"><b>Fill</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke"><b>Stroke</b></a> and <b>Wrapping Style</b>. Note that you cannot change the shape type.</p>
|
||||
<hr />
|
||||
<p>To change the chart advanced settings, click the needed chart with the right mouse button and select <b>Advanced Settings</b> from the right-click menu or just click the <b>Show advanced settings</b> link at the right sidebar. The chart properties window will open:</p>
|
||||
<p><img alt="Chart - Advanced Settings: Size" src="../images/chart_properties.png" /></p>
|
||||
<p>The <b>Size</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Width</b> and <b>Height</b> - use these options to change the chart width and/or height. If the <b>Constant Proportions</b> <img alt="Constant Proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant Proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original chart aspect ratio.</li>
|
||||
</ul>
|
||||
<p><img alt="Chart - Advanced Settings: Text Wrapping" src="../images/chart_properties_1.png" /></p>
|
||||
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Wrapping Style</b> - use this option to change the way the chart is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
|
||||
<ul>
|
||||
<li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the chart is considered to be a part of the text, like a character, so when the text moves, the chart moves as well. In this case the positioning options are inaccessible.</p>
|
||||
<p>If one of the following styles is selected, the chart can be moved independently of the text and positioned on the page exactly:</p>
|
||||
</li>
|
||||
<li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the chart.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual chart edges.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the chart edges and fills in the open white space within the chart.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the chart.</p></li>
|
||||
<li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the chart overlaps the text.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the chart.</p></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you select the square, tight, through, or top and bottom style you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
|
||||
<p><img alt="Chart - Advanced Settings: Position" src="../images/chart_properties_2.png" /></p>
|
||||
<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
|
||||
<ul>
|
||||
<li><b>Horizontal</b> parameters include the chart <b>alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin as well as the chart <b>position to the right of</b> character, column, left margin, margin, page or right margin.</li>
|
||||
<li><b>Vertical</b> parameters include the chart <b>alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin as well as the chart <b>position below</b> line, margin, bottom margin, paragraph, page or top margin.</li>
|
||||
<li><b>Move object with text</b> controls whether the chart moves as the text to which it is anchored moves.</li>
|
||||
<li><b>Allow overlap</b> controls whether two charts overlap or not if you drag them near each other on the page.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert equations</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert equations and mathematical symbols." />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert equations</h1>
|
||||
<p>To insert an equation (including mathematical symbols, fractions, accents etc.),</p>
|
||||
<ol>
|
||||
<li>put the cursor within the necessary line ,</li>
|
||||
<li>click the <b>Insert Equation</b> <img alt="Insert Equation icon" src="../images/insertequationicon.png" /> icon at the top toolbar,</li>
|
||||
<li>in the opened drop-down list select the equation category you need. The following categories are currently available: <em>Symbols</em>, <em>Fractions</em>, <em>Scripts</em>, <em>Radicals</em>, <em>Integrals</em>, <em>Large Operators</em>, <em>Brackets</em>, <em>Functions</em>, <em>Accents</em>, <em>Limits and Logarithms</em>, <em>Operators</em>, <em>Matrixes</em>,</li>
|
||||
<li>click the certain symbol/equation in the corresponding set of templates.</li>
|
||||
</ol>
|
||||
<p>The selected symbol/equation box will be inserted at the cursor position. If the selected line is empty, the equation will be centered. To align such an equation left or right, click on the equation box and use the <img alt="Align Left icon" src="../images/alignleft.png" /> or <img alt="Align Right icon" src="../images/alignright.png" /> icon at the top toolbar.</p>
|
||||
<img alt="Inserted Equation" src="../images/insertedequation.png" />
|
||||
<p>If the equation template contains a placeholder (a small dotted box <img alt="Equation Placeholder" src="../images/equationplaceholder.png" />), click within it and type in a desired number/symbol using the keyboard. Build your equation by typing the necessary values into all the placeholders.</p>
|
||||
<img alt="Edited Equation" src="../images/editedequation.png" />
|
||||
<p>The existing values can be edited in the same way.</p>
|
||||
<img alt="Edited Equation" src="../images/editedequation2.png" />
|
||||
<p>To delete the added equation select it completely by double clicking it. The equation will be highlighted blue. Then press the <b>Delete</b> key on the keyboard.</p>
|
||||
<img alt="Delete Equation" src="../images/deleteequation.png" />
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,31 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert headers and footers</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert headers and footers into your document, add different headers and footer to the first page or odd and even pages" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert headers and footers</h1>
|
||||
<p>To add a header or footer to your document or edit the existing one,</p>
|
||||
<ol>
|
||||
<li>click the <b>Edit Header or Footer</b> <img alt="Edit Header or Footer icon" src="../images/headerfooter.png" /> icon at the top toolbar,</li>
|
||||
<li>select one of the following options:
|
||||
<ul>
|
||||
<li><b>Edit Header</b> to insert or edit the header text.</li>
|
||||
<li><b>Edit Footer</b> to insert or edit the footer text.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>change the current parameters for headers or footers at the right sidebar: the <b>position</b> of text relative to the top (for headers) or bottom (for footers) of the page.
|
||||
You can also check the <b>Different first page</b> box to apply a different header or footer to the very first page or in case you don't want to add any header/ footer to it at all. The <b>Different odd and even pages</b> box is used to add different headers/footer for odd and even pages.
|
||||
<p><img alt="Right Sidebar - Header and Footer Settings" src="../images/right_headerfooter.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To enter a text or edit the already entered text and adjust the header or footer settings, you can also double-click within the upper or lower part of a page or click with the right mouse button there and select the only menu option - <b>Edit Header</b> or <b>Edit Footer</b>.</p>
|
||||
<p>To switch to the document body, double-click within the working area. The text you use as a header or footer will be displayed in gray.</p>
|
||||
<p class="note"><b>Note</b>: please refer to the <a href="InsertPageNumbers.htm">Insert page numbers</a> section to learn how to add page numbers to your document.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert headers and footers</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert headers and footers into your document, add different headers and footer to the first page or odd and even pages" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert headers and footers</h1>
|
||||
<p>To add a header or footer to your document or edit the existing one,</p>
|
||||
<ol>
|
||||
<li>click the <b>Edit Header or Footer</b> <img alt="Edit Header or Footer icon" src="../images/headerfooter.png" /> icon at the top toolbar,</li>
|
||||
<li>select one of the following options:
|
||||
<ul>
|
||||
<li><b>Edit Header</b> to insert or edit the header text.</li>
|
||||
<li><b>Edit Footer</b> to insert or edit the footer text.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>change the current parameters for headers or footers at the right sidebar:
|
||||
<p><img alt="Right Sidebar - Header and Footer Settings" src="../images/right_headerfooter.png" /></p>
|
||||
<ul>
|
||||
<li>Set the <b>Position</b> of text relative to the top (for headers) or bottom (for footers) of the page.</li>
|
||||
<li>Check the <b>Different first page</b> box to apply a different header or footer to the very first page or in case you don't want to add any header/ footer to it at all.</li>
|
||||
<li>Use the <b>Different odd and even pages</b> box to add different headers/footer for odd and even pages.</li>
|
||||
<li>The <b>Link to Previous</b> option is available in case you've previously added <a href="../UsageInstructions/SectionBreaks.htm">sections</a> into your document. If not, it will be grayed out. Moreover, this option is also unavailable for the very first section (i.e. when a header or footer that belongs to the first section is selected). By default, this box is checked, so that the same headers/footers are applied to all the sections. If you select a header or footer area, you will see that the area is marked with the <b>Same as Previous</b> label. Uncheck the <b>Link to Previous</b> box to use different headers/footers for each section of the document. The <b>Same as Previous</b> label will no longer be displayed.</li>
|
||||
</ul>
|
||||
<p><img alt="Same as previous label" src="../images/sameasprevious_label.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To enter a text or edit the already entered text and adjust the header or footer settings, you can also double-click within the upper or lower part of a page or click with the right mouse button there and select the only menu option - <b>Edit Header</b> or <b>Edit Footer</b>.</p>
|
||||
<p>To switch to the document body, double-click within the working area. The text you use as a header or footer will be displayed in gray.</p>
|
||||
<p class="note"><b>Note</b>: please refer to the <a href="InsertPageNumbers.htm">Insert page numbers</a> section to learn how to add page numbers to your document.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,78 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert images</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add an image to your document and adjust its position and properties" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert images</h1>
|
||||
<p>In ONLYOFFICE™ Document Editor, you can insert images in the most popular formats into your document. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>, <b>ICO</b>.</p>
|
||||
<p>To insert an image into the document text,</p>
|
||||
<ol>
|
||||
<li>place the cursor where you want the image to be put,</li>
|
||||
<li>click the <b>Insert Image</b> <img alt="Insert Image icon" src="../images/image.png" /> icon at the top toolbar,</li>
|
||||
<li>select one of the following options to load the image:
|
||||
<ul>
|
||||
<li>the <b>Picture from File</b> option will open the standard Windows dialog window for file selection. Browse your computer hard disk drive for the necessary file and click the <b>Open</b> button</li>
|
||||
<li>the <b>Picture from URL</b> option will open the window where you can enter the necessary image web address and click the <b>OK</b> button</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>once the image is added you can change its size, properties, and position.</li>
|
||||
</ol>
|
||||
<p><img class="floatleft" alt="Moving image" src="../images/moving_image.png" />To change the image size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges. To maintain the original proportions of the selected image while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
|
||||
<p>To alter the image position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the image. Drag the image to the necessary position without releasing the mouse button.</p>
|
||||
<p>To rotate the image, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
|
||||
<hr />
|
||||
<p><img class="floatleft" alt="Image Settings tab" src="../images/right_image.png" />Some of the image settings can be altered using the <b>Image Settings</b> tab of the right sidebar. To activate it click the image and choose the <b>Image Settings</b> <img alt="Image Settings icon" src="../images/image_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Size</b> is used to view the current image <b>Width</b> and <b>Height</b> or restore the image <b>Default Size</b> if necessary.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
|
||||
<li><b>Replace Image</b> is used to replace the current image loading another one from file or URL.</li>
|
||||
</ul>
|
||||
<p>Some of these options you can also find in the <b>right-click menu</b>. The menu options are:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Arrange</b> is used to bring the selected image to foreground, send to background, move forward or backward as well as group or ungroup images to perform operations with several of them at once.</li>
|
||||
<li><b>Align</b> is used to align the image left, center, right, top, middle, bottom.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <img alt="Editing Wrap Boundary" src="../images/wrap_boundary.png" /></li>
|
||||
<li><b>Default Size</b> is used to change the current image size to the default one.</li>
|
||||
<li><b>Advanced Settings</b> is used to open the 'Image - Advanced Settings' window.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>To change its advanced settings, click the image with the right mouse button and select <b>Advanced Settings</b> from the right-click menu or just click the <b>Show advanced settings</b> link at the right sidebar. The image properties window will open:</p>
|
||||
<p><img alt="Image - Advanced Settings: Size" src="../images/image_properties.png" /></p>
|
||||
<p>The <b>Size</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Width</b> and <b>Height</b> - use these options to change the image width and/or height. If the <b>Constant Proportions</b> <img alt="Constant Proportions icon" src="../images/constantproportions.png" /> button is clicked, the width and height will be changed together preserving the original image aspect ratio. To restore the default size of the added image, click the <b>Default Size</b> button.</li>
|
||||
</ul>
|
||||
<p><img alt="Image - Advanced Settings: Text Wrapping" src="../images/image_properties_1.png" /></p>
|
||||
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Wrapping Style</b> - use this option to change the way the image is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
|
||||
<ul>
|
||||
<li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the image is considered to be a part of the text, like a character, so when the text moves, the image moves as well. In this case the positioning options are inaccessible.</p>
|
||||
<p>If one of the following styles is selected, the image can be moved independently of the text and positioned on the page exactly:</p>
|
||||
</li>
|
||||
<li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the image.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual image edges.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the image edges and fills in the open white space within the image. So that the effect can appear, use the <b>Edit Wrap Boundary</b> option from the right-click menu.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the image.</p></li>
|
||||
<li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the image overlaps the text.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the image.</p></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you select the square, tight, through, or top and bottom style, you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
|
||||
<p><img alt="Image - Advanced Settings: Position" src="../images/image_properties_2.png" /></p>
|
||||
<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
|
||||
<ul>
|
||||
<li><b>Horizontal</b> parameters include the image <b>alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin as well as the image <b>position to the right of</b> character, column, left margin, margin, page or right margin.</li>
|
||||
<li><b>Vertical</b> parameters include the image <b>alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin as well as the image <b>position below</b> line, margin, bottom margin, paragraph, page or top margin.</li>
|
||||
<li><b>Move object with text</b> controls whether the image moves as the text to which it is anchored moves.</li>
|
||||
<li><b>Allow overlap</b> controls whether two images overlap or not if you drag them near each other on the page.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert images</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add an image to your document and adjust its position and properties" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert images</h1>
|
||||
<p>In Document Editor, you can insert images in the most popular formats into your document. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>, <b>ICO</b>.</p>
|
||||
<p>To insert an image into the document text,</p>
|
||||
<ol>
|
||||
<li>place the cursor where you want the image to be put,</li>
|
||||
<li>click the <b>Insert Image</b> <img alt="Insert Image icon" src="../images/image.png" /> icon at the top toolbar,</li>
|
||||
<li>select one of the following options to load the image:
|
||||
<ul>
|
||||
<li>the <b>Picture from File</b> option will open the standard Windows dialog window for file selection. Browse your computer hard disk drive for the necessary file and click the <b>Open</b> button</li>
|
||||
<li>the <b>Picture from URL</b> option will open the window where you can enter the necessary image web address and click the <b>OK</b> button</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>once the image is added you can change its size, properties, and position.</li>
|
||||
</ol>
|
||||
<p><img class="floatleft" alt="Moving image" src="../images/moving_image.png" />To change the image size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges. To maintain the original proportions of the selected image while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
|
||||
<p>To alter the image position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the image. Drag the image to the necessary position without releasing the mouse button.</p>
|
||||
<p>When you move the image, guide lines are displayed to help you position the object on the page precisely.</p>
|
||||
<p>To rotate the image, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
|
||||
<hr />
|
||||
<p><img class="floatleft" alt="Image Settings tab" src="../images/right_image.png" />Some of the image settings can be altered using the <b>Image Settings</b> tab of the right sidebar. To activate it click the image and choose the <b>Image Settings</b> <img alt="Image Settings icon" src="../images/image_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Size</b> is used to view the current image <b>Width</b> and <b>Height</b> or restore the image <b>Default Size</b> if necessary.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
|
||||
<li><b>Replace Image</b> is used to replace the current image loading another one from file or URL.</li>
|
||||
</ul>
|
||||
<p>Some of these options you can also find in the <b>right-click menu</b>. The menu options are:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
|
||||
<li><b>Arrange</b> is used to bring the selected image to foreground, send to background, move forward or backward as well as group or ungroup images to perform operations with several of them at once.</li>
|
||||
<li><b>Align</b> is used to align the image left, center, right, top, middle, bottom.</li>
|
||||
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <img alt="Editing Wrap Boundary" src="../images/wrap_boundary.png" /></li>
|
||||
<li><b>Default Size</b> is used to change the current image size to the default one.</li>
|
||||
<li><b>Advanced Settings</b> is used to open the 'Image - Advanced Settings' window.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>To change its advanced settings, click the image with the right mouse button and select <b>Advanced Settings</b> from the right-click menu or just click the <b>Show advanced settings</b> link at the right sidebar. The image properties window will open:</p>
|
||||
<p><img alt="Image - Advanced Settings: Size" src="../images/image_properties.png" /></p>
|
||||
<p>The <b>Size</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Width</b> and <b>Height</b> - use these options to change the image width and/or height. If the <b>Constant Proportions</b> <img alt="Constant Proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant Proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original image aspect ratio. To restore the default size of the added image, click the <b>Default Size</b> button.</li>
|
||||
</ul>
|
||||
<p><img alt="Image - Advanced Settings: Text Wrapping" src="../images/image_properties_1.png" /></p>
|
||||
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Wrapping Style</b> - use this option to change the way the image is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
|
||||
<ul>
|
||||
<li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the image is considered to be a part of the text, like a character, so when the text moves, the image moves as well. In this case the positioning options are inaccessible.</p>
|
||||
<p>If one of the following styles is selected, the image can be moved independently of the text and positioned on the page exactly:</p>
|
||||
</li>
|
||||
<li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the image.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual image edges.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the image edges and fills in the open white space within the image. So that the effect can appear, use the <b>Edit Wrap Boundary</b> option from the right-click menu.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the image.</p></li>
|
||||
<li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the image overlaps the text.</p></li>
|
||||
<li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the image.</p></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you select the square, tight, through, or top and bottom style, you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
|
||||
<p><img alt="Image - Advanced Settings: Position" src="../images/image_properties_2.png" /></p>
|
||||
<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
|
||||
<ul>
|
||||
<li><b>Horizontal</b> parameters include the image <b>alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin as well as the image <b>position to the right of</b> character, column, left margin, margin, page or right margin.</li>
|
||||
<li><b>Vertical</b> parameters include the image <b>alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin as well as the image <b>position below</b> line, margin, bottom margin, paragraph, page or top margin.</li>
|
||||
<li><b>Move object with text</b> controls whether the image moves as the text to which it is anchored moves.</li>
|
||||
<li><b>Allow overlap</b> controls whether two images overlap or not if you drag them near each other on the page.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert page numbers</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert page numbers to navigate through your document easier" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert page numbers</h1>
|
||||
<p>To insert page numbers into your document,</p>
|
||||
<ol>
|
||||
<li>click the <b>Edit Header or Footer</b> <img alt="Edit Header or Footer icon" src="../images/headerfooter.png" /> icon at the top toolbar,</li>
|
||||
<li>click <b>Insert Page Number</b>,</li>
|
||||
<li>select one of the following options:
|
||||
<ul>
|
||||
<li>To put a page number to each page of your document, select the page number position on the page.</li>
|
||||
<li>To insert a page number at the current cursor position, select the <b>To Current Position</b> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p>To edit the page number settings,</p>
|
||||
<ol>
|
||||
<li>double-click the page number added,</li>
|
||||
<li>change the current parameters at the right sidebar: the <b>position</b> of page numbers on the page as well as relative to the top and bottom of the page.
|
||||
You can also check the <b>Different first page</b> box to apply a different page number to the very first page or in case you don't want to add any number to it at all. The <b>Different odd and even pages</b> box is used to insert different page numbers for odd and even pages.
|
||||
<p><img alt="Right Sidebar - Header and Footer Settings" src="../images/right_headerfooter.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To return to the document editing, double-click within the working area.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert page numbers</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert page numbers to navigate through your document easier" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert page numbers</h1>
|
||||
<p>To insert page numbers into your document,</p>
|
||||
<ol>
|
||||
<li>click the <b>Edit Header or Footer</b> <img alt="Edit Header or Footer icon" src="../images/headerfooter.png" /> icon at the top toolbar,</li>
|
||||
<li>choose the <b>Insert Page Number</b> submenu,</li>
|
||||
<li>select one of the following options:
|
||||
<ul>
|
||||
<li>To put a page number to each page of your document, select the page number position on the page.</li>
|
||||
<li>To insert a page number at the current cursor position, select the <b>To Current Position</b> option.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p>To edit the page number settings,</p>
|
||||
<ol>
|
||||
<li>double-click the page number added,</li>
|
||||
<li>change the current parameters at the right sidebar:
|
||||
<p><img alt="Right Sidebar - Header and Footer Settings" src="../images/right_headerfooter.png" /></p>
|
||||
<ul>
|
||||
<li>Set the <b>Position</b> of page numbers on the page as well as relative to the top and bottom of the page.</li>
|
||||
<li>Check the <b>Different first page</b> box to apply a different page number to the very first page or in case you don't want to add any number to it at all. </li>
|
||||
<li>Use the <b>Different odd and even pages</b> box to insert different page numbers for odd and even pages. </li>
|
||||
<li>The <b>Link to Previous</b> option is available in case you've previously added <a href="../UsageInstructions/SectionBreaks.htm">sections</a> into your document. If not, it will be grayed out. Moreover, this option is also unavailable for the very first section (i.e. when a header or footer that belongs to the first section is selected). By default, this box is checked, so that unified numbering is applied to all the sections. If you select a header or footer area, you will see that the area is marked with the <b>Same as Previous</b> label. Uncheck the <b>Link to Previous</b> box to use different page numbering for each section of the document, for example, to start each section numbering at 1. The <b>Same as Previous</b> label will no longer be displayed.</li>
|
||||
</ul>
|
||||
<p><img alt="Same as previous label" src="../images/sameasprevious_label.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To return to the document editing, double-click within the working area.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,112 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert tables</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add a table to your document and adjust its properties" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert tables</h1>
|
||||
<p>To insert a table into the document text,</p>
|
||||
<ol>
|
||||
<li>place the cursor where you want the table to be put,</li>
|
||||
<li>click the <b>Insert Table</b> <img alt="Insert Table icon" src="../images/table.png" /> icon at the top toolbar,</li>
|
||||
<li>select the option to create a table:
|
||||
<ul>
|
||||
<li><p>either a table with predefined number of cells (10 by 8 cells maximum)</p>
|
||||
<p>If you want to quickly add a table, just select the number of rows (8 maximum) and columns (10 maximum).</p></li>
|
||||
<li><p>or a custom table</p>
|
||||
<p>In case you need more than 10 by 8 cell table, select the <b>Insert Custom Table</b> option that will open the window where you can enter the necessary number of rows and columns respectively, then click the <b>OK</b> button.</p>
|
||||
<p><img alt="Custom table" src="../images/customtable.png" /></p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>once the table is added you can change its properties and position.</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p>Some of the table properties as well as its structure can be altered using the right-click menu. The menu options are:</p>
|
||||
<ul>
|
||||
<li><b>Select</b> is used to select a row, column, cell, or table.</li>
|
||||
<li><b>Insert Row</b> is used to insert a row above or below the row where the cursor is placed.</li>
|
||||
<li><b>Insert Column</b> is used to insert a column at the left or right side from the column where the cursor is placed.</li>
|
||||
<li><b>Delete</b> is used to delete a row, column or table.</li>
|
||||
<li><b>Merge Cells</b> is available if two or more cells are selected and is used to merge them.</li>
|
||||
<li><b>Split Cell...</b> is used to open a window where you can select the needed number of columns and rows the cell will be split in.</li>
|
||||
<li><b>Cell Vertical Alignment</b> is used to align the text top, center or bottom in the selected cell.</li>
|
||||
<li><b>Wrapping Style - Inline</b> is used to select the inline style (when the text is broken by the table) as well as the alignment: left, center, right.</li>
|
||||
<li><b>Wrapping Style - Flow</b> is used to select the flow style when the text is wrapped around the table.</li>
|
||||
<li><b>Table Advanced Settings</b> is used to open the 'Table - Advanced Settings' window.</li>
|
||||
<li><b>Hyperlink</b> is used to insert a hyperlink.</li>
|
||||
<li><b>Paragraph</b> is used to keep lines together or open the 'Paragraph - Advanced Settings' window.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p><img class="floatleft"alt="Right Sidebar - Table Settings" src="../images/right_table.png" /></p>
|
||||
<p>You can also change the table properties at the right sidebar:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><p><b>Rows</b> and <b>Columns</b> are used to select the table parts that you want to be highlighted.</p>
|
||||
<p>For rows:</p>
|
||||
<ul>
|
||||
<li><i>Header</i> - to highlight the first row</li>
|
||||
<li><i>Total</i> - to highlight the last row</li>
|
||||
<li><i>Banded</i> - to highlight every other row</li>
|
||||
</ul>
|
||||
<p>For columns:</p>
|
||||
<ul>
|
||||
<li><i>First</i> - to highlight the first column</li>
|
||||
<li><i>Last</i> - to highlight the last column</li>
|
||||
<li><i>Banded</i> - to highlight every other column</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p><b>Select from Template</b> is used to choose a table template from the available ones.</p></li>
|
||||
<li><p><b>Borders Style</b> is used to select the border size, color, style as well as background color.</p></li>
|
||||
<li><p><b>Text Wrapping</b> is used to select between two text wrapping styles - inline and flow.</p></li>
|
||||
<li><p><b>Rows & Columns</b> is used to perform some operations with the table: select, delete, insert rows and columns, merge cells, split a cell.</p></li>
|
||||
<li><p><b>Repeat as header row at the top of each page</b> is used to insert the same header row at the top of each page in long tables.</p></li>
|
||||
<li><p><b>Show advanced settings</b> is used to open the 'Table - Advanced Settings' window.</p></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>To change the advanced table properties, click the table with the right mouse button and select the <b>Table Advanced Settings</b> option from the right-click menu or use the <b>Show advanced settings</b> link at the right sidebar. The table properties window will open:</p>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_1.png" />
|
||||
<p>The <b>Width & Spaces</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Width</b> - the table width selected manually or automatically adjusted to fit the page width.</li>
|
||||
<li><b>Allow spacing between cells</b> - the cell spacing which will be filled with the <b>Table Background</b> color.</li>
|
||||
<li><b>Automatically resize to fit contents</b> - enables automatic change of each column width in accordance with the text within its cells.</li>
|
||||
<li><b>Default Margins</b> - the space between the text within the cells and the cell border used by default. The values can be altered.</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_2.png" />
|
||||
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li>Text wrapping style - <b>Inline</b> or <b>Flow</b>. Use the necessary option to change the way the table is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select the flow style).</li>
|
||||
<li>After you select the wrapping style, the additional wrapping parameters can be set both for inline and flow wrapping style:
|
||||
<ul>
|
||||
<li>For the inline style, you can specify the table <b>alignment</b> and <b>indent from left</b>.</li>
|
||||
<li>For the flow style, you can specify the <b>distance from text</b> and table <b>position</b> at the <b>Position</b> tab.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_3.png" />
|
||||
<p>The <b>Borders & Background</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Border</b> parameters (size, color and presence or absence) - set the border size, select its color and choose the way it will be displayed in the cells.
|
||||
<p class="note"><b>Note</b>: in case you select not to show table borders clicking the <img alt="No borders" src="../images/noborders.png" /> button or deselecting all the borders manually on the diagram, they will be indicated by a dotted line in the document.
|
||||
To make them disappear at all, click the <b>Nonprinting Characters</b> <img alt="Nonprinting Characters" src="../images/nonprintingcharacters.png" /> icon at the top toolbar and select the <b>Hidden Table Borders</b> option.</p>
|
||||
</li>
|
||||
<li><b>Cell Background</b> - the color for the background within the cells (available only if one or more cells are selected or the <b>Allow spacing between cells</b> option is selected at the <b>Width & Spaces</b> tab).</li>
|
||||
<li><b>Table Background</b> - the color for the table background or the space background between the cells in case the <b>Allow spacing between cells</b> option is selected at the <b>Width & Spaces</b> tab.</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_4.png" />
|
||||
<p>The <b>Position</b> tab is available only if the <b>Flow</b> option at the <b>Text Wrapping</b> tab is selected and contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Horizontal</b> parameters include the table <b>alignment</b> (left, center, right) <b>relative to</b> margin, page or text as well as the table <b>position to the right of</b> margin, page or text.</li>
|
||||
<li><b>Vertical</b> parameters include the table <b>alignment</b> (top, center, bottom) <b>relative to</b> margin, page or text as well as the table <b>position below</b> margin, page or text.</li>
|
||||
<li><b>Move object with text</b> controls whether the table moves as the text into which it is inserted moves.</li>
|
||||
<li><b>Allow overlap</b> controls whether two tables are merged into one large table or overlap if you drag them near each other on the page.</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_5.png" />
|
||||
<p>The <b>Cell Properties</b> tab allows to adjust the <b>Cell Margins</b> - i.e. the space between the text within the cells and the cell border. Can be set to default (the default values can also be altered at the <b>Width & Spaces</b> tab), or entered manually.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert tables</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Add a table to your document and adjust its properties" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert tables</h1>
|
||||
<p>To insert a table into the document text,</p>
|
||||
<ol>
|
||||
<li>place the cursor where you want the table to be put,</li>
|
||||
<li>click the <b>Insert Table</b> <img alt="Insert Table icon" src="../images/table.png" /> icon at the top toolbar,</li>
|
||||
<li>select the option to create a table:
|
||||
<ul>
|
||||
<li><p>either a table with predefined number of cells (10 by 8 cells maximum)</p>
|
||||
<p>If you want to quickly add a table, just select the number of rows (8 maximum) and columns (10 maximum).</p></li>
|
||||
<li><p>or a custom table</p>
|
||||
<p>In case you need more than 10 by 8 cell table, select the <b>Insert Custom Table</b> option that will open the window where you can enter the necessary number of rows and columns respectively, then click the <b>OK</b> button.</p>
|
||||
<p><img alt="Custom table" src="../images/customtable.png" /></p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>once the table is added you can change its properties and position.</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p>Some of the table properties as well as its structure can be altered using the right-click menu. The menu options are:</p>
|
||||
<ul>
|
||||
<li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
|
||||
<li><b>Select</b> is used to select a row, column, cell, or table.</li>
|
||||
<li><b>Insert</b> is used to insert a row above or row below the row where the cursor is placed as well as to insert a column at the left or right side from the column where the cursor is placed.</li>
|
||||
<li><b>Delete</b> is used to delete a row, column or table.</li>
|
||||
<li><b>Merge Cells</b> is available if two or more cells are selected and is used to merge them.</li>
|
||||
<li><b>Split Cell...</b> is used to open a window where you can select the needed number of columns and rows the cell will be split in.</li>
|
||||
<li><b>Cell Vertical Alignment</b> is used to align the text top, center or bottom in the selected cell.</li>
|
||||
<li><b>Wrapping Style - Inline</b> is used to select the inline style (when the text is broken by the table) as well as the alignment: left, center, right.</li>
|
||||
<li><b>Wrapping Style - Flow</b> is used to select the flow style when the text is wrapped around the table.</li>
|
||||
<li><b>Table Advanced Settings</b> is used to open the 'Table - Advanced Settings' window.</li>
|
||||
<li><b>Hyperlink</b> is used to insert a hyperlink.</li>
|
||||
<li><b>Paragraph</b> is used to keep lines together or open the 'Paragraph - Advanced Settings' window.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p><img class="floatleft"alt="Right Sidebar - Table Settings" src="../images/right_table.png" /></p>
|
||||
<p>You can also change the table properties at the right sidebar:</p>
|
||||
<ul style="margin-left: 280px;">
|
||||
<li><p><b>Rows</b> and <b>Columns</b> are used to select the table parts that you want to be highlighted.</p>
|
||||
<p>For rows:</p>
|
||||
<ul>
|
||||
<li><i>Header</i> - to highlight the first row</li>
|
||||
<li><i>Total</i> - to highlight the last row</li>
|
||||
<li><i>Banded</i> - to highlight every other row</li>
|
||||
</ul>
|
||||
<p>For columns:</p>
|
||||
<ul>
|
||||
<li><i>First</i> - to highlight the first column</li>
|
||||
<li><i>Last</i> - to highlight the last column</li>
|
||||
<li><i>Banded</i> - to highlight every other column</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p><b>Select from Template</b> is used to choose a table template from the available ones.</p></li>
|
||||
<li><p><b>Borders Style</b> is used to select the border size, color, style as well as background color.</p></li>
|
||||
<li><p><b>Text Wrapping</b> is used to select between two text wrapping styles - inline and flow.</p></li>
|
||||
<li><p><b>Rows & Columns</b> is used to perform some operations with the table: select, delete, insert rows and columns, merge cells, split a cell.</p></li>
|
||||
<li><p><b>Repeat as header row at the top of each page</b> is used to insert the same header row at the top of each page in long tables.</p></li>
|
||||
<li><p><b>Show advanced settings</b> is used to open the 'Table - Advanced Settings' window.</p></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p>To change the advanced table properties, click the table with the right mouse button and select the <b>Table Advanced Settings</b> option from the right-click menu or use the <b>Show advanced settings</b> link at the right sidebar. The table properties window will open:</p>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_1.png" />
|
||||
<p>The <b>Width & Spaces</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Width</b> - the table width selected manually or automatically adjusted to fit the page width.
|
||||
<p class="note"><b>Note</b>: you can also adjust the table size manually changing the row height and column width. Move the mouse cursor over a row/column border untill it turns into the bidirectional arrow and drag the border. You can also use the <img alt="Table - Column Width Marker" src="../images/columnwidthmarker.png" /> markers on the horizontal ruler to change the column width and the <img alt="Table - Row Height Marker" src="../images/rowheightmarker.png" /> markers on the vertical ruler to change the row height.</p>
|
||||
</li>
|
||||
<li><b>Allow spacing between cells</b> - the cell spacing which will be filled with the <b>Table Background</b> color.</li>
|
||||
<li><b>Automatically resize to fit contents</b> - enables automatic change of each column width in accordance with the text within its cells.</li>
|
||||
<li><b>Default Margins</b> - the space between the text within the cells and the cell border used by default. The values can be altered.</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_2.png" />
|
||||
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li>Text wrapping style - <b>Inline</b> or <b>Flow</b>. Use the necessary option to change the way the table is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select the flow style).</li>
|
||||
<li>After you select the wrapping style, the additional wrapping parameters can be set both for inline and flow wrapping style:
|
||||
<ul>
|
||||
<li>For the inline style, you can specify the table <b>alignment</b> and <b>indent from left</b>.</li>
|
||||
<li>For the flow style, you can specify the <b>distance from text</b> and table <b>position</b> at the <b>Position</b> tab.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_3.png" />
|
||||
<p>The <b>Borders & Background</b> tab contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Border</b> parameters (size, color and presence or absence) - set the border size, select its color and choose the way it will be displayed in the cells.
|
||||
<p class="note"><b>Note</b>: in case you select not to show table borders clicking the <img alt="No borders" src="../images/noborders.png" /> button or deselecting all the borders manually on the diagram, they will be indicated by a dotted line in the document.
|
||||
To make them disappear at all, click the <b>Nonprinting Characters</b> <img alt="Nonprinting Characters" src="../images/nonprintingcharacters.png" /> icon at the top toolbar and select the <b>Hidden Table Borders</b> option.</p>
|
||||
</li>
|
||||
<li><b>Cell Background</b> - the color for the background within the cells (available only if one or more cells are selected or the <b>Allow spacing between cells</b> option is selected at the <b>Width & Spaces</b> tab).</li>
|
||||
<li><b>Table Background</b> - the color for the table background or the space background between the cells in case the <b>Allow spacing between cells</b> option is selected at the <b>Width & Spaces</b> tab.</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_4.png" />
|
||||
<p>The <b>Position</b> tab is available only if the <b>Flow</b> option at the <b>Text Wrapping</b> tab is selected and contains the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Horizontal</b> parameters include the table <b>alignment</b> (left, center, right) <b>relative to</b> margin, page or text as well as the table <b>position to the right of</b> margin, page or text.</li>
|
||||
<li><b>Vertical</b> parameters include the table <b>alignment</b> (top, center, bottom) <b>relative to</b> margin, page or text as well as the table <b>position below</b> margin, page or text.</li>
|
||||
<li><b>Move object with text</b> controls whether the table moves as the text into which it is inserted moves.</li>
|
||||
<li><b>Allow overlap</b> controls whether two tables are merged into one large table or overlap if you drag them near each other on the page.</li>
|
||||
</ul>
|
||||
<img alt="Table - Advanced Settings" src="../images/table_properties_5.png" />
|
||||
<p>The <b>Cell Properties</b> tab allows to adjust the <b>Cell Margins</b> - i.e. the space between the text within the cells and the cell border. Can be set to default (the default values can also be altered at the <b>Width & Spaces</b> tab), or entered manually.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set paragraph line spacing</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Set paragraph line spacing in your document" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set paragraph line spacing</h1>
|
||||
<p>In ONLYOFFICE™ Document Editor, you can set the line height for the text lines within the paragraph as well as the margins between the current and the preceding or the subsequent paragraph.</p>
|
||||
<p>To do that,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
|
||||
<li>use the corresponding fields at the right sidebar to achieve the desired results:
|
||||
<ul>
|
||||
<li><b>Line Spacing</b> - set the line height for the text lines within the paragraph. You can select among three options: <b>at least</b> (sets the minimum line spacing that is needed to fit the largest font or graphic on the line), <b>multiple</b> (sets line spacing that can be expressed in numbers greater than 1), <b>exactly</b> (sets fixed line spacing). In the <b>At</b> field you can specify the necessary value.</li>
|
||||
<li><b>Before</b> - set the amount of space before the paragraph.</li>
|
||||
<li><b>After</b> - set the amount of space after the paragraph.</li>
|
||||
<li><b>Don't add interval between paragraphs of the same style</b> - check this box in case you don't need any space between paragraphs of the same style.
|
||||
<p><img alt="Right Sidebar - Paragraph Settings" src="../images/right_paragraph.png" /></p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To quickly change the current paragraph line spacing, you can also use the <b>Paragraph Line Spacing</b> <img alt="Paragraph Line Spacing" src="../images/linespacing.png" /> icon at the top toolbar selecting the needed value from the list: 1.0, 1.15, 1.5, 2.0, 2.5, or 3.0 lines.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set paragraph line spacing</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Set paragraph line spacing in your document" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set paragraph line spacing</h1>
|
||||
<p>In Document Editor, you can set the line height for the text lines within the paragraph as well as the margins between the current and the preceding or the subsequent paragraph.</p>
|
||||
<p>To do that,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
|
||||
<li>use the corresponding fields at the right sidebar to achieve the desired results:
|
||||
<ul>
|
||||
<li><b>Line Spacing</b> - set the line height for the text lines within the paragraph. You can select among three options: <b>at least</b> (sets the minimum line spacing that is needed to fit the largest font or graphic on the line), <b>multiple</b> (sets line spacing that can be expressed in numbers greater than 1), <b>exactly</b> (sets fixed line spacing). In the <b>At</b> field you can specify the necessary value.</li>
|
||||
<li><b>Before</b> - set the amount of space before the paragraph.</li>
|
||||
<li><b>After</b> - set the amount of space after the paragraph.</li>
|
||||
<li><b>Don't add interval between paragraphs of the same style</b> - check this box in case you don't need any space between paragraphs of the same style.
|
||||
<p><img alt="Right Sidebar - Paragraph Settings" src="../images/right_paragraph.png" /></p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To quickly change the current paragraph line spacing, you can also use the <b>Paragraph Line Spacing</b> <img alt="Paragraph Line Spacing" src="../images/linespacing.png" /> icon at the top toolbar selecting the needed value from the list: 1.0, 1.15, 1.5, 2.0, 2.5, or 3.0 lines.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Show/hide nonprinting characters</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Show or hide nonprinting characters while formatting text, creating tables, and editing documents" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Show/hide nonprinting characters</h1>
|
||||
<p>Nonprinting characters help you edit a document. They indicate the presence of various types of formatting, but they do not print with the document, even when they are displayed on the screen.</p>
|
||||
<p>To show or hide nonprinting characters, click the <b>Nonprinting Characters</b> <img alt="Nonprinting Characters" src="../images/nonprintingcharacters.png" /> icon at the top toolbar.</p>
|
||||
<p>Nonprinting characters include:</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Spaces</td>
|
||||
<td><img alt="Space" src="../images/space.png" /></td>
|
||||
<td>Inserted when you press the <b>Spacebar</b> on the keyboard. It creates a space between characters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tabs</td>
|
||||
<td><img alt="Tab" src="../images/tab.png" /></td>
|
||||
<td>Inserted when you press the <b>Tab</b> key. It's used to advance the cursor to the next tab stop.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paragraph marks (i.e. hard returns)</td>
|
||||
<td><img alt="Hard return" src="../images/hard.png" /></td>
|
||||
<td>Inserted when you press the <b>Enter</b> key. It ends a paragraph and adds a bit of space after it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Line breaks (i.e. soft returns)</td>
|
||||
<td><img alt="Soft return" src="../images/soft.png" /></td>
|
||||
<td>Inserted when you use the <b>Shift+Enter</b> key combination. It breaks the current line and puts lines of text close together. Soft return is primarily used in titles and headings.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nonbreaking spaces</td>
|
||||
<td><img alt="Nonbreaking space" src="../images/nonbreakspace.png" /></td>
|
||||
<td>Inserted when you use the <b>Ctrl+Shift+Spacebar</b> key combination. It creates a space between characters which can't be used to start a new line.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Page breaks</td>
|
||||
<td><img alt="Page break" src="../images/pagebreak.png" /></td>
|
||||
<td>Inserted when you use the <b>Insert Page Break</b> <img alt="Insert Page Break" src="../images/pagebreak1.png" /> icon at the top toolbar, select the <b>Page break before</b> option in the right-click menu or advanced settings window.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>End-of-cell and end-of row markers in tables</td>
|
||||
<td><img alt="Markers in tables" src="../images/cellrow.png" /></td>
|
||||
<td>These markers contain formatting codes for the individual cell and row, respectively.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Small black square in the margin to the left of a paragraph</td>
|
||||
<td><img alt="Black square" src="../images/square.png" /></td>
|
||||
<td>It indicates that at least one of the paragraph options was applied, e.g. <b>Keep lines together</b>, <b>Page break before</b>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anchor symbols</td>
|
||||
<td><img alt="Anchor symbol" src="../images/anchor.png" /></td>
|
||||
<td>They indicate the position of objects, e.g. images, autoshapes, charts.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Show/hide nonprinting characters</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Show or hide nonprinting characters while formatting text, creating tables, and editing documents" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Show/hide nonprinting characters</h1>
|
||||
<p>Nonprinting characters help you edit a document. They indicate the presence of various types of formatting, but they do not print with the document, even when they are displayed on the screen.</p>
|
||||
<p>To show or hide nonprinting characters, click the <b>Nonprinting Characters</b> <img alt="Nonprinting Characters" src="../images/nonprintingcharacters.png" /> icon at the top toolbar.</p>
|
||||
<p>Nonprinting characters include:</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Spaces</td>
|
||||
<td><img alt="Space" src="../images/space.png" /></td>
|
||||
<td>Inserted when you press the <b>Spacebar</b> on the keyboard. It creates a space between characters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tabs</td>
|
||||
<td><img alt="Tab" src="../images/tab.png" /></td>
|
||||
<td>Inserted when you press the <b>Tab</b> key. It's used to advance the cursor to the next tab stop.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paragraph marks (i.e. hard returns)</td>
|
||||
<td><img alt="Hard return" src="../images/hard.png" /></td>
|
||||
<td>Inserted when you press the <b>Enter</b> key. It ends a paragraph and adds a bit of space after it. It contains information about the paragraph formatting.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Line breaks (i.e. soft returns)</td>
|
||||
<td><img alt="Soft return" src="../images/soft.png" /></td>
|
||||
<td>Inserted when you use the <b>Shift+Enter</b> key combination. It breaks the current line and puts lines of text close together. Soft return is primarily used in titles and headings.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nonbreaking spaces</td>
|
||||
<td><img alt="Nonbreaking space" src="../images/nonbreakspace.png" /></td>
|
||||
<td>Inserted when you use the <b>Ctrl+Shift+Spacebar</b> key combination. It creates a space between characters which can't be used to start a new line.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Page breaks</td>
|
||||
<td><img alt="Page break" src="../images/pagebreak.png" /></td>
|
||||
<td>Inserted when you use the <b>Insert Page or Section Break</b> <img alt="Insert Page or Section Break" src="../images/pagebreak1.png" /> icon at the top toolbar and then select the <b>Insert Page Break</b> option, or select the <b>Page break before</b> option in the right-click menu or advanced settings window.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Section breaks</td>
|
||||
<td><img alt="Section break" src="../images/sectionbreak.png" /></td>
|
||||
<td>Inserted when you use the <b>Insert Page or Section Break</b> <img alt="Insert Page or Section Break" src="../images/pagebreak1.png" /> icon at the top toolbar and then select one of the <b>Insert Section Break</b> submenu options (the section break indicator differs depending on which option is selected: Next Page, Continuous Page, Even Page or Odd Page).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>End-of-cell and end-of row markers in tables</td>
|
||||
<td><img alt="Markers in tables" src="../images/cellrow.png" /></td>
|
||||
<td>These markers contain formatting codes for the individual cell and row, respectively.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Small black square in the margin to the left of a paragraph</td>
|
||||
<td><img alt="Black square" src="../images/square.png" /></td>
|
||||
<td>It indicates that at least one of the paragraph options was applied, e.g. <b>Keep lines together</b>, <b>Page break before</b>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anchor symbols</td>
|
||||
<td><img alt="Anchor symbol" src="../images/anchor.png" /></td>
|
||||
<td>They indicate the position of floating objects (those with a wrapping style other than <b>Inline</b>), e.g. images, autoshapes, charts. You should select an object to make its anchor visible.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Create a new document or open an existing one</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Open a recently edited document, create a new one, or return to the list of existing documents" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Create a new document or open an existing one</h1>
|
||||
<p>After you finished working at one document, you can immediately proceed to an already existing document that you have recently edited, create a new one, or return to the list of existing documents.</p>
|
||||
<p>To create a new document,</p>
|
||||
<ol>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
|
||||
<li>select the <b>Create New...</b> option. <!--Here you can choose whether to create a <b>blank</b> text document or use one of the available document <b>templates</b>: contract, letter, list, or plan.--></li>
|
||||
</ol>
|
||||
<p>To open a recently edited document within ONLYOFFICE™ Document Editor,</p>
|
||||
<ol>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
|
||||
<li>select the <b>Open Recent...</b> option,</li>
|
||||
<li>choose the document you need from the list of recently edited documents.</li>
|
||||
</ol>
|
||||
<p>To return to the list of existing documents, click the <b>Go to Documents</b> link in the right upper corner or the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Go to Documents</b> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Create a new document or open an existing one</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Open a recently edited document, create a new one, or return to the list of existing documents" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Create a new document or open an existing one</h1>
|
||||
<p>After you finished working at one document, you can immediately proceed to an already existing document that you have recently edited, create a new one, or return to the list of existing documents.</p>
|
||||
<p>To create a new document,</p>
|
||||
<ol>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
|
||||
<li>select the <b>Create New...</b> option. <!--Here you can choose whether to create a <b>blank</b> text document or use one of the available document <b>templates</b>: contract, letter, list, or plan.--></li>
|
||||
</ol>
|
||||
<p>To open a recently edited document within Document Editor,</p>
|
||||
<ol>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
|
||||
<li>select the <b>Open Recent...</b> option,</li>
|
||||
<li>choose the document you need from the list of recently edited documents.</li>
|
||||
</ol>
|
||||
<p>To return to the list of existing documents, click the <b>Go to Documents</b> link in the right upper corner or the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Go to Documents</b> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert page breaks</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert page breaks and keep lines together" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert page breaks</h1>
|
||||
<p>In ONLYOFFICE™ Document Editor, you can add the page break to start a new page and adjust pagination options.</p>
|
||||
<p>To insert a page break at the current cursor position click the <b>Insert Page Break</b> <img alt="Insert Page Break" src="../images/pagebreak1.png" /> icon at the top toolbar.</p>
|
||||
<p>To insert a page break before the selected paragraph i.e. to start this paragraph at the top of a new page:</p>
|
||||
<ul>
|
||||
<li>click the right mouse button and select the <b>Page break before</b> option in the menu, or</li>
|
||||
<li>click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and check the <b>Page break before</b> box in the opened <b>Paragraph - Advanced Settings</b> window.
|
||||
</li>
|
||||
</ul>
|
||||
<p>To keep lines together so that only whole paragraphs will be moved to the new page (i.e. there will be no page break between the lines within a single paragraph),</p>
|
||||
<ul>
|
||||
<li>click the right mouse button and select the <b>Keep lines together</b> option in the menu, or</li>
|
||||
<li>click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and check the <b>Keep lines together</b> box in the opened <b>Paragraph - Advanced Settings</b> window.</li>
|
||||
</ul>
|
||||
<p>The <b>Paragraph - Advanced Settings</b> window allows you to set two more pagination options:</p>
|
||||
<ul>
|
||||
<li><b>Keep with next</b> - is used to prevent a page break between the selected paragraph and the next one.</li>
|
||||
<li><b>Orphan control</b> - is selected by default and used to prevent a single line of the paragraph (the first or last) from appearing at the top or bottom of the page.</li>
|
||||
</ul>
|
||||
<p><img alt="Paragraph Advanced Settings - Indents & Placement" src="../images/paradvsettings_indents.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert page breaks</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert page breaks and keep lines together" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert page breaks</h1>
|
||||
<p>In Document Editor, you can add the page break to start a new page and adjust pagination options.</p>
|
||||
<p>To insert a page break at the current cursor position click the <b>Insert Page or Section break</b> <img alt="Insert Page or Section break" src="../images/pagebreak1.png" /> icon at the top toolbar or click the arrow next to this icon and select the <b>Insert Page Break</b> option from the menu.</p>
|
||||
<p>To insert a page break before the selected paragraph i.e. to start this paragraph at the top of a new page:</p>
|
||||
<ul>
|
||||
<li>click the right mouse button and select the <b>Page break before</b> option in the menu, or</li>
|
||||
<li>click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and check the <b>Page break before</b> box in the opened <b>Paragraph - Advanced Settings</b> window.
|
||||
</li>
|
||||
</ul>
|
||||
<p>To keep lines together so that only whole paragraphs will be moved to the new page (i.e. there will be no page break between the lines within a single paragraph),</p>
|
||||
<ul>
|
||||
<li>click the right mouse button and select the <b>Keep lines together</b> option in the menu, or</li>
|
||||
<li>click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and check the <b>Keep lines together</b> box in the opened <b>Paragraph - Advanced Settings</b> window.</li>
|
||||
</ul>
|
||||
<p>The <b>Paragraph - Advanced Settings</b> window allows you to set two more pagination options:</p>
|
||||
<ul>
|
||||
<li><b>Keep with next</b> - is used to prevent a page break between the selected paragraph and the next one.</li>
|
||||
<li><b>Orphan control</b> - is selected by default and used to prevent a single line of the paragraph (the first or last) from appearing at the top or bottom of the page.</li>
|
||||
</ul>
|
||||
<p><img alt="Paragraph Advanced Settings - Indents & Placement" src="../images/paradvsettings_indents.png" /></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Change paragraph indents</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Change paragraph indents: the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Change paragraph indents</h1>
|
||||
<p>In ONLYOFFICE™ Document Editor, you can change the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page.</p>
|
||||
<p>To do that,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
|
||||
<li>click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar,</li>
|
||||
<li>in the opened <b>Paragraph - Advanced Settings</b> window, set the needed indent for the <b>first line</b> and paragraph offset from the <b>left</b> and <b>right</b> sides of the page,</li>
|
||||
<li>click the <b>OK</b> button.
|
||||
<p><img alt="Paragraph Advanced Settings - Indents & Placement" src="../images/paradvsettings_indents.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To quickly change the paragraph offset from the left side of the page, you can also use the respective icons at the top toolbar: <b>Decrease Indent</b> <img alt="Decrease Indent" src="../images/decreaseindent.png" /> and <b>Increase Indent</b> <img alt="Increase Indent" src="../images/increaseindent.png" />.</p>
|
||||
<p>You can also use the horizontal <b>ruler</b> to set indents.</p>
|
||||
<img alt="Ruler - Indent markers" src="../images/indents_ruler.png" />
|
||||
<p>Select the necessary paragraph(s) and drag the indent markers along the ruler.</p>
|
||||
<ul>
|
||||
<li><b>First Line Indent</b> marker <img alt="First Line Indent marker" src="../images/firstline_indent.png" /> is used to set the offset from the left side of the page for the first line of the paragraph.</li>
|
||||
<li><b>Hanging Indent</b> marker <img alt="Hanging Indent marker" src="../images/Hanging.png" /> is used to set the offset from the left side of the page for the second and all the subsequent lines of the paragraph.</li>
|
||||
<li><b>Right Indent</b> marker <img alt="Right Indent marker" src="../images/right_indent.png" /> is used to set the paragraph offset from the right side of the page.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Change paragraph indents</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Change paragraph indents: the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Change paragraph indents</h1>
|
||||
<p>In Document Editor, you can change the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page.</p>
|
||||
<p>To do that,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
|
||||
<li>click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar,</li>
|
||||
<li>in the opened <b>Paragraph - Advanced Settings</b> window, set the needed indent for the <b>first line</b> and paragraph offset from the <b>left</b> and <b>right</b> sides of the page,</li>
|
||||
<li>click the <b>OK</b> button.
|
||||
<p><img alt="Paragraph Advanced Settings - Indents & Placement" src="../images/paradvsettings_indents.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>To quickly change the paragraph offset from the left side of the page, you can also use the respective icons at the top toolbar: <b>Decrease Indent</b> <img alt="Decrease Indent" src="../images/decreaseindent.png" /> and <b>Increase Indent</b> <img alt="Increase Indent" src="../images/increaseindent.png" />.</p>
|
||||
<p>You can also use the horizontal <b>ruler</b> to set indents.</p>
|
||||
<img alt="Ruler - Indent markers" src="../images/indents_ruler.png" />
|
||||
<p>Select the necessary paragraph(s) and drag the indent markers along the ruler.</p>
|
||||
<ul>
|
||||
<li><b>First Line Indent</b> marker <img alt="First Line Indent marker" src="../images/firstline_indent.png" /> is used to set the offset from the left side of the page for the first line of the paragraph.</li>
|
||||
<li><b>Hanging Indent</b> marker <img alt="Hanging Indent marker" src="../images/Hanging.png" /> is used to set the offset from the left side of the page for the second and all the subsequent lines of the paragraph.</li>
|
||||
<li><b>Right Indent</b> marker <img alt="Right Indent marker" src="../images/right_indent.png" /> is used to set the paragraph offset from the right side of the page.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Save/download/print your document</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Save, download and print your documents in various formats" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Save/download/print your document</h1>
|
||||
<p>By default, <b>ONLYOFFICE™ Document Editor</b> automatically saves your file each 10 minutes when you work on it preventing your data loss in case of the unexpected program closing. If you need, you can easily change the periodicity of the autosaving or even disable this feature on the <a href="../HelpfulHints/AdvancedSettings.htm">Advanced Settings</a> page.</p>
|
||||
<p>To save your current document manually,</p>
|
||||
<ul>
|
||||
<li>press the <b>Save</b> <img alt="Save icon" src="../images/save.png" /> icon at the top toolbar, or</li>
|
||||
<li>use the <b>Ctrl+S</b> key combination, or</li>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Save</b> option.</li>
|
||||
</ul>
|
||||
|
||||
<p>To download the resulting document onto your computer hard disk drive,</p>
|
||||
<ol>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
|
||||
<li>select the <b>Download as...</b> option,</li>
|
||||
<li>choose one of the available formats depending on your needs: PDF, TXT, DOCX, DOC, ODT, RTF, HTML, EPUB.</li>
|
||||
</ol>
|
||||
|
||||
<p>To print out the current document,</p>
|
||||
<ul>
|
||||
<li>click the <b>Print</b> <img alt="Print icon" src="../images/print.png" /> icon at the top toolbar, or</li>
|
||||
<li>use the <b>Ctrl+P</b> key combination, or</li>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Print</b> option.</li>
|
||||
</ul>
|
||||
<p>After that a PDF file will be generated on the basis of the edited document. You can open and print it out, or save onto your computer hard disk drive or removable medium to print it out later.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Save/download/print your document</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Save, download and print your documents in various formats" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Save/download/print your document</h1>
|
||||
<p>By default, <b>Document Editor</b> automatically saves your file each 2 seconds when you work on it preventing your data loss in case of the unexpected program closing. When the file is being co-edited, changes are automatically saved at 10-minute intervals. If you need, you can easily disable the <b>Autosave</b> feature on the <a href="../HelpfulHints/AdvancedSettings.htm">Advanced Settings</a> page.</p>
|
||||
<p>To save your current document manually,</p>
|
||||
<ul>
|
||||
<li>press the <b>Save</b> <img alt="Save icon" src="../images/save.png" /> icon at the top toolbar, or</li>
|
||||
<li>use the <b>Ctrl+S</b> key combination, or</li>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Save</b> option.</li>
|
||||
</ul>
|
||||
|
||||
<p>To download the resulting document onto your computer hard disk drive,</p>
|
||||
<ol>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
|
||||
<li>select the <b>Download as...</b> option,</li>
|
||||
<li>choose one of the available formats depending on your needs: PDF, TXT, DOCX, DOC, ODT, RTF, HTML, EPUB.</li>
|
||||
</ol>
|
||||
|
||||
<p>To print out the current document,</p>
|
||||
<ul>
|
||||
<li>click the <b>Print</b> <img alt="Print icon" src="../images/print.png" /> icon at the top toolbar, or</li>
|
||||
<li>use the <b>Ctrl+P</b> key combination, or</li>
|
||||
<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Print</b> option.</li>
|
||||
</ul>
|
||||
<p>After that a PDF file will be generated on the basis of the edited document. You can open and print it out, or save onto your computer hard disk drive or removable medium to print it out later.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert section breaks</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert section breaks to use different formatting for each section of the document" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert section breaks</h1>
|
||||
<p>Section breaks allow you to apply a different layout or formatting for the certain parts of your document. For example, you can use individual <a href="../UsageInstructions/InsertHeadersFooters.htm">headers and footers</a>, <a href="../UsageInstructions/InsertPageNumbers.htm">page numbering</a>, <a href="../UsageInstructions/SetPageParameters.htm">margins, size, or orientation</a> for each separate section.</p>
|
||||
<p class="note"><b>Note</b>: an inserted section break defines formatting of the preceding part of the document.</p>
|
||||
<p>To insert a section break at the current cursor position:</p>
|
||||
<ol>
|
||||
<li>click the <b>Insert Page or Section break</b> <img alt="Insert Page or Section break" src="../images/pagebreak1.png" /> icon at the top toolbar</li>
|
||||
<li>select the <b>Insert Section Break</b> submenu</li>
|
||||
<li>select the necessary section break type:
|
||||
<ul>
|
||||
<li><b>Next Page</b> - to start a new section from the next page</li>
|
||||
<li><b>Continuous Page</b> - to start a new section at the current page</li>
|
||||
<li><b>Even Page</b> - to start a new section from the next even page</li>
|
||||
<li><b>Odd Page</b> - to start a new section from the next odd page</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p>Added section breaks are indicated in your document by a double dotted line: <img alt="Section break" src="../images/sectionbreak.png" /></p>
|
||||
<p>If you do not see the inserted section breaks, click the <img alt="Nonprinting Characters icon" src="../images/nonprintingcharacters.png" /> icon at the top toolbar to display them.</p>
|
||||
<p>To remove a section break select it with the mouse and press the <b>Delete</b> key. Since a section break defines formatting of the preceding section, when you remove a section break, this section formatting will also be deleted. The document part that preceded the removed section break acquires the formatting of the part that followed it.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set page parameters</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Set page parameters: page orientation and size" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set page parameters</h1>
|
||||
<p>To set page orientation and size, use the corresponding icons at the top toolbar:</p>
|
||||
<ul>
|
||||
<li><b>Page Orientation</b> - change the current orientation type clicking the <b>Page Orientation</b> <img alt="Page Orientation icon" src="../images/orientation.png" /> icon. The default orientation type is <b>Portrait</b> that can be switched to <b>Album</b>.</li>
|
||||
<li><b>Page Size</b> - change the default A4 format clicking the <b>Page Size</b> <img alt="Page Size icon" src="../images/pagesize.png" /> icon and selecting the needed one from the list. The available preset sizes are:
|
||||
<ul>
|
||||
<li>US Letter (21,59cm x 27,94cm)</li>
|
||||
<li>US Legal (21,59cm x 35,56cm)</li>
|
||||
<li>A4 (21cm x 29,7cm)</li>
|
||||
<li>A5 (14,81cm x 20,99cm)</li>
|
||||
<li>B5 (17,6cm x 25,01cm)</li>
|
||||
<li>Envelope #10 (10,48cm x 24,13cm)</li>
|
||||
<li>Envelope DL (11,01cm x 22,01cm)</li>
|
||||
<li>Tabloid (27,94cm x 43,17cm)</li>
|
||||
<li>AЗ (29,7cm x 42,01cm)</li>
|
||||
<li>Tabloid Oversize (30,48cm x 45,71cm)</li>
|
||||
<li>ROC 16K (19,68cm x 27,3cm)</li>
|
||||
<li>Envelope Choukei 3 (11,99cm x 23,49cm)</li>
|
||||
<li>Super B/A3 (33,02cm x 48,25cm)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set page parameters</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Set page parameters: page orientation and size" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set page parameters</h1>
|
||||
<p>To set page orientation and size, use the corresponding icons at the top toolbar:</p>
|
||||
<ul>
|
||||
<li><b>Page Orientation</b> - change the current orientation type clicking the <b>Page Orientation</b> <img alt="Page Orientation icon" src="../images/orientation.png" /> icon. The default orientation type is <b>Portrait</b> that can be switched to <b>Album</b>.</li>
|
||||
<li><b>Page Size</b> - change the default A4 format clicking the <b>Page Size</b> <img alt="Page Size icon" src="../images/pagesize.png" /> icon and selecting the needed one from the list. The available preset sizes are:
|
||||
<ul>
|
||||
<li>US Letter (21,59cm x 27,94cm)</li>
|
||||
<li>US Legal (21,59cm x 35,56cm)</li>
|
||||
<li>A4 (21cm x 29,7cm)</li>
|
||||
<li>A5 (14,81cm x 20,99cm)</li>
|
||||
<li>B5 (17,6cm x 25,01cm)</li>
|
||||
<li>Envelope #10 (10,48cm x 24,13cm)</li>
|
||||
<li>Envelope DL (11,01cm x 22,01cm)</li>
|
||||
<li>Tabloid (27,94cm x 43,17cm)</li>
|
||||
<li>AЗ (29,7cm x 42,01cm)</li>
|
||||
<li>Tabloid Oversize (30,48cm x 45,71cm)</li>
|
||||
<li>ROC 16K (19,68cm x 27,3cm)</li>
|
||||
<li>Envelope Choukei 3 (11,99cm x 23,49cm)</li>
|
||||
<li>Super B/A3 (33,02cm x 48,25cm)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>To set <b>page margins</b>, i.e. the blank space between the left, right, top and bottom page edges and the paragraph text, drag the border between the grey and white areas on the rulers (the grey areas of the rulers indicate page margins):</p>
|
||||
<p><img alt="Margins Adjustment" src="../images/margins.png" /></p>
|
||||
<p class="note"><b>Note</b>: all these parameters are applied to the entire document. If you need to set different page margins, orientation, or size for the separate parts of your document, please refer to <a href="../UsageInstructions/SectionBreaks.htm">this page</a>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set tab stops</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Set tab stops" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set tab stops</h1>
|
||||
<p>In ONLYOFFICE™ Document Editor, you can change tab stops i.e. the position the cursor advances to when you press the <b>Tab</b> key on the keyboard.</p>
|
||||
<p>To set tab stops you can use the horizontal ruler:</p>
|
||||
<ol>
|
||||
<li>Select the necessary tab stop type clicking the <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> button in the upper left corner of the working area. The following three tab types are available:
|
||||
<ul>
|
||||
<li><b>Left</b> <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> - lines up your text by the left side at the tab stop position; the text moves to the right from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Left Tab Stop marker" src="../images/tabstopleft_marker.png" /> marker.</li>
|
||||
<li><b>Center</b> <img alt="Center Tab Stop button" src="../images/tabstopcenter.png" /> - centers the text at the tab stop position. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Center Tab Stop marker" src="../images/tabstopcenter_marker.png" /> marker.</li>
|
||||
<li><b>Right</b> <img alt="Right Tab Stop button" src="../images/tabstopright.png" /> - lines up your text by the right side at the tab stop position; the text moves to the left from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Right Tab Stop marker" src="../images/tabstopright_marker.png" /> marker.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click on the bottom edge of the ruler where you want to place the tab stop. Drag it along the ruler to change its position. To remove the added tab stop drag it out of the ruler.
|
||||
<p><img alt="Horizontal Ruler with the Tab stops added" src="../images/tabstops_ruler.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p>You can also use the paragraph properties window to adjust tab stops. Click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and switch to the <b>Tab</b> tab in the opened <b>Paragraph - Advanced Settings</b> window.</p>
|
||||
<img alt="Paragraph Properties - Tab tab" src="../images/paradvsettings_tab.png" />
|
||||
<p>You can set the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Tab Position</b> - is used to set custom tab stops. Enter the necessary value in this box, adjust it more precisely using the arrow buttons and press the <b>Specify</b> button. Your custom tab position will be added to the list in the field below. If you've previously added some tab stops using the ruler, all these tab positions will also be displayed in the list.</li>
|
||||
<li><b>Default Tab</b> is set at 1.25 cm. You can decrease or increase this value using the arrow buttons or enter the necessary one in the box.</li>
|
||||
<li><b>Alignment</b> - is used to set the necessary alignment type for each of the tab positions in the list above. Select the necessary tab position in the list, choose the <b>Left</b>, <b>Center</b> or <b>Right</b> radio button and press the <b>Specify</b> button.
|
||||
<p>To delete tab stops from the list select a tab stop and press the <b>Remove</b> or <b>Remove All</b> button.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Set tab stops</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Set tab stops" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Set tab stops</h1>
|
||||
<p>In Document Editor, you can change tab stops i.e. the position the cursor advances to when you press the <b>Tab</b> key on the keyboard.</p>
|
||||
<p>To set tab stops you can use the horizontal ruler:</p>
|
||||
<ol>
|
||||
<li>Select the necessary tab stop type clicking the <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> button in the upper left corner of the working area. The following three tab types are available:
|
||||
<ul>
|
||||
<li><b>Left</b> <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> - lines up your text by the left side at the tab stop position; the text moves to the right from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Left Tab Stop marker" src="../images/tabstopleft_marker.png" /> marker.</li>
|
||||
<li><b>Center</b> <img alt="Center Tab Stop button" src="../images/tabstopcenter.png" /> - centers the text at the tab stop position. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Center Tab Stop marker" src="../images/tabstopcenter_marker.png" /> marker.</li>
|
||||
<li><b>Right</b> <img alt="Right Tab Stop button" src="../images/tabstopright.png" /> - lines up your text by the right side at the tab stop position; the text moves to the left from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Right Tab Stop marker" src="../images/tabstopright_marker.png" /> marker.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click on the bottom edge of the ruler where you want to place the tab stop. Drag it along the ruler to change its position. To remove the added tab stop drag it out of the ruler.
|
||||
<p><img alt="Horizontal Ruler with the Tab stops added" src="../images/tabstops_ruler.png" /></p>
|
||||
</li>
|
||||
</ol>
|
||||
<hr />
|
||||
<p>You can also use the paragraph properties window to adjust tab stops. Click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and switch to the <b>Tab</b> tab in the opened <b>Paragraph - Advanced Settings</b> window.</p>
|
||||
<img alt="Paragraph Properties - Tab tab" src="../images/paradvsettings_tab.png" />
|
||||
<p>You can set the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Tab Position</b> - is used to set custom tab stops. Enter the necessary value in this box, adjust it more precisely using the arrow buttons and press the <b>Specify</b> button. Your custom tab position will be added to the list in the field below. If you've previously added some tab stops using the ruler, all these tab positions will also be displayed in the list.</li>
|
||||
<li><b>Default Tab</b> is set at 1.25 cm. You can decrease or increase this value using the arrow buttons or enter the necessary one in the box.</li>
|
||||
<li><b>Alignment</b> - is used to set the necessary alignment type for each of the tab positions in the list above. Select the necessary tab position in the list, choose the <b>Left</b>, <b>Center</b> or <b>Right</b> radio button and press the <b>Specify</b> button.
|
||||
<p>To delete tab stops from the list select a tab stop and press the <b>Remove</b> or <b>Remove All</b> button.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,18 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>View document information</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="View document title, author, location, creation date, persons with the rights to view or edit the document, and statistics" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>View document information</h1>
|
||||
<p>To access the detailed information about the currently edited document, click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Document Info...</b> option.</p>
|
||||
<p>The document information includes document title, author, location, creation date, persons with the rights to view or edit the document, and statistics: the number of pages, paragraphs, words, symbols, symbols with spaces.</p>
|
||||
<p>If you have full access to this document, you can also change currently selected access rights by pressing the <b>Change access rights</b> button in the <b>Persons who have rights</b> section.</p>
|
||||
<p>To close the <b>File</b> panel and return to document editing, select the <b>Back to Document</b> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>View document information</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="View document title, author, location, creation date, persons with the rights to view or edit the document, and statistics" />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>View document information</h1>
|
||||
<p>To access the detailed information about the currently edited document, click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Document Info...</b> option.</p>
|
||||
<p>The document information includes document title, author, location, creation date, persons with the rights to view or edit the document, and statistics: the number of pages, paragraphs, words, symbols, symbols with spaces.</p>
|
||||
<p>If you have full access to this document, you can also change currently selected access rights by pressing the <b>Change access rights</b> button in the <b>Persons who have rights</b> section.</p>
|
||||
<p>To close the <b>File</b> panel and return to document editing, select the <b>Back to Document</b> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,63 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert a drop cap</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert a drop cap and adjust its frame properties to make your document look more expressive." />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert a drop cap</h1>
|
||||
<p>A <b>Drop cap</b> is the first letter of a paragraph that is much larger than others and takes up several lines in height.</p>
|
||||
<p>To add a drop cap,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need,</li>
|
||||
<li>click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar,</li>
|
||||
<li>in the opened drop-down list select the option you need:
|
||||
<ul>
|
||||
<li><b>In Text</b> <img alt="Insert Drop Cap - In Text" src="../images/dropcap_text.png" /> - to place the drop cap within the paragraph.</li>
|
||||
<li><b>In Margin</b> <img alt="Insert Drop Cap - In Margin" src="../images/dropcap_margin.png" /> - to place the drop cap in the left margin.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p><img class="floatleft" alt="Drop Cap example" src="../images/dropcap_example.png" />The first character of the selected paragraph will be transformed into a drop cap. If you need the drop cap to include some more characters, add them manually: select the drop cap and type in other letters you need.</p>
|
||||
<p>To adjust the drop cap appearance (i.e. font size, type, decoration style or color), select the letter and use the corresponding icons at the top toolbar.</p>
|
||||
<p>When the drop cap is selected, it's surrounded by a <b>frame</b> (a container used to position the drop cap on the page). You can quickly change the frame size dragging its borders or change its position using the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the frame.</p>
|
||||
<p>To delete the added drop cap, select it, click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar and choose the <b>None</b> <img alt="Insert Drop Cap - None" src="../images/dropcap_none.png" /> option from the drop-down list.</p>
|
||||
<hr />
|
||||
<p>To adjust the added drop cap parameters, select it, click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar and choose the <b>Drop Cap Settings</b> option from the drop-down list. The <b>Drop Cap - Advanced Settings</b> window will open:</p>
|
||||
<img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_1.png" />
|
||||
<p>The <b>Drop Cap</b> tab allows to set the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Position</b> - is used to change the drop cap placement. Select the <b>In Text</b> or <b>In Margin</b> option, or click <b>None</b> to delete the drop cap.</li>
|
||||
<li><b>Font</b> - is used to select one of the fonts from the list of the available ones.</li>
|
||||
<li><b>Height in rows</b> - is used to specify how many lines the drop cap should span. It's possible to select a value from 1 to 10.</li>
|
||||
<li><b>Distance from text</b> - is used to specify the amount of space between the text of the paragraph and the right border of the frame that surrounds the drop cap.</li>
|
||||
</ul>
|
||||
<img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_2.png" />
|
||||
<p>The <b>Borders & Fill</b> tab allows to add a border around the drop cap and adjust its parameters. They are the following:</p>
|
||||
<ul>
|
||||
<li><b>Border</b> parameters (size, color and presence or absence) - set the border size, select its color and choose the borders (top, bottom, left, right or their combination) you want to apply these settings to.</li>
|
||||
<li><b>Background color</b> - choose the color for the drop cap background.</li>
|
||||
</ul>
|
||||
<img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_3.png" />
|
||||
<p>The <b>Margins</b> tab allows to set the distance between the drop cap and the <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> borders around it (if the borders have previously been added).</p>
|
||||
<hr />
|
||||
<p>Once the drop cap is added you can also change the <b>Frame</b> parameters. To access them, right click within the frame and select the <b>Frame Advanced Settings</b> from the menu. The <b>Frame - Advanced Settings</b> window will open:</p>
|
||||
<img alt="Frame - Advanced Settings" src="../images/Frame_properties_1.png" />
|
||||
<p>The <b>Frame</b> tab allows to set the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Position</b> - is used to select the <b>Inline</b> or <b>Flow</b> wrapping style. Or you can click <b>None</b> to delete the frame.</li>
|
||||
<li><b>Width</b> and <b>Height</b> - are used to change the frame dimensions. The <b>Auto</b> option allows to automatically adjust the frame size to fit the drop cap in it. The <b>Exactly</b> option allows to specify fixed values. The <b>At least</b> option is used to set the minimum height value (if you change the drop cap size, the frame height changes accordingly, but it cannot be less than the specified value).</li>
|
||||
<li><b>Horizontal</b> parameters are used either to set the frame exact <b>position</b> in the selected units of measurement <b>relative to</b> a margin, page or column, or to align the frame (left, center or right) <b>relative to</b> one of these reference points. You can also set the horizontal <b>Distance from text</b> i.e. the amount of space between the vertical frame borders and the text of the paragraph.</li>
|
||||
<li><b>Vertical</b> parameters are used either to set the frame exact <b>position</b> in the selected units of measurement <b>relative to</b> a margin, page or paragraph, or to align the frame (top, center or bottom) <b>relative to</b> one of these reference points. You can also set the vertical <b>Distance from text</b> i.e. the amount of space between the horizontal frame borders and the text of the paragraph.</li>
|
||||
<li><b>Move with text</b> - controls whether the frame moves as the paragraph to which it is anchored moves.</li>
|
||||
</ul>
|
||||
<!--<img alt="Frame - Advanced Settings" src="../images/Frame_properties_2.png" />-->
|
||||
<p>The <b>Borders & Fill</b> and <b>Margins</b> tabs allow to set just the same parameters as at the tabs of the same name in the <b>Drop Cap - Advanced Settings</b> window.</p>
|
||||
<!--<img alt="Frame - Advanced Settings" src="../images/Frame_properties_3.png" />
|
||||
<p>The <b>Margins</b> tab allows to set just the same parameters as at the tab of the same name in the <b>Drop Cap - Advanced Settings</b> window.</p>-->
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Insert a drop cap</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Insert a drop cap and adjust its frame properties to make your document look more expressive." />
|
||||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mainpart">
|
||||
<h1>Insert a drop cap</h1>
|
||||
<p>A <b>Drop cap</b> is the first letter of a paragraph that is much larger than others and takes up several lines in height.</p>
|
||||
<p>To add a drop cap,</p>
|
||||
<ol>
|
||||
<li>put the cursor within the paragraph you need,</li>
|
||||
<li>click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar,</li>
|
||||
<li>in the opened drop-down list select the option you need:
|
||||
<ul>
|
||||
<li><b>In Text</b> <img alt="Insert Drop Cap - In Text" src="../images/dropcap_text.png" /> - to place the drop cap within the paragraph.</li>
|
||||
<li><b>In Margin</b> <img alt="Insert Drop Cap - In Margin" src="../images/dropcap_margin.png" /> - to place the drop cap in the left margin.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<p><img class="floatleft" alt="Drop Cap example" src="../images/dropcap_example.png" />The first character of the selected paragraph will be transformed into a drop cap. If you need the drop cap to include some more characters, add them manually: select the drop cap and type in other letters you need.</p>
|
||||
<p>To adjust the drop cap appearance (i.e. font size, type, decoration style or color), select the letter and use the corresponding icons at the top toolbar.</p>
|
||||
<p>When the drop cap is selected, it's surrounded by a <b>frame</b> (a container used to position the drop cap on the page). You can quickly change the frame size dragging its borders or change its position using the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the frame.</p>
|
||||
<p>To delete the added drop cap, select it, click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar and choose the <b>None</b> <img alt="Insert Drop Cap - None" src="../images/dropcap_none.png" /> option from the drop-down list.</p>
|
||||
<hr />
|
||||
<p>To adjust the added drop cap parameters, select it, click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar and choose the <b>Drop Cap Settings</b> option from the drop-down list. The <b>Drop Cap - Advanced Settings</b> window will open:</p>
|
||||
<img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_1.png" />
|
||||
<p>The <b>Drop Cap</b> tab allows to set the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Position</b> - is used to change the drop cap placement. Select the <b>In Text</b> or <b>In Margin</b> option, or click <b>None</b> to delete the drop cap.</li>
|
||||
<li><b>Font</b> - is used to select one of the fonts from the list of the available ones.</li>
|
||||
<li><b>Height in rows</b> - is used to specify how many lines the drop cap should span. It's possible to select a value from 1 to 10.</li>
|
||||
<li><b>Distance from text</b> - is used to specify the amount of space between the text of the paragraph and the right border of the frame that surrounds the drop cap.</li>
|
||||
</ul>
|
||||
<img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_2.png" />
|
||||
<p>The <b>Borders & Fill</b> tab allows to add a border around the drop cap and adjust its parameters. They are the following:</p>
|
||||
<ul>
|
||||
<li><b>Border</b> parameters (size, color and presence or absence) - set the border size, select its color and choose the borders (top, bottom, left, right or their combination) you want to apply these settings to.</li>
|
||||
<li><b>Background color</b> - choose the color for the drop cap background.</li>
|
||||
</ul>
|
||||
<img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_3.png" />
|
||||
<p>The <b>Margins</b> tab allows to set the distance between the drop cap and the <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> borders around it (if the borders have previously been added).</p>
|
||||
<hr />
|
||||
<p>Once the drop cap is added you can also change the <b>Frame</b> parameters. To access them, right click within the frame and select the <b>Frame Advanced Settings</b> from the menu. The <b>Frame - Advanced Settings</b> window will open:</p>
|
||||
<img alt="Frame - Advanced Settings" src="../images/Frame_properties_1.png" />
|
||||
<p>The <b>Frame</b> tab allows to set the following parameters:</p>
|
||||
<ul>
|
||||
<li><b>Position</b> - is used to select the <b>Inline</b> or <b>Flow</b> wrapping style. Or you can click <b>None</b> to delete the frame.</li>
|
||||
<li><b>Width</b> and <b>Height</b> - are used to change the frame dimensions. The <b>Auto</b> option allows to automatically adjust the frame size to fit the drop cap in it. The <b>Exactly</b> option allows to specify fixed values. The <b>At least</b> option is used to set the minimum height value (if you change the drop cap size, the frame height changes accordingly, but it cannot be less than the specified value).</li>
|
||||
<li><b>Horizontal</b> parameters are used either to set the frame exact <b>position</b> in the selected units of measurement <b>relative to</b> a margin, page or column, or to align the frame (left, center or right) <b>relative to</b> one of these reference points. You can also set the horizontal <b>Distance from text</b> i.e. the amount of space between the vertical frame borders and the text of the paragraph.</li>
|
||||
<li><b>Vertical</b> parameters are used either to set the frame exact <b>position</b> in the selected units of measurement <b>relative to</b> a margin, page or paragraph, or to align the frame (top, center or bottom) <b>relative to</b> one of these reference points. You can also set the vertical <b>Distance from text</b> i.e. the amount of space between the horizontal frame borders and the text of the paragraph.</li>
|
||||
<li><b>Move with text</b> - controls whether the frame moves as the paragraph to which it is anchored moves.</li>
|
||||
</ul>
|
||||
<!--<img alt="Frame - Advanced Settings" src="../images/Frame_properties_2.png" />-->
|
||||
<p>The <b>Borders & Fill</b> and <b>Margins</b> tabs allow to set just the same parameters as at the tabs of the same name in the <b>Drop Cap - Advanced Settings</b> window.</p>
|
||||
<!--<img alt="Frame - Advanced Settings" src="../images/Frame_properties_3.png" />
|
||||
<p>The <b>Margins</b> tab allows to set just the same parameters as at the tab of the same name in the <b>Drop Cap - Advanced Settings</b> window.</p>-->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user