Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update help

Browse source
This commit is contained in:
Julia Radzhabova 2020-11-13 16:35:26 +03:00
parent 5cd14f4594
commit 38a288309e
201 changed files with 9898 additions and 8235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/documenteditor/main/resources/help/en/Contents.json
View file

@ -15,8 +15,11 @@
{"src": "UsageInstructions/SectionBreaks.htm", "name": "Insert section breaks" },
{ "src": "UsageInstructions/InsertHeadersFooters.htm", "name": "Insert headers and footers" },
{"src": "UsageInstructions/InsertDateTime.htm", "name": "Insert date and time"},
{"src": "UsageInstructions/InsertPageNumbers.htm", "name": "Insert page numbers"},
{"src": "UsageInstructions/InsertPageNumbers.htm", "name": "Insert page numbers" },
{"src": "UsageInstructions/InsertLineNumbers.htm", "name": "Insert line numbers"},
{ "src": "UsageInstructions/InsertFootnotes.htm", "name": "Insert footnotes" },
{ "src": "UsageInstructions/InsertEndnotes.htm", "name": "Insert endnotes" },
{ "src": "UsageInstructions/ConvertFootnotesEndnotes.htm", "name": "Convert endnotes and footnotes" },
{ "src": "UsageInstructions/InsertBookmarks.htm", "name": "Add bookmarks" },
{"src": "UsageInstructions/AddWatermark.htm", "name": "Add watermark"},
{ "src": "UsageInstructions/AlignText.htm", "name": "Align your text in a paragraph", "headername": "Paragraph formatting" },
@ -33,6 +36,8 @@
{"src": "UsageInstructions/DecorationStyles.htm", "name": "Apply font decoration styles"},
{"src": "UsageInstructions/CopyClearFormatting.htm", "name": "Copy/clear text formatting" },
{"src": "UsageInstructions/AddHyperlinks.htm", "name": "Add hyperlinks"},
{"src": "UsageInstructions/InsertCrossReference.htm", "name": "Insert cross-references"},
{"src": "UsageInstructions/AddHyperlinks.htm", "name": "Add hyperlinks"},
{"src": "UsageInstructions/InsertDropCap.htm", "name": "Insert a drop cap"},
{ "src": "UsageInstructions/InsertTables.htm", "name": "Insert tables", "headername": "Operations on objects" },
{"src": "UsageInstructions/AddFormulasInTables.htm", "name": "Use formulas in tables"},
@ -48,16 +53,25 @@
{"src": "UsageInstructions/CreateTableOfContents.htm", "name": "Create table of contents" },
{"src": "UsageInstructions/UseMailMerge.htm", "name": "Use mail merge", "headername": "Mail Merge"},
{ "src": "UsageInstructions/InsertEquation.htm", "name": "Insert equations", "headername": "Math equations" },
{"src": "UsageInstructions/MathAutoCorrect.htm", "name": "Use Math AutoCorrect" },
{"src": "HelpfulHints/CollaborativeEditing.htm", "name": "Collaborative document editing", "headername": "Document co-editing"},
{ "src": "HelpfulHints/Review.htm", "name": "Document Review" },
{"src": "HelpfulHints/Comparison.htm", "name": "Compare documents"},
{"src": "HelpfulHints/Comparison.htm", "name": "Compare documents" },
{"src": "UsageInstructions/PhotoEditor.htm", "name": "Edit an image", "headername": "Plugins"},
{"src": "UsageInstructions/YouTube.htm", "name": "Include a video" },
{"src": "UsageInstructions/HighlightedCode.htm", "name": "Insert highlighted code" },
{"src": "UsageInstructions/InsertReferences.htm", "name": "Insert references" },
{"src": "UsageInstructions/Translator.htm", "name": "Translate text" },
{"src": "UsageInstructions/OCR.htm", "name": "Extract text from an image" },
{"src": "UsageInstructions/Speech.htm", "name": "Read the text out loud" },
{"src": "UsageInstructions/Thesaurus.htm", "name": "Replace a word by a synonym" },
{"src": "UsageInstructions/Wordpress.htm", "name": "Upload a document to Wordpress"},
{"src": "UsageInstructions/ViewDocInfo.htm", "name": "View document information", "headername": "Tools and settings"},
{"src": "UsageInstructions/SavePrintDownload.htm", "name": "Save/download/print your document" },
{"src": "HelpfulHints/AdvancedSettings.htm", "name": "Advanced settings of Document Editor"},
{"src": "HelpfulHints/Navigation.htm", "name": "View settings and navigation tools"},
{"src": "HelpfulHints/Search.htm", "name": "Search and replace function"},
{"src": "HelpfulHints/SpellChecking.htm", "name": "Spell-checking"},
{"src": "UsageInstructions/MathAutoCorrect.htm", "name": "AutoCorrect features" },
{"src": "HelpfulHints/About.htm", "name": "About Document Editor", "headername": "Helpful hints"},
{"src": "HelpfulHints/SupportedFormats.htm", "name": "Supported formats of electronic documents" },
{"src": "HelpfulHints/KeyboardShortcuts.htm", "name": "Keyboard shortcuts"}

12
apps/documenteditor/main/resources/help/en/HelpfulHints/AdvancedSettings.htm
View file

@ -53,18 +53,6 @@
<li>Choose <b>Native</b> if you want your text to be displayed with the hinting embedded into font files.</li>
</ul>
</li>
<li><b>Default cache mode</b> - used to select the cache mode for the font characters. It’s not recommended to switch it without any reason. It can be helpful in some cases only, for example, when an issue in the Google Chrome browser with the enabled hardware acceleration occurs.
<p>The Document Editor has two cache modes:</p>
<ol>
<li>In the <b>first cache mode</b>, each letter is cached as a separate picture.</li>
<li>In the <b>second cache mode</b>, a picture of a certain size is selected where letters are placed dynamically and a mechanism of allocating/removing memory in this picture is also implemented. If there is not enough memory, a second picture is created, etc.</li>
</ol>
<p>The <b>Default cache mode</b> setting applies two above mentioned cache modes separately for different browsers:</p>
<ul>
<li>When the <b>Default cache mode</b> setting is enabled, Internet Explorer (v. 9, 10, 11) uses the <b>second cache mode</b>, other browsers use the <b>first cache mode</b>.</li>
<li>When the <b>Default cache mode</b> setting is disabled, Internet Explorer (v. 9, 10, 11) uses the <b>first cache mode</b>, other browsers use the <b>second cache mode</b>.</li>
</ul>
</li>
<li><b>Unit of Measurement</b> is used to specify what units are used on the rulers and in properties windows for measuring elements parameters such as width, height, spacing, margins etc. You can select the <b>Centimeter</b>, <b>Point</b>, or <b>Inch</b> option.</li>
<li><b>Cut, copy and paste</b> - used to show the <b>Paste Options</b> button when content is pasted. Check the box to enable this feature.</li>
<li><b>Macros Settings</b> - used to set macros display with a notification.

1
apps/documenteditor/main/resources/help/en/ProgramInterface/LayoutTab.htm
View file

@ -28,6 +28,7 @@
<li>adjust page <a href="../UsageInstructions/SetPageParameters.htm#margins" onclick="onhyperlinkclick(this)">margins</a>, <a href="../UsageInstructions/SetPageParameters.htm#orientation" onclick="onhyperlinkclick(this)">orientation</a> and <a href="../UsageInstructions/SetPageParameters.htm#size" onclick="onhyperlinkclick(this)">size</a>,</li>
<li>add <a href="../UsageInstructions/SetPageParameters.htm#columns" onclick="onhyperlinkclick(this)">columns</a>,</li>
<li>insert <a href="../UsageInstructions/PageBreaks.htm" onclick="onhyperlinkclick(this)">page breaks</a>, <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">section breaks</a> and <a href="../UsageInstructions/SetPageParameters.htm#columns" onclick="onhyperlinkclick(this)">column breaks</a>,</li>
<li>insert <a href="../UsageInstructions/InsertLineNumbers.htm" onclick="onhyperlinkclick(this)">line numbers</a></li>
<li>align and arrange objects (<a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">tables</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">pictures</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">charts</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>),</li>
<li>change the <a href="../UsageInstructions/ChangeWrappingStyle.htm" onclick="onhyperlinkclick(this)">wrapping style</a>,</li>
<li>add a <a href="../UsageInstructions/AddWatermark.htm" onclick="onhyperlinkclick(this)">watermark</a>.</li>

25
apps/documenteditor/main/resources/help/en/ProgramInterface/PluginsTab.htm
View file

@ -27,19 +27,20 @@
<p>The <b>Macros</b> button allows you to create and run your own macros. To learn more about macros, please refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/macros" onclick="onhyperlinkclick(this)">API Documentation</a>.</p>
<p>Currently, the following plugins are available by default:</p>
<ul>
<li class="desktopDocumentFeatures"><b>Send</b> allows sending a document via email using the default desktop mail client (available in the <em>desktop version</em> only),</li>
<li><b>Highlight code</b> allows highlighting the code syntax selecting the required language, style and background color,</li>
<li><b>OCR</b> recognizing text in any picture and inserting the recognized text to the document,</li>
<li><b>PhotoEditor</b> allows editing images: cropping, flipping, rotating, drawing lines and shapes, adding icons and text, loading a mask and applying filters such as Grayscale, Invert, Sepia, Blur, Sharpen, Emboss, etc.,</li>
<li class="onlineDocumentFeatures"><b>Speech</b> allows converting the selected text to speech (available in the <em>online version</em> only),</li>
<li><b>Thesaurus</b> allows finding synonyms and antonyms for the selected word and replacing it with the chosen one,</li>
<li><b>Translator</b> allows translating the selected text into other languages,</li>
<li><b>YouTube</b> allows embedding YouTube videos into the document,</li>
<li><b>Mendeley</b> allows managing papers researches and generating bibliographies for scholarly articles,</li>
<li><b>Zotero</b> allows managing bibliographic data and related research materials.</li>
<li class="desktopDocumentFeatures"><b>Send</b> allows to send the document via email using the default desktop mail client (available in the <em>desktop version</em> only),</li>
<li><a href="../UsageInstructions/HighlightedCode.htm" onclick="onhyperlinkclick(this)">Highlight code</a> allows to highlight syntax of the code selecting the necessary language, style, background color,</li>
<li><a href="../UsageInstructions/OCR.htm" onclick="onhyperlinkclick(this)">OCR</a> allows to recognize text included into a picture and insert it into the document text,</li>
<li><a href="../UsageInstructions/PhotoEditor.htm" onclick="onhyperlinkclick(this)">Photo Editor</a> allows to edit images: crop, flip, rotate them, draw lines and shapes, add icons and text, load a mask and apply filters such as Grayscale, Invert, Sepia, Blur, Sharpen, Emboss, etc.,</li>
<li class="onlineDocumentFeatures"><a href="../UsageInstructions/Speech.htm" onclick="onhyperlinkclick(this)">Speech</a> allows to convert the selected text into speech (available in the <em>online version</em> only),</li>
<li><a href="../UsageInstructions/Thesaurus.htm" onclick="onhyperlinkclick(this)">Thesaurus</a> allows to search for synonyms and antonyms of a word and replace it with the selected one,</li>
<li><a href="../UsageInstructions/Translator.htm" onclick="onhyperlinkclick(this)">Translator</a> allows to translate the selected text into other languages,</li>
<li><a href="../UsageInstructions/YouTube.htm" onclick="onhyperlinkclick(this)">YouTube</a> allows to embed YouTube videos into your document,</li>
<li class="onlineDocumentFeatures"><a href="../UsageInstructions/InsertReferences.htm#Mendeley_block" onclick="onhyperlinkclick(this)">Mendeley</a> allows to manage research papers and generate bibliographies for scholarly articles (available in the <em>online version</em> only),</li>
<li class="onlineDocumentFeatures"><a href="../UsageInstructions/InsertReferences.htm#Zotero_block" onclick="onhyperlinkclick(this)">Zotero</a> allows to manage bibliographic data and related research materials (available in the <em>online version</em> only),</li>
<li class="onlineDocumentFeatures"><a href="../UsageInstructions/InsertReferences.htm#EasyBib_block" onclick="onhyperlinkclick(this)">EasyBib</a> helps to find and insert related books, journal articles and websites (available in the <em>online version</em> only).</li>
</ul>
<p class="onlineDocumentFeatures">The <b>Wordpress</b> and <b>EasyBib</b> plugins can be used if you connect the corresponding services in your portal settings. You can use the following instructions <a target="_blank" href="https://helpcenter.onlyoffice.com/server/windows/community/authorization-keys.aspx" onclick="onhyperlinkclick(this)">for the server version</a> or <a target="_blank" href="https://helpcenter.onlyoffice.com/tipstricks/authorization-keys-saas.aspx" onclick="onhyperlinkclick(this)">for the SaaS version</a>. </p>
<p>To learn more about plugins, please refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/basic" onclick="onhyperlinkclick(this)">API Documentation</a>. All the existing examples of open source plugins are currently available on <a target="_blank" href="https://github.com/ONLYOFFICE/sdkjs-plugins" onclick="onhyperlinkclick(this)">GitHub</a>.</p>
<p class="onlineDocumentFeatures">The <a href="../UsageInstructions/Wordpress.htm" onclick="onhyperlinkclick(this)">Wordpress</a> and <b>EasyBib</b> plugins can be used if you connect the corresponding services in your portal settings. You can use the following instructions <a target="_blank" href="https://helpcenter.onlyoffice.com/server/windows/community/authorization-keys.aspx" onclick="onhyperlinkclick(this)">for the server version</a> or <a target="_blank" href="https://helpcenter.onlyoffice.com/tipstricks/authorization-keys-saas.aspx" onclick="onhyperlinkclick(this)">for the SaaS version</a>. </p>
<p>To learn more about plugins, please refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/basic" onclick="onhyperlinkclick(this)">API Documentation</a>. All the currently existing open source plugin examples are available on <a target="_blank" href="https://github.com/ONLYOFFICE/sdkjs-plugins" onclick="onhyperlinkclick(this)">GitHub</a>.</p>
</div>
</body>
</html>

24
apps/documenteditor/main/resources/help/en/ProgramInterface/ProgramInterface.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Introducing the Document Editor user interface</title>
<title>Introducing the user interface of the Document Editor</title>
<meta charset="utf-8" />
<meta name="description" content="Introducing the Document Editor user interface" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
@ -13,8 +13,8 @@
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Introducing the user interface of the Document Editor</h1>
<p>The <b>Document Editor</b> uses a tabbed interface where editing commands are grouped into tabs by functionality.</p>
<h1>Introducing the user interface of the Document Editor</h1>
<p>The <b>Document Editor</b> uses a tabbed interface where editing commands are grouped into tabs by functionality.</p>
<div class="onlineDocumentFeatures">
<p>Main window of the Online Document Editor:</p>
<p><img alt="Online Document Editor window" src="../images/interface/editorwindow.png" /></p>
@ -27,17 +27,17 @@
<ol>
<li>
The <b>Editor header</b> displays the ONLYOFFICE logo, <span class="desktopDocumentFeatures">tabs for all opened documents </span>with their names and menu tabs.
<p>On the left side of the <b>Editor header</b> the <b>Save</b>, <b>Print file</b>, <b>Undo</b> and <b>Redo</b> buttons are located</p>
<p>On the left side of the <b>Editor header</b>, the <b>Save</b>, <b>Print file</b>, <b>Undo</b> and <b>Redo</b> buttons are located.</p>
<p><img alt="Icons in the editor header" src="../images/interface/leftpart.png" /></p>
<p>On the right side of the <b>Editor header</b> along with the user name the following icons are displayed:</p>
<p>On the right side of the <b>Editor header</b>, along with the user name the following icons are displayed:</p>
<ul>
<li><img alt="Open file location" src="../images/gotodocuments.png" /> <b>Open file location</b>. <span class="desktopDocumentFeatures">In the <em>desktop version</em>, it allows opening the folder, where the file is stored, in the <b>File explorer</b> window.</span> <span class="onlineDocumentFeatures"> In the <em>online version</em>, it allows to opening the folder of the <b>Documents</b> module, where the file is stored in a new browser tab.</span></li>
<li><img alt="Open file location" src="../images/gotodocuments.png" /> <b>Open file location</b> - <span class="desktopDocumentFeatures">in the <em>desktop version</em>, it allows opening the folder, where the file is stored, in the <b>File explorer</b> window.</span> <span class="onlineDocumentFeatures"> In the <em>online version</em>, it allows opening the folder of the <b>Documents</b> module, where the file is stored, in a new browser tab.</span></li>
<li><img alt="View Settings icon" src="../images/viewsettingsicon.png" /> It allows adjusting the <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and access the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> of the editor.</li>
<li class="onlineDocumentFeatures"><img alt="Manage document access rights icon" src="../images/access_rights.png" /> <b>Manage document access rights</b> (available in the <em>online version</em> only). It allows adjusting <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">access rights</a> for the documents stored in the cloud.</li>
<li class="onlineDocumentFeatures"><img alt="Manage document access rights icon" src="../images/access_rights.png" /> <b>Manage document access rights</b> (available in the <em>online version</em> only). It allows adjusting <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">access rights</a> for the documents stored in the cloud.</li>
</ul>
</li>
<li>The <b>Top toolbar</b> displays a set of editing commands depending on the selected menu tab. Currently, the following tabs are available: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Home</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Insert</a>, <a href="../ProgramInterface/LayoutTab.htm" onclick="onhyperlinkclick(this)">Layout</a>, <a href="../ProgramInterface/ReferencesTab.htm" onclick="onhyperlinkclick(this)">References</a>, <a href="../ProgramInterface/ReviewTab.htm" onclick="onhyperlinkclick(this)">Collaboration</a>, <span class="desktopDocumentFeatures">Protection,</span> <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
<p>The <img alt="Copy icon" src="../images/copy.png" /> <b>Copy</b> and <img alt="Paste icon" src="../images/paste.png" /> <b>Paste</b> options are always available at the left part on the left side of the <b>Top toolbar</b> regardless of the selected tab.</p>
<p>The <img alt="Copy icon" src="../images/copy.png" /> <b>Copy</b> and <img alt="Paste icon" src="../images/paste.png" /> <b>Paste</b> options are always available on the left side of the <b>Top toolbar</b> regardless of the selected tab.</p>
</li>
<li>The <b>Status bar</b> located at the bottom of the editor window indicates the page number and displays some notifications (for example, "All changes saved", etc.). It also allows <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">setting the text language, enabling spell checking</a>, turning on the <a href="../HelpfulHints/Review.htm" onclick="onhyperlinkclick(this)">track changes mode</a> and adjusting <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">zoom</a>.</li>
<li>The <b>Left sidebar</b> contains the following icons:
@ -50,10 +50,10 @@
<li class="onlineDocumentFeatures"><img alt="About icon" src="../images/abouticon.png" /> - (available in the <em>online version</em> only) allows to view the information about the program.</li>
</ul>
</li>
<li>The <b>Right sidebar</b> allows to adjusting additional parameters of different objects. When you select a particular object in the text, the corresponding icon is activated on the <b>Right sidebar</b>. Click the icon to expand the Right sidebar.</li>
<li>The Horizontal and vertical <b>Rulers</b> makes it possible to align the text and other elements in a document, set up margins, tab stops, and paragraph indents.</li>
<li>The <b>Working area</b> allows viewing document content, entering and editing data.</li>
<li>The <b>Scroll bar</b> on the right allows scrolling up and down multi-page documents.</li>
<li><b>Right sidebar</b> sidebar allows adjusting additional parameters of different objects. When you select a particular object in the text, the corresponding icon is activated on the <b>Right sidebar</b>. Click this icon to expand the <b>Right sidebar</b>.</li>
<li>The horizontal and vertical <b>Rulers</b> make it possible to align the text and other elements in the document, set up margins, tab stops and paragraph indents.</li>
<li><b>Working area</b> allows to view document content, enter and edit data.</li>
<li><b>Scroll bar</b> on the right allows to scroll up and down multi-page documents.</li>
</ol>
<p>For your convenience, you can hide some components and display them again when them when necessary. To learn more about adjusting view settings, please refer to <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">this page</a>.</p>

5
apps/documenteditor/main/resources/help/en/ProgramInterface/ReferencesTab.htm
View file

@ -26,10 +26,11 @@
<p>Using this tab, you can:</p>
<ul>
<li>create and automatically update a <a href="../UsageInstructions/CreateTableOfContents.htm" onclick="onhyperlinkclick(this)">table of contents</a>,</li>
<li>insert <a href="../UsageInstructions/InsertFootnotes.htm" onclick="onhyperlinkclick(this)">footnotes</a>,</li>
<li>insert <a href="../UsageInstructions/InsertFootnotes.htm" onclick="onhyperlinkclick(this)">footnotes</a> and <a href="../UsageInstructions/InsertEndnotes.htm" onclick="onhyperlinkclick(this)">endnotes</a>,</li>
<li>insert <a href="../UsageInstructions/AddHyperlinks.htm" onclick="onhyperlinkclick(this)">hyperlinks</a>,</li>
<li>add <a href="../UsageInstructions/InsertBookmarks.htm" onclick="onhyperlinkclick(this)">bookmarks</a>.</li>
<li>add <a href="../UsageInstructions/Addcaption.htm" onclick="onhyperlinkclick(this)">captions</a>.</li>
<li>add <a href="../UsageInstructions/Addcaption.htm" onclick="onhyperlinkclick(this)">captions</a>,</li>
<li>insert <a href="../UsageInstructions/InsertCrossReference.htm" onclick="onhyperlinkclick(this)">cross-references</a>.</li>
</ul>
</div>
</body>

2
apps/documenteditor/main/resources/help/en/UsageInstructions/ChangeColorScheme.htm
View file

@ -23,7 +23,7 @@
<li><b>Theme Colors</b> - the colors that correspond to the selected color scheme of the document.</li>
<li><b>Standard Colors</b> - a set of default colors. The selected color scheme does not affect them.</li>
<li>
<b>Custom Color</b> - click this caption if the required color is missing among the available palettes. Select the necessary colors range moving the vertical color slider and set a 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 define a color on the base of the RGB color model by entering the corresponding 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 defined, click the <b>Add</b> button:
<b>Custom Color</b> - click this caption if the required color is missing among the available palettes. Select the necessary color range moving the vertical color slider and set a 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 define a color on the base of the RGB color model by entering the corresponding 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 defined, 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>

32
apps/documenteditor/main/resources/help/en/UsageInstructions/ConvertFootnotesEndnotes.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Convert footnotes and endnotes</title>
<meta charset="utf-8" />
<meta name="description" content="Insert footnotes to provide explanations for some terms or make references to the sources" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Convert footnotes and endnotes</h1>
<p>The <b>ONLYOFFICE Document Editor</b> allows you to quickly <b>convert footnotes</b> to <b>endnotes</b>, and vice versa, e.g., if you see that some footnotes in the resulting document should be placed in the end. Instead of recreating them as endnotes, use the corresponding tool for effortless conversion.</p>
<ol>
<li>Click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab located at the top toolbar,</li>
<li>Hover over the <b>Convert all notes</b> menu item and choose one of the options from the list to the right:
<p><img alt="Convert footnotes_endnotes" src="../images/convert_footnotes_endnotes.png" /></p></li>
<li>
<ul>
<li><b>Convert all Footnotes to Endnotes</b> to change all footnotes into endnotes;</li>
<li><b>Convert all Endnotes to Footnotes</b> to change all endnotes to footnotes;</li>
<li><b>Swap Footnotes and Endnotes</b> to change all endnotes to footnotes, and all footnotes to endnotes.</li>
</ul>
</li>
</ol>
</div>
</body>
</html>

30
apps/documenteditor/main/resources/help/en/UsageInstructions/HighlightedCode.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Insert highlighted code</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Hightlight code plugin for ONLYOFFICE editors, which allows to embed code with the already adjusted style into documents" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert highlighted code</h1>
<p>You can embed highlighted code with the already adjusted style in accordance with the programming language and coloring style of the program you have chosen.</p>
<ol>
<li>Go to your document and place the cursor at the location where you want to include the code.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Highlight code plugin icon" src="../images/highlight.png" /> <b>Highlight code</b>.</li>
<li>Specify the programming <b>Language</b>.</li>
<li>Select a <b>Style</b> of the code so that it appears as if it were open in this program.</li>
<li>Specify if you want to replace tabs with spaces.</li>
<li>Choose <b>Background color</b>. To do this, manually move the cursor over the palette or insert the <b>RBG</b>/<b>HSL</b>/<b>HEX</b> value.</li>
<li>Click <b>OK</b> to insert the code.</li>
</ol>
<img class="gif" alt="Highlight plugin gif" src="../images/highlight_plugin.gif" width="600" />
</div>
</body>
</html>

30
apps/documenteditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm
View file

@ -60,14 +60,28 @@
<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" onclick="onhyperlinkclick(this)">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>Gradient Fill</b> - use this option to fill the shape with two or more fading colors. Customize your gradient fill with no constraints. Click the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon to open the <b>Fill</b> menu on the right sidebar:
<p><img alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
<p>Available menu options:</p>
<ul>
<li>
<b>Style</b> - choose between <b>Linear</b> or <b>Radial</b>:
<ul>
<li><b>Linear</b> is used  when you need your colors to flow from left-to-right, top-to-bottom, or at any angle you chose in a single direction. Click <b>Direction</b> to choose a preset direction and click <b>Angle</b> for a precise gradient angle.</li>
<li><b>Radial</b> is used to move from the center as it starts at a single point and emanates outward.</li>
</ul>
</li>
<li>
<b>Gradient Point</b> is a specific point for transition from one color to another.
<ul>
<li>Use the <img alt="Add Gradient Point" src="../images/addgradientpoint.png" /> <b>Add Gradient Point</b> button or slider bar to add a gradient point. You can add up to 10 gradient points. Each next gradient point added will in no way affect the current gradient fill appearance. Use the <img alt="Remove Gradient Point" src="../images/removegradientpoint.png" /> <b>Remove Gradient Point</b> button to delete a certain gradient point.</li>
<li>Use the slider bar to change the location of the gradient point or specify <b>Position</b> in percentage for precise location.</li>
<li>To apply a color to a gradient point, click a point on the slider bar, and then click <b>Color</b> to choose the color you want.</li>
</ul>
</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>

183
apps/documenteditor/main/resources/help/en/UsageInstructions/InsertCrossReference.htm Normal file
View file

@ -0,0 +1,183 @@
<!DOCTYPE html>
<html>
<head>
<title>Insert cross-references</title>
<meta charset="utf-8" />
<meta name="description" content="Use cross-references to create links leading to other parts of the same document" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert cross-references</h1>
<p>Cross-references are used to create links leading to other parts of the same document, e.g. headings or objects such as charts or tables. Such references appear in the form of a hyperlink.</p>
<h2>Creating a cross-reference</h2>
<ol>
<li>Position your cursor in the place you want to insert a cross-reference.</li>
<li>Go to the <b>References</b> tab and click on the <b>Cross-reference</b> icon.</li>
<li>
Set the required parameters in the opened <b>Cross-reference</b> window:
<ul>
<li>The <b>Reference type</b> drop-down menu specifies the item you wish to refer to, i.e. a numbered item (set by default), <em>a heading, a bookmark, a footnote, an endnote, an equation, a figure,</em> and <em>a table</em>. Choose the required item type.</li>
<li>
The <b>Insert reference to</b> drop-down menu specifies the text or numeric value of a reference you want to insert depending on the item you chose in the <b>Reference type</b> menu. For example, if you chose the <b>Heading</b> option, you may specify the following contents: <em>Heading text, Page number, Heading number, Heading number (no context), Heading number (full context), Above/below</em>.
<details class="details-example">
<summary>The full list of the options provided depending on the chosen reference type</summary>
<table class="cross-reference">
<tr>
<th>Reference type</th>
<th>Insert reference to</th>
<th style="text-align: left;">Description</th>
</tr>
<tr>
<td rowspan="6">Numbered item</td>
<td style="text-align: left;">Page number</td>
<td style="text-align: left;">Inserts the page number of the numbered item</td>
</tr>
<tr>
<td style="text-align: left;">Paragraph number</td>
<td style="text-align: left;">Inserts the paragraph number of the numbered item</td>
</tr>
<tr>
<td style="text-align: left;">Paragraph number (no context)</td>
<td style="text-align: left;">Inserts an abbreviated paragraph number. The reference is made to the specific item of the numbered list only, e.g., instead of “4.1.1” you refer to “1” only</td>
</tr>
<tr>
<td style="text-align: left;">Paragraph number (full context)</td>
<td style="text-align: left;">Inserts a full paragraph number, e.g., “4.1.1”</td>
</tr>
<tr>
<td style="text-align: left;">Paragraph text</td>
<td style="text-align: left;">Inserts the text value of the paragraph, e.g., if you have “4.1.1. Terms and Conditions”, you refer to “Terms and Conditions” only</td>
</tr>
<tr>
<td style="text-align: left;">Above/below</td>
<td style="text-align: left;">Inserts the words “above” or “below” depending on the position of the item</td>
</tr>
<tr>
<td rowspan="6">Heading</td>
<td style="text-align: left;">Heading text</td>
<td style="text-align: left;">Inserts the entire text of the heading</td>
</tr>
<tr>
<td style="text-align: left;">Page number</td>
<td style="text-align: left;">Inserts the page number of the heading</td>
</tr>
<tr>
<td style="text-align: left;">Heading number</td>
<td style="text-align: left;">Inserts the sequence number of the heading</td>
</tr>
<tr>
<td style="text-align: left;">Heading number (no context)</td>
<td style="text-align: left;">Inserts an abbreviated heading number. Make sure the cursor point is in the section you are referencing to, e.g., you are in section 4 and you wish to refer to heading 4.B, so instead of “4.B” you receive “B” only</td>
</tr>
<tr>
<td style="text-align: left;">Heading number (full context)</td>
<td style="text-align: left;">Inserts a full heading number even if the cursor point is in the same section</td>
</tr>
<tr>
<td style="text-align: left;">Above/below</td>
<td style="text-align: left;">Inserts the words “above” or “below” depending on the position of the item</td>
</tr>
<tr>
<td rowspan="6">Bookmark</td>
<td style="text-align: left;">Bookmark text</td>
<td style="text-align: left;">Inserts the entire text of the bookmark</td>
</tr>
<tr>
<td style="text-align: left;">Page number</td>
<td style="text-align: left;">Inserts the page number of the bookmark</td>
</tr>
<tr>
<td style="text-align: left;">Paragraph number</td>
<td style="text-align: left;">Inserts the paragraph number of the bookmark</td>
</tr>
<tr>
<td style="text-align: left;">Paragraph number (no context)</td>
<td style="text-align: left;">Inserts an abbreviated paragraph number. The reference is made to the specific item only, e.g., instead of “4.1.1” you refer to “1” only</td>
</tr>
<tr>
<td style="text-align: left;">Paragraph number (full context)</td>
<td style="text-align: left;">Inserts a full paragraph number, e.g., “4.1.1”</td>
</tr>
<tr>
<td style="text-align: left;">Above/below</td>
<td style="text-align: left;">Inserts the words “above” or “below” depending on the position of the item</td>
</tr>
<tr>
<td rowspan="4">Footnote</td>
<td style="text-align: left;">Footnote number</td>
<td style="text-align: left;">Inserts the footnote number</td>
</tr>
<tr>
<td style="text-align: left;">Page number</td>
<td style="text-align: left;">Inserts the page number of the footnote</td>
</tr>
<tr>
<td style="text-align: left;">Above/below</td>
<td style="text-align: left;">Inserts the words “above” or “below” depending on the position of the item</td>
</tr>
<tr>
<td style="text-align: left;">Footnote number (formatted)</td>
<td style="text-align: left;">Inserts the number of the footnote formatted as a footnote. The numbering of the actual footnotes is not affected</td>
</tr>
<tr>
<td rowspan="4">Endnote</td>
<td style="text-align: left;">Endnote number</td>
<td style="text-align: left;">Inserts the endnote number</td>
</tr>
<tr>
<td style="text-align: left;">Page number</td>
<td style="text-align: left;">Inserts the page number of the endnote</td>
</tr>
<tr>
<td style="text-align: left;">Above/below</td>
<td style="text-align: left;">Inserts the words “above” or “below” depending on the position of the item</td>
</tr>
<tr>
<td style="text-align: left;">Endnote number (formatted)</td>
<td style="text-align: left;">Inserts the number of the endnote formatted as an endnote. The numbering of the actual endnotes is not affected</td>
</tr>
<tr>
<td rowspan="5">Equation / Figure / Table</td>
<td style="text-align: left;">Entire caption</td>
<td style="text-align: left;">Inserts the full text of the caption</td>
</tr>
<tr>
<td style="text-align: left;">Only label and number</td>
<td style="text-align: left;">Inserts the label and object number only, e.g., “Table 1.1”</td>
</tr>
<tr>
<td style="text-align: left;">Only caption text</td>
<td style="text-align: left;">Inserts the text of the caption only</td>
</tr>
<tr>
<td style="text-align: left;">Page number</td>
<td style="text-align: left;">Inserts the page number containing the referenced object</td>
</tr>
<tr>
<td style="text-align: left;">Above/below</td>
<td style="text-align: left;">Inserts the words “above” or “below” depending on the position of the item</td>
</tr>
</table>
</details>
<br />
</li>
<li>Check the <b>Insert as hyperlink</b> box to turn the reference into an active link.</li>
<li>Check the <b>Include above/below</b> box (if available) to specify the position of the item you refer to. The ONLYOFFICE Document Editor will automatically insert words “<em>above</em>” or “<em>below</em>” depending on the position of the item.</li>
<li>Check the <b>Separate numbers with</b> box to specify the separator in the box to the right. The separators are needed for full context references.</li>
<li>The <b>For which</b> field offers you the items available according to the <b>Reference type</b> you have chosen, e.g. if you chose the <b>Heading</b> option, you will see the full list of the headings in the document.</li>
</ul>
</li>
<li>Click <b>Insert</b> to create a cross-reference.</li>
</ol>
<h2>Removing a cross-reference</h2>
<p>To delete a cross-reference, select the cross-reference you wish to remove and press the <b>Delete</b> key.</p>
</div>
</body>
</html>

84
apps/documenteditor/main/resources/help/en/UsageInstructions/InsertEndnotes.htm Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<title>Insert endnotes</title>
<meta charset="utf-8" />
<meta name="description" content="Insert endnotes to provide explanations for some terms or make references to the sources" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert endnotes</h1>
<p>You can insert endnotes to add explanations or comments to specific terms or sentences, make references to the sources, etc. that are displayed at end of the document.</p>
<h2>Inserting endnotes</h2>
<p>To insert an endnote into your document,</p>
<ol>
<li>position the insertion point at the end of the text passage or at the word that you want to add the endnote to,</li>
<li>switch to the <b>References</b> tab located at the top toolbar,</li>
<li>
click the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the top toolbar and select the <b>Insert Endnote</b> option from the menu.<br />
<p>The endnote mark (i.e. the superscript character that indicates an endnote) appears in the text of the document, and the insertion point moves to the end of the document.</p>
</li>
<li>type in the endnote text.</li>
</ol>
<p>Repeat the above mentioned operations to add subsequent endnotes for other text passages in the document. The endnotes are numbered automatically: <em>i, ii, iii,</em> etc. by default.</p>
<p><img alt="Endnotes" src="../images/endnotesadded.png" /></p>
<h2>Display of endnotes in the document</h2>
<p>If you hover the mouse pointer over the endnote mark in the document text, a small pop-up window with the endnote text appears.</p>
<p><img alt="Endnote text" src="../images/endnotetext.png" /></p>
<h2>Navigating through endnotes</h2>
<p>To easily navigate through the added endnotes in the text of the document,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab located at the top toolbar,</li>
<li>in the <b>Go to Endnotes</b> section, use the <img alt="Previous endnote icon" src="../images/previousfootnote.png" /> arrow to go to the previous endnote or the <img alt="Next endnote icon" src="../images/nextfootnote.png" /> arrow to go to the next endnote.</li>
</ol>
<h2>Editing endnotes</h2>
<p>To edit the endnotes settings,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab located at the top toolbar,</li>
<li>select the <b>Notes Settings</b> option from the menu,</li>
<li>
change the current parameters in the <b>Notes Settings</b> window that will appear:
<p><img alt="Endnotes Settings window" src="../images/endnotes_settings.png" /></p>
<ul>
<li>
Adjust the endnotes <b>Format</b>:
<ul>
<li><b>Number Format</b> - select the necessary number format from the available ones: <em>1, 2, 3,...</em>, <em>a, b, c,...</em>, <em>A, B, C,...</em>, <em>i, ii, iii,...</em>, <em>I, II, III,...</em>.</li>
<li><b>Start at</b> - use the arrows to set the number or letter you want to start numbering with.</li>
<li>
<b>Numbering</b> - select a way to number your endnotes:
<ul>
<li><b>Continuous</b> - to number endnotes sequentially throughout the document,</li>
<li><b>Restart each section</b> - to start endnote numbering with 1 (or another specified character) at the beginning of each section,</li>
<li><b>Restart each page</b> - to start endnote numbering with 1 (or another specified character) at the beginning of each page.</li>
</ul>
</li>
<li><b>Custom Mark</b> - set a special character or a word you want to use as the endnote mark (e.g. * or Note1). Enter the necessary character/word into the text entry field and click the <b>Insert</b> button at the bottom of the <b>Notes Settings</b> window.</li>
</ul>
</li>
<li>
Use the <b>Apply changes to</b> drop-down list if you want to apply the specified notes settings to the <b>Whole document</b> or the <b>Current section</b> only.
<p class="note"><b>Note</b>: to use different endnotes formatting in separate parts of the document, you need to add <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">section breaks</a> first.</p>
</li>
</ul>
</li>
<li>When you finish, click the <b>Apply</b> button.</li>
</ol>
<h2>Removing endnotes</h2>
<p>To remove a single endnote, position the insertion point directly before the endtnote mark in the text and press <b>Delete</b>. Other endnotes will be renumbered automatically.</p>
<p>To delete all the endnotes in the document,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab located at the top toolbar,</li>
<li>select the <b>Delete All Notes</b> option from the menu.</li>
<li>choose the <b>Delete All Endnotes</b> option in the appeared window and click <b>OK</b>.</li>
</ol>
</div>
</body>
</html>

152
apps/documenteditor/main/resources/help/en/UsageInstructions/InsertFootnotes.htm
View file

@ -1,82 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<title>Insert footnotes</title>
<meta charset="utf-8" />
<meta name="description" content="Insert footnotes to provide explanations for some terms or make references to the sources" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<head>
<title>Insert footnotes</title>
<meta charset="utf-8" />
<meta name="description" content="Insert footnotes to provide explanations for some terms or make references to the sources" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert footnotes</h1>
<p>You can insert footnotes to add explanations or comments for certain sentences or terms used in your text, make references to the sources, etc.</p>
<p>To insert a footnote into your document,</p>
<ol>
<li>position the insertion point at the end of the text passage that you want to add the footnote to,</li>
<li>switch to the <b>References</b> tab of the top toolbar,</li>
<li>click the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the top toolbar, or<br/>
<h1>Insert footnotes</h1>
<p>You can insert footnotes to add explanations or comments for certain sentences or terms used in your text, make references to the sources, etc.</p>
<h2>Inserting footnotes</h2>
<p>To insert a footnote into your document,</p>
<ol>
<li>position the insertion point at the end of the text passage that you want to add the footnote to,</li>
<li>switch to the <b>References</b> tab located at the top toolbar,</li>
<li>
click the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the top toolbar, or<br />
click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon and select the <b>Insert Footnote</b> option from the menu,
<p>The footnote mark (i.e. the superscript character that indicates a footnote) appears in the text of the document, and the insertion point moves to the bottom of the current page.</p>
</li>
<li>type in the footnote text.</li>
</ol>
<p>Repeat the above mentioned operations to add subsequent footnotes for other text passages in the document. The footnotes are numbered automatically.</p>
<p><img alt="Footnotes" src="../images/footnotesadded.png" /></p>
<p>If you hover the mouse pointer over the footnote mark in the document text, a small pop-up window with the footnote text appears.</p>
<p><img alt="Footnote text" src="../images/footnotetext.png" /></p>
<p>To easily navigate through the added footnotes in the text of the document,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab of the top toolbar,</li>
<li>in the <b>Go to Footnotes</b> section, use the <img alt="Previous footnote icon" src="../images/previousfootnote.png" /> arrow to go to the previous footnote or the <img alt="Next footnote icon" src="../images/nextfootnote.png" /> arrow to go to the next footnote.</li>
</ol>
<hr />
<p>To edit the footnotes settings,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab of the top toolbar,</li>
<li>select the <b>Notes Settings</b> option from the menu,</li>
<li>change the current parameters in the <b>Notes Settings</b> window that will appear:
<p><img alt="Footnotes Settings window" src="../images/footnotes_settings.png" /></p>
<ul>
<li>Set the <b>Location</b> of footnotes on the page selecting one of the available options:
<ul>
<li><b>Bottom of page</b> - to position footnotes at the bottom of the page (this option is selected by default).</li>
<li><b>Below text</b> - to position footnotes closer to the text. This option can be useful in cases when the page contains a short text.</li>
</ul>
</li>
<li>Adjust the footnotes <b>Format</b>:
<ul>
<li><b>Number Format</b> - select the necessary number format from the available ones: <em>1, 2, 3,...</em>, <em>a, b, c,...</em>, <em>A, B, C,...</em>, <em>i, ii, iii,...</em>, <em>I, II, III,...</em>.</li>
<li><b>Start at</b> - use the arrows to set the number or letter you want to start numbering with.</li>
<li><b>Numbering</b> - select a way to number your footnotes:
</li>
<li>type in the footnote text.</li>
</ol>
<p>Repeat the above mentioned operations to add subsequent footnotes for other text passages in the document. The footnotes are numbered automatically.</p>
<p><img alt="Footnotes" src="../images/footnotesadded.png" /></p>
<h2>Display of footnotes in the document</h2>
<p>If you hover the mouse pointer over the footnote mark in the document text, a small pop-up window with the footnote text appears.</p>
<p><img alt="Footnote text" src="../images/footnotetext.png" /></p>
<h2>Navigating through footnotes</h2>
<p>To easily navigate through the added footnotes in the text of the document,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab located at the top toolbar,</li>
<li>in the <b>Go to Footnotes</b> section, use the <img alt="Previous footnote icon" src="../images/previousfootnote.png" /> arrow to go to the previous footnote or the <img alt="Next footnote icon" src="../images/nextfootnote.png" /> arrow to go to the next footnote.</li>
</ol>
<h2>Editing footnotes</h2>
<p>To edit the footnotes settings,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab located at the top toolbar,</li>
<li>select the <b>Notes Settings</b> option from the menu,</li>
<li>
change the current parameters in the <b>Notes Settings</b> window that will appear:
<p><img alt="Footnotes Settings window" src="../images/footnotes_settings.png" /></p>
<ul>
<li>
Set the <b>Location</b> of footnotes on the page selecting one of the available options:
<ul>
<li><b>Continuous</b> - to number footnotes sequentially throughout the document,</li>
<li><b>Restart each section</b> - to start footnote numbering with 1 (or another specified character) at the beginning of each section,</li>
<li><b>Restart each page</b> - to start footnote numbering with 1 (or another specified character) at the beginning of each page.</li>
<li><b>Bottom of page</b> - to position footnotes at the bottom of the page (this option is selected by default).</li>
<li><b>Below text</b> - to position footnotes closer to the text. This option can be useful in cases when the page contains a short text.</li>
</ul>
</li>
<li><b>Custom Mark</b> - set a special character or a word you want to use as the footnote mark (e.g. * or Note1). Enter the necessary character/word into the text entry field and click the <b>Insert</b> button at the bottom of the <b>Notes Settings</b> window.</li>
</ul>
</li>
<li>Use the <b>Apply changes to</b> drop-down list if you want to apply the specified notes settings to the <b>Whole document</b> or the <b>Current section</b> only.
<p class="note"><b>Note</b>: to use different footnotes formatting in separate parts of the document, you need to add <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">section breaks</a> first.</p>
</li>
</ul>
</li>
<li>When you finish, click the <b>Apply</b> button.</li>
</ol>
</li>
<li>
Adjust the footnotes <b>Format</b>:
<ul>
<li><b>Number Format</b> - select the necessary number format from the available ones: <em>1, 2, 3,...</em>, <em>a, b, c,...</em>, <em>A, B, C,...</em>, <em>i, ii, iii,...</em>, <em>I, II, III,...</em>.</li>
<li><b>Start at</b> - use the arrows to set the number or letter you want to start numbering with.</li>
<li>
<b>Numbering</b> - select a way to number your footnotes:
<ul>
<li><b>Continuous</b> - to number footnotes sequentially throughout the document,</li>
<li><b>Restart each section</b> - to start footnote numbering with 1 (or another specified character) at the beginning of each section,</li>
<li><b>Restart each page</b> - to start footnote numbering with 1 (or another specified character) at the beginning of each page.</li>
</ul>
</li>
<li><b>Custom Mark</b> - set a special character or a word you want to use as the footnote mark (e.g. * or Note1). Enter the necessary character/word into the text entry field and click the <b>Insert</b> button at the bottom of the <b>Notes Settings</b> window.</li>
</ul>
</li>
<li>
Use the <b>Apply changes to</b> drop-down list if you want to apply the specified notes settings to the <b>Whole document</b> or the <b>Current section</b> only.
<p class="note"><b>Note</b>: to use different footnotes formatting in separate parts of the document, you need to add <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">section breaks</a> first.</p>
</li>
</ul>
</li>
<li>When you finish, click the <b>Apply</b> button.</li>
</ol>
<hr />
<p>To remove a single footnote, position the insertion point directly before the footnote mark in the text and press <b>Delete</b>. Other footnotes will be renumbered automatically.</p>
<p>To delete all the footnotes in the document,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab of the top toolbar,</li>
<li>select the <b>Delete All Footnotes</b> option from the menu.</li>
</ol>
</div>
</body>
<h2>Removing footnotes</h2>
<p>To remove a single footnote, position the insertion point directly before the footnote mark in the text and press <b>Delete</b>. Other footnotes will be renumbered automatically.</p>
<p>To delete all the footnotes in the document,</p>
<ol>
<li>click the arrow next to the <img alt="Footnote icon" src="../images/addfootnote.png" /> <b>Footnote</b> icon on the <b>References</b> tab located at the top toolbar,</li>
<li>select the <b>Delete All Notes</b> option from the menu.</li>
<li>choose the <b>Delete All Footnotes</b> option in the appeared window and click <b>OK</b>.</li>
</ol>
</div>
</body>
</html>

53
apps/documenteditor/main/resources/help/en/UsageInstructions/InsertLineNumbers.htm Normal file
View file

@ -0,0 +1,53 @@

<!DOCTYPE html>
<html>
<head>
<title>Insert line numbers</title>
<meta charset="utf-8" />
<meta name="description" content="Insert line numbers in the Document Editor" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert line numbers</h1>
<p>The <b>ONLYOFFICE Document Editor</b> can count lines in your document automatically. This feature can be useful when you need to refer to a specific line of the document, e.g. in a legal agreement or a code script. Use the <img alt="Line Numbers icon" src="../images/linenumbers_icon.png" /> <b>Line Numbers</b> tool to apply line numbering to the document. Please note that the line numbering sequence is not applied to the text in the objects such as tables, text boxes, charts, headers/footers, etc. These objects are treated as one line.</p>
<h2>Applying line numbering</h2>
<ol>
<li>Open the <b>Layout</b> tab located at the top toolbar and click on the <img alt="Line Numbers icon" src="../images/linenumbers_icon.png" /><b>Line Numbers</b> icon.</li>
<li>
Choose the required parameters for a quick set-up in the opened drop-down menu:
<ul>
<li><b>Continuous</b> - each line of the document will be assigned a sequence number.</li>
<li><b>Restart Each Page</b> - the line numbering sequence will restart on each page of the document.</li>
<li><b>Restart Each Section</b> - the line numbering sequence will restart in each section of the document. Please refer to <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">this guide</a> to learn more about section breaks.</li>
<li><b>Suppress for Current Paragraph</b> - the current paragraph will be skipped in the line numbering sequence. To exclude several paragraphs from the sequence, select them via the left-mouse button before applying this parameter.</li>
</ul>
</li>
<li>
Specify the advanced parameters if needed. Click the <b>Line Numbering Options</b> item in the <b>Line Numbers</b> drop-down menu. Check the <b>Add line numbering</b> box to apply the line numbering to the document and to access the advanced parameters of the option:
<ul>
<li><b>Start at</b> sets the starting numeric value of the line numbering sequence. The parameter is set to <b>1</b> by default.</li>
<li><b>From text</b> specifies the distance between the line numbers and the text. Enter the required value in cm. The parameter is set to <b>Auto</b> by default.</li>
<li><b>Count by</b> specifies the sequence numbers that are displayed if not counted by 1, i.e. the numbers are counted in a bunch by 2s, 3s, 4s, etc. Enter the required numeric value. The parameter is set to <b>1</b> by default.</li>
<li><b>Restart Each Page</b> - the line numbering sequence will restart on each page of the document.</li>
<li><b>Restart Each Section</b>the line numbering sequence will restart in each section of the document.</li>
<li><b>Continuous</b> - each line of the document will be assigned a sequence number.</li>
<li>The <b>Apply changes to</b> parameter specifies the part of the document you want to assign sequence numbers to. Choose one of the available presets: <b>Current section</b> to apply line numbering to the selected section of the document; <b>This point forward</b> to apply line numbering to the text following the current cursor position; <b>Whole document</b> to apply line numbering to the whole document. The parameter is set to <b>Whole document</b> by default.</li>
<li>Click <b>OK</b> to apply the changes.</li>
</ul>
</li>
</ol>
<h2>Removing line numbering</h2>
<p>To remove the line numbering sequence,</p>
<ol>
<li>open the <b>Layout</b> tab located at the top toolbar and click on the <img alt="Line Numbers icon" src="../images/linenumbers_icon.png" /> <b>Line Numbers</b> icon,</li>
<li>choose the <b>None</b> option in the opened drop-down menu or choose the <b>Line Numbering Options</b> item in the menu and deactivate the <b>Add line numbering box</b> in the opened <b>Line Numbers</b> window.</li>
</ol>
</div>
</body>
</html>

80
apps/documenteditor/main/resources/help/en/UsageInstructions/InsertReferences.htm Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>Insert references</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Mendeley, Zotero and EasyBib plugins for ONLYOFFICE editors, which allow to insert references into documents" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert references</h1>
<p>ONLYOFFICE supports <b>Mendeley</b>, <b>Zotero</b> and <b>EasyBib</b> reference managers to insert references into your document.</p>
<h2 id="Mendeley_block">Mendeley</h2>
<h3>Connect ONLYOFFICE to Mendeley</h3>
<ol>
<li>Login to your <b>Mendeley</b> account.</li>
<li>In your document, switch to the <b>Plugins</b> tab and choose <img alt="Mendeley plugin icon" src="../images/mendeley.png" /> <b>Mendeley</b>, a sidebar will open on the left side of your document.
<li>
Click the <b>Copy Link and Open Form</b> button.<br />
The browser opens a form on the Mendeley site. Complete this form and note the Application ID for ONLYOFFICE.
</li>
<li>Switch back to your document.</li>
<li>Enter the Application ID and click <b>Save</b>.</li>
<li>Click <b>Login</b>.</li>
<li>Click <b>Proceed</b>.</li>
</ol>
<p>Now ONLYOFFICE is connected to your Mendeley account.</p>
<h3>Inserting references</h3>
<ol>
<li>Open the document and place the cursor on the spot where you want to insert the reference(s).</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Mendeley plugin icon" src="../images/mendeley.png" /> <b>Mendeley</b>.</li>
<li>Enter a search text and hit <b>Enter</b> on your keyboard.</li>
<li>Click on or more check-boxes.</li>
<li>[Optional] Enter a new search text and click on one or more check-boxes.</li>
<li>Choose the reference style from the <b>Style</b> pull-down menu.</li>
<li>Click the <b>Insert Bibliography</b> button.</li>
</ol>
<h2 id="Zotero_block">Zotero</h2>
<h3>Connect ONLYOFFICE to Zotero</h3>
<ol>
<li>Login to your <b>Zotero</b> account.</li>
<li>In your document, switch to the <b>Plugins</b> tab and choose <img alt="Zotero plugin icon" src="../images/zotero.png" /> <b>Zotero</b>, a sidebar will open on the left side of your document.</li>
<li>Click the <b>Zotero API settings</b> link.</li>
<li>On the Zotero site, create a new key for Zotero, copy it and save it for later use.</li>
<li>Switch to your document and paste the API key.</li>
<li>Click <b>Save</b>.</li>
</ol>
<p>Now ONLYOFFICE is connected to your Zotero account.</p>
<h3>Inserting references</h3>
<ol>
<li>Open the document and place the cursor on the spot where you want to insert the reference(s).</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Zotero plugin icon" src="../images/zotero.png" /> <b>Zotero</b>.</li>
<li>Enter a search text and hit <b>Enter</b> on your keyboard.</li>
<li>Click on or more check-boxes.</li>
<li>[Optional] Enter a new search text and click on one or more check-boxes.</li>
<li>Choose the reference style from the <b>Style</b> pull-down menu.</li>
<li>Click the <b>Insert Bibliography</b> button.</li>
</ol>
<h2 id="EasyBib_block">EasyBib</h2>
<ol>
<li>Open the document and place the cursor on the spot where you want to insert the reference(s).</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="EasyBib plugin icon" src="../images/easybib.png" /> <b>EasyBib</b>.</li>
<li>Select the type of sourse you want to find.</li>
<li>Enter a search text and hit <b>Enter</b> on your keyboard.</li>
<li>Click '+' on the right side of the suitable Book/Journal article/Website. It will be added to Bibliography.</li>
<li>Select references style.</li>
<li>Click the <b>Add Bibliography to Doc</b> to insert the references.</li>
</ol>
<img class="gif" alt="Easybib plugin gif" src="../images/easybib_plugin.gif" width="600" />
</div>
</body>
</html>

4
apps/documenteditor/main/resources/help/en/UsageInstructions/InsertSymbols.htm
View file

@ -14,12 +14,12 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert symbols and characters</h1>
<p>To insert a special symbol which can not be typed on the keyboard, use the <img alt="Symbol table icon" src="../images/vector.png" /> <b>Insert symbol</b> option and follow these simple steps:</p>
<p>To insert a special symbol which can not be typed on the keyboard, use the <img alt="Symbol table icon" src="../images/insert_symbol_icon.png" /> <b>Insert symbol</b> option and follow these simple steps:</p>
<ul>
<li>place the cursor where a special symbol should be inserted,</li>
<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
<li>
click the <img alt="Symbol table icon" src="../images/vector.png" /> <b>Symbol</b>,
click the <img alt="Symbol table icon" src="../images/insert_symbol_icon.png" /> <b>Symbol</b>,
<p><img alt="Insert symbol sidebar " src="../images/insert_symbol_window.png" /></p>
</li>
<li>The <b>Symbol</b> dialog box will appear, and you will be able to select the required symbol,</li>

5034
apps/documenteditor/main/resources/help/en/UsageInstructions/MathAutoCorrect.htm
View file

File diff suppressed because it is too large Load diff

30
apps/documenteditor/main/resources/help/en/UsageInstructions/OCR.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Extract text from an image</title>
<meta charset="utf-8" />
<meta name="description" content="The description of OCR plugin for ONLYOFFICE editors, which allows to extract text from an image and insert it into documents" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Extract text from an image</h1>
<p>With ONLYOFFICE you can extract text from an image (.png .jpg) and insert it in your document.</p>
<ol>
<li>Open your document and place the cursor on the spot where you want to insert the text.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="OCR plugin icon" src="../images/ocr.png" /> <b>OCR</b> from the menu.</li>
<li>Click <b>Load File</b> and select the image.</li>
<li>Choose the recognition language from the <b>Choose Language</b> pull-down menu.</li>
<li>Click <b>Recognize</b>.</li>
<li>Click <b>Insert text</b>.</li>
</ol>
<p>You should check the inserted text for errors and layout.</p>
<img class="gif" alt="OCR plugin gif" src="../images/ocr_plugin.gif" width="600" />
</div>
</body>
</html>

56
apps/documenteditor/main/resources/help/en/UsageInstructions/PhotoEditor.htm Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Edit an image</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Photo Editor plugin for ONLYOFFICE editors, which allows to edit images" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Edit an image</h1>
<p>ONLYOFFICE comes with a very powerful <b>photo editor</b>, that allows you to adjust the image with filters and make all kinds of annotations.</p>
<ol>
<li>Select an image in your document.</li>
<li>
Switch to the <b>Plugins</b> tab and choose <img alt="Photo Editor plugin icon" src="../images/photoeditor.png" /> <b>Photo Editor</b>.<br />
You are now in the editing environment.
<ul>
<li>Below the image you will find the following checkboxes and slider filters:
<ul>
<li><b>Grayscale</b>, <b>Sepia</b>, <b>Sepia 2</b>, <b>Blur</b>, <b>Emboss</b>, <b>Invert</b>, <b>Sharpen</b>;</li>
<li><b>Remove White</b> (<em>Threshhold</em>, <em>Distance</em>), <b>Gradient transparency</b>, <b>Brightness</b>, <b>Noise</b>, <b>Pixelate</b>, <b>Color Filter</b>;</li>
<li><b>Tint</b>, <b>Multiply</b>, <b>Blend</b>.</li>
</ul>
</li>
<li>
Below the filters you will find buttons for
<ul>
<li><b>Undo</b>, <b>Redo</b> and <b>Resetting</b>;</li>
<li><b>Delete</b>, <b>Delete all</b>;</li>
<li><b>Crop</b> (<em>Custom</em>, <em>Square</em>, <em>3:2</em>, <em>4:3</em>, <em>5:4</em>, <em>7:5</em>, <em>16:9</em>);</li>
<li><b>Flip</b> (<em>Flip X</em>, <em>Flip Y</em>, <em>Reset</em>);</li>
<li><b>Rotate</b> (<em>30 degree</em>, <em>-30 degree</em>,<em>Manual rotation slider</em>);</li>
<li><b>Draw</b> (<em>Free</em>, <em>Straight</em>, <em>Color</em>, <em>Size slider</em>);</li>
<li><b>Shape</b> (<em>Recrangle</em>, <em>Circle</em>, <em>Triangle</em>, <em>Fill</em>, <em>Stroke</em>, <em>Stroke size</em>);</li>
<li><b>Icon</b> (<em>Arrows</em>, <em>Stars</em>, <em>Polygon</em>, <em>Location</em>, <em>Heart</em>, <em>Bubble</em>, <em>Custom icon</em>, <em>Color</em>);</li>
<li><b>Text</b> (<em>Bold</em>, <em>Italic</em>, <em>Underline</em>, <em>Left</em>, <em>Center</em>, <em>Right</em>, <em>Color</em>, <em>Text size</em>);</li>
<li><b>Mask</b>.</li>
</ul>
</li>
</ul>
Feel free to try all of these and remember you can always undo them.<br />
<li>
When finished, click the <b>OK</b> button.
</li>
</ol>
<p>The edited picture is now included in the document.</p>
<img class="gif" alt="Image plugin gif" src="../images/image_plugin.gif" width="600" />
</div>
</body>
</html>

25
apps/documenteditor/main/resources/help/en/UsageInstructions/Speech.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Read the text out loud</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Speech plugin for ONLYOFFICE editors, which allows to read the written text out loud" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Read the text out loud</h1>
<p>ONLYOFFICE has a plugin that can read out the text for you.</p>
<ol>
<li>Select the text to be read out.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Speech plugin icon" src="../images/speech.png" /> <b>Speech</b>.</li>
</ol>
<p>The text will now be read out.</p>
</div>
</body>
</html>

30
apps/documenteditor/main/resources/help/en/UsageInstructions/Thesaurus.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Replace a word by a synonym</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Thesaurus plugin for ONLYOFFICE editors, which helps you find synonyms" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Replace a word by a synonym</h1>
<p>
If you are using the same word multiple times, or a word is just not quite the word you are looking for, ONLYOFFICE let you look up synonyms.
It will show you the antonyms too.
</p>
<ol>
<li>Select the word in your document.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Thesaurus plugin icon" src="../images/thesaurus_icon.png" /> <b>Thesaurus</b>.</li>
<li>The synonyms and antonyms will show up in the left sidebar.</li>
<li>Click a word to replace the word in your document.</li>
</ol>
<img class="gif" alt="Thesaurus plugin gif" src="../images/thesaurus_plugin.gif" width="600" />
</div>
</body>
</html>

38
apps/documenteditor/main/resources/help/en/UsageInstructions/Translator.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Translate text</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Translator plugin for ONLYOFFICE editors, which allows to translate text into different languages" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Translate text</h1>
<p>You can translate your document from and to numerous languages.</p>
<ol>
<li>Select the text that you want to translate.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Translator plugin icon" src="../images/translator.png" /> <b>Translator</b>, the Translator appears in a sidebar on the left.</li>
</ol>
<p>The language of the selected text will be automatically detected and the text will be translated to the default language.</p>
<img class="gif" alt="Translator plugin gif" src="../images/translator_plugin.gif" width="600" />
<h3>Changing the language of your result:</h3>
<ol>
<li>Click the lower drop-down box and choose the preferred language.</li>
</ol>
<p>The translation will change immediately.</p>
<h3>Wrong detection of the source language</h3>
<p>If the automatic detection is not correct, you can overrule it:</p>
<ol>
<li>Click the upper drop-down box and choose the preferred language.</li>
</ol>
</div>
</body>
</html>

29
apps/documenteditor/main/resources/help/en/UsageInstructions/Wordpress.htm Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Upload a document to Wordpress</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Wordpress plugin for ONLYOFFICE editors, which allows to upload documents as Wordpress articles" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Upload a document to Wordpress</h1>
<p>You can write your articles in your ONLYOFFICE environment and upload them as a Wordpress-article.</p>
<h2>Connect to Wordpress</h2>
<ol>
<li>Open your document.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Wordpress plugin icon" src="../images/wordpress.png" /> <b>Wordpress</b>.</li>
<li>Log in into your Wordpress account and choose the website page you want to post your document on.</li>
<li>Enter a title for your article.</li>
<li>Click <b>Publish</b> to publish immediatly or <b>Save as draft</b> to publish later from your WordPress site or app.</li>
</ol>
<img class="gif" alt="Wordpress plugin gif" src="../images/wordpress_plugin.gif" width="600" />
</div>
</body>
</html>

32
apps/documenteditor/main/resources/help/en/UsageInstructions/YouTube.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Include a video</title>
<meta charset="utf-8" />
<meta name="description" content="The description of YouTube plugin for ONLYOFFICE editors, which allows to embed videos into documents" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Include a video</h1>
<p>You can include a video in your document. It will be shown as an image. By double-clicking the image the video dialog opens. Here you can start the video.</p>
<ol>
<li>
Copy the <b>URL</b> of the video you want to include.<br />
(the complete address shown in the address line of your browser)
</li>
<li>Go to your document and place the cursor at the location where you want to include the video.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Youtube plugin icon" src="../images/youtube.png" /> <b>YouTube</b>.</li>
<li>Paste the <b>URL</b> and click <b>OK</b>.</li>
<li>Check if it is the correct video and click the <b>OK</b> button below the video.</li>
</ol>
<p>The video is now included in your document.</p>
<img class="gif" alt="Youtube plugin gif" src="../images/youtube_plugin.gif" width="600" />
</div>
</body>
</html>

10
apps/documenteditor/main/resources/help/en/editor.css
View file

@ -6,6 +6,16 @@ color: #444;
background: #fff;
}
.cross-reference th{
text-align: center;
vertical-align: middle;
}
.cross-reference td{
text-align: center;
vertical-align: middle;
}
img
{
border: none;

BIN
apps/documenteditor/main/resources/help/en/images/addgradientpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 216 B

BIN
apps/documenteditor/main/resources/help/en/images/autoformatasyoutype.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
apps/documenteditor/main/resources/help/en/images/convert_footnotes_endnotes.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
apps/documenteditor/main/resources/help/en/images/easybib.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 455 B

BIN
apps/documenteditor/main/resources/help/en/images/easybib_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 852 KiB

BIN
apps/documenteditor/main/resources/help/en/images/endnotes_settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
apps/documenteditor/main/resources/help/en/images/endnotesadded.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
apps/documenteditor/main/resources/help/en/images/endnotetext.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
apps/documenteditor/main/resources/help/en/images/fill_gradient.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
apps/documenteditor/main/resources/help/en/images/groupup.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
apps/documenteditor/main/resources/help/en/images/highlight.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 482 B

BIN
apps/documenteditor/main/resources/help/en/images/highlight_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
apps/documenteditor/main/resources/help/en/images/image_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
apps/documenteditor/main/resources/help/en/images/insert_symbol_icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 504 B

BIN
apps/documenteditor/main/resources/help/en/images/interface/desktop_inserttab.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
apps/documenteditor/main/resources/help/en/images/interface/desktop_layouttab.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
apps/documenteditor/main/resources/help/en/images/interface/desktop_referencestab.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
apps/documenteditor/main/resources/help/en/images/interface/layouttab.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
apps/documenteditor/main/resources/help/en/images/interface/referencestab.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
apps/documenteditor/main/resources/help/en/images/linenumbers_icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 208 B

BIN
apps/documenteditor/main/resources/help/en/images/mendeley.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 476 B

BIN
apps/documenteditor/main/resources/help/en/images/ocr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 552 B

BIN
apps/documenteditor/main/resources/help/en/images/ocr_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 802 KiB

BIN
apps/documenteditor/main/resources/help/en/images/photoeditor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 468 B

BIN
apps/documenteditor/main/resources/help/en/images/recognizedfunctions.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
apps/documenteditor/main/resources/help/en/images/removegradientpoint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 242 B

BIN
apps/documenteditor/main/resources/help/en/images/replacetext.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
apps/documenteditor/main/resources/help/en/images/speech.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 466 B

BIN
apps/documenteditor/main/resources/help/en/images/spellchecking.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
apps/documenteditor/main/resources/help/en/images/thesaurus_icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 287 B

BIN
apps/documenteditor/main/resources/help/en/images/thesaurus_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 302 KiB

BIN
apps/documenteditor/main/resources/help/en/images/toccustomize.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
apps/documenteditor/main/resources/help/en/images/tocrefreshcontextual.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
apps/documenteditor/main/resources/help/en/images/translator.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 903 B

BIN
apps/documenteditor/main/resources/help/en/images/translator_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 250 KiB

BIN
apps/documenteditor/main/resources/help/en/images/wordpress.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 998 B

BIN
apps/documenteditor/main/resources/help/en/images/wordpress_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 276 KiB

BIN
apps/documenteditor/main/resources/help/en/images/youtube.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 390 B

BIN
apps/documenteditor/main/resources/help/en/images/youtube_plugin.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 518 KiB

BIN
apps/documenteditor/main/resources/help/en/images/zotero.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 215 B

95
apps/documenteditor/main/resources/help/en/search/indexes.js
View file

File diff suppressed because one or more lines are too long

7
apps/presentationeditor/main/resources/help/en/Contents.json
View file

@ -25,14 +25,19 @@
{"src": "UsageInstructions/ManipulateObjects.htm", "name": "Manipulate objects on a slide"},
{"src": "UsageInstructions/AlignArrangeObjects.htm", "name": "Align and arrange objects on a slide"},
{ "src": "UsageInstructions/InsertEquation.htm", "name": "Insert equations", "headername": "Math equations" },
{"src": "UsageInstructions/MathAutoCorrect.htm", "name": "Use Math AutoCorrect" },
{"src": "HelpfulHints/CollaborativeEditing.htm", "name": "Collaborative presentation editing", "headername": "Presentation co-editing" },
{"src": "UsageInstructions/PhotoEditor.htm", "name": "Edit an image", "headername": "Plugins"},
{"src": "UsageInstructions/YouTube.htm", "name": "Include a video" },
{"src": "UsageInstructions/HighlightedCode.htm", "name": "Insert highlighted code" },
{"src": "UsageInstructions/Translator.htm", "name": "Translate text" },
{"src": "UsageInstructions/Thesaurus.htm", "name": "Replace a word by a synonym" },
{"src": "UsageInstructions/ViewPresentationInfo.htm", "name": "View presentation information", "headername": "Tools and settings"},
{"src": "UsageInstructions/SavePrintDownload.htm", "name": "Save/print/download your presentation" },
{"src": "HelpfulHints/AdvancedSettings.htm", "name": "Advanced settings of Presentation Editor"},
{"src": "HelpfulHints/Navigation.htm", "name": "View settings and navigation tools"},
{"src": "HelpfulHints/Search.htm", "name": "Search function"},
{"src": "HelpfulHints/SpellChecking.htm", "name": "Spell-checking"},
{"src": "UsageInstructions/MathAutoCorrect.htm", "name": "AutoCorrect features" },
{"src": "HelpfulHints/About.htm", "name": "About Presentation Editor", "headername": "Helpful hints"},
{"src": "HelpfulHints/SupportedFormats.htm", "name": "Supported formats of electronic presentations"},
{"src": "HelpfulHints/KeyboardShortcuts.htm", "name": "Keyboard shortcuts"}

14
apps/presentationeditor/main/resources/help/en/HelpfulHints/About.htm
View file

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>About Presentation Editor</title>
<title>About the Presentation Editor</title>
<meta charset="utf-8" />
<meta name="description" content="The short description of Presentation Editor" />
<meta name="description" content="The short description of the Presentation Editor" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
@ -13,13 +13,13 @@
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>About Presentation Editor</h1>
<p><b>Presentation Editor</b> is an <span class="onlineDocumentFeatures">online</span> application that lets you look through
<h1>About the Presentation Editor</h1>
<p>The <b>Presentation Editor</b> is an <span class="onlineDocumentFeatures">online</span> application that lets you look through
and edit presentations<span class="onlineDocumentFeatures"> directly in your browser</span>.</p>
<p>Using <b>Presentation Editor</b>, you can perform various editing operations like in any desktop editor,
print the edited presentations keeping all the formatting details or download them onto your computer hard disk drive
<p>Using the <b>Presentation Editor</b>, you can perform various editing operations like in any desktop editor,
print the edited presentations keeping all the formatting details or download them onto the hard disk drive of your computer
as PPTX, PDF, ODP, POTX, PDF/A, OTP files.</p>
<p><span class="onlineDocumentFeatures">To view the current software version and licensor details in the <em>online version</em>, click the <img alt="About icon" src="../images/about.png" /> icon at the left sidebar.</span> <span class="desktopDocumentFeatures"> To view the current software version and licensor details in the <em>desktop version</em>, select the <b>About</b> menu item at the left sidebar of the main program window.</span></p>
<p><span class="onlineDocumentFeatures">To view the current software version and licensor details in the <em>online version</em>, click the <img alt="About icon" src="../images/about.png" /> icon on the left sidebar.</span> <span class="desktopDocumentFeatures"> To view the current software version and licensor details in the <em>desktop version</em>, select the <b>About</b> menu item on the left sidebar of the main program window.</span></p>
</div>
</body>
</html>

22
apps/presentationeditor/main/resources/help/en/HelpfulHints/AdvancedSettings.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Advanced Settings of Presentation Editor</title>
<title>Advanced Settings of the Presentation Editor</title>
<meta charset="utf-8" />
<meta name="description" content="The advanced settings of Presentation Editor" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
@ -13,8 +13,8 @@
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Advanced Settings of Presentation Editor</h1>
<p><b>Presentation Editor</b> lets you change its advanced settings. To access them, open the <b>File</b> tab at the top toolbar and select the <b>Advanced Settings...</b> option. You can also click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon on the right side of the editor header and select the <b>Advanced settings</b> option.</p>
<h1>Advanced Settings of the Presentation Editor</h1>
<p>The <b>Presentation Editor</b> allows you to change its advanced settings. To access them, open the <b>File</b> tab on the top toolbar and select the <b>Advanced Settings...</b> option. You can also click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon on the right side of the editor header and select the <b>Advanced settings</b> option.</p>
<p>The advanced settings are:</p>
<ul>
<li><b>Spell Checking</b> is used to turn on/off the spell checking option.</li>
@ -22,16 +22,16 @@
<li><b>Alternate Input</b> is used to turn on/off hieroglyphs.</li>
<li><b>Alignment Guides</b> is used to turn on/off alignment guides that appear when you move objects and allow you to position them on the slide precisely.</li>
<li><span class="onlineDocumentFeatures"><b>Autosave</b> is used in the <em>online version</em> to turn on/off automatic saving of changes you make while editing.</span> </li>
<li><span class="desktopDocumentFeatures"><b>Autorecover</b> - is used in the <em>desktop version</em> to turn on/off the option that allows to automatically recover documents in case of the unexpected program closing.</span></li>
<li class="onlineDocumentFeatures"><b>Co-editing Mode</b> is used to select the display of the changes made during the co-editing:
<li><span class="desktopDocumentFeatures"><b>Autorecover</b> - is used in the <em>desktop version</em> to turn on/off the option that allows you to automatically recover documents if the program closes unexpectedly.</span></li>
<li class="onlineDocumentFeatures"><b>Co-editing Mode</b> is used to select a way of displaying changes made during co-editing:
<ul>
<li>By default the <b>Fast</b> mode is selected, the users who take part in the document co-editing will see the changes in real time once they are made by other users.</li>
<li>If you prefer not to see other user changes (so that they do not disturb you, or for some other reason), select the <b>Strict</b> mode and all the changes will be shown only after you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon notifying you that there are changes from other users.</li>
<li>By default, the <b>Fast</b> mode is selected, the users who take part in the presentation co-editing, will see the changes in real time once they are made by other users.</li>
<li>If you prefer not to see the changes made by other users (so that they will not disturb you, or for some other reason), select the <b>Strict</b> mode, and all the changes will be shown only after you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon with a notification that there are some changes made by other users.</li>
</ul>
</li>
<li><b>Default Zoom Value</b> is used to set the default zoom value selecting it in the list of available options from 50% to 200%. You can also choose the <b>Fit to Slide</b> or <b>Fit to Width</b> option.</li>
<li>
<b>Font Hinting</b> is used to select the type a font is displayed in Presentation Editor:
<b>Font Hinting</b> is used to select a way fonts are displayed in the Presentation Editor:
<ul>
<li>Choose <b>As Windows</b> if you like the way fonts are usually displayed on Windows, i.e. using Windows font hinting.</li>
<li>Choose <b>As OS X</b> if you like the way fonts are usually displayed on a Mac, i.e. without any font hinting at all.</li>
@ -39,8 +39,8 @@
</ul>
</li>
<li>
<b>Default cache mode</b> - used to select the cache mode for the font characters. It’s not recommended to switch it without any reason. It can be helpful in some cases only, for example, when an issue in the Google Chrome browser with the enabled hardware acceleration occurs.
<p>Presentation Editor has two cache modes:</p>
<b>Default cache mode</b> - used to select the cache mode for the font characters. It’s not recommended to switch it off without any reason. It can be helpful in some cases only, for example, when the Google Chrome browser has problems with the enabled hardware acceleration.
<p>The Presentation Editor has two cache modes:</p>
<ol>
<li>In the <b>first cache mode</b>, each letter is cached as a separate picture.</li>
<li>In the <b>second cache mode</b>, a picture of a certain size is selected where letters are placed dynamically and a mechanism of allocating/removing memory in this picture is also implemented. If there is not enough memory, a second picture is created, etc.</li>
@ -51,7 +51,7 @@
<li>When the <b>Default cache mode</b> setting is disabled, Internet Explorer (v. 9, 10, 11) uses the <b>first cache mode</b>, other browsers use the <b>second cache mode</b>.</li>
</ul>
</li>
<li><b>Unit of Measurement</b> is used to specify what units are used on the rulers and in properties windows for measuring elements parameters such as width, height, spacing, margins etc. You can select the <b>Centimeter</b>, <b>Point</b>, or <b>Inch</b> option.</li>
<li><b>Unit of Measurement</b> is used to specify what units are used on the rulers and in properties windows for measuring elements parameters such as width, height, spacing, margins, etc. You can select the <b>Centimeter</b>, <b>Point</b>, or <b>Inch</b> option.</li>
<li><b>Cut, copy and paste</b> - used to show the <b>Paste Options</b> button when content is pasted. Check the box to enable this feature.</li>
<li>
<b>Macros Settings</b> - used to set macros display with a notification.

38
apps/presentationeditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm
View file

@ -14,12 +14,12 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Collaborative Presentation Editing</h1>
<p><b>Presentation Editor</b> offers you the possibility to work at a presentation collaboratively with other users. This feature includes:</p>
<p>The <b>Presentation Editor</b> offers allows you to collaboratively work on a presentation collaboratively with other users. This feature includes:</p>
<ul>
<li class="onlineDocumentFeatures">simultaneous multi-user access to the edited presentation</li>
<li class="onlineDocumentFeatures">visual indication of objects that are being edited by other users</li>
<li class="onlineDocumentFeatures">real-time changes display or synchronization of changes with one button click</li>
<li class="onlineDocumentFeatures">chat to share ideas concerning particular presentation parts</li>
<li class="onlineDocumentFeatures">real-time display of changes or their synchronization with one button click</li>
<li class="onlineDocumentFeatures">a chat to share ideas concerning particular parts of the presentation</li>
<li>comments containing the description of a task or problem that should be solved (it's also possible to work with comments in the offline mode, without connecting to the <em>online version</em>)</li>
</ul>
<div class="desktopDocumentFeatures">
@ -28,34 +28,34 @@
</div>
<div class="onlineDocumentFeatures">
<h3>Co-editing</h3>
<p><b>Presentation Editor</b> allows to select one of the two available co-editing modes:</p>
<p>The <b>Presentation Editor</b> allows you to select one of the two available co-editing modes:</p>
<ul>
<li><b>Fast</b> is used by default and shows the changes made by other users in real time.</li>
<li><b>Strict</b> is selected to hide other user changes until you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon to save your own changes and accept the changes made by others.</li>
<li><b>Strict</b> is selected to hide other user's changes until you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon to save your own changes and accept the changes made by the others.</li>
</ul>
<p>The mode can be selected in the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>. It's also possible to choose the necessary mode using the <img alt="Co-editing Mode icon" src="../images/coeditingmode.png" /> <b>Co-editing Mode</b> icon at the <b>Collaboration</b> tab of the top toolbar:</p>
<p>The mode can be selected in the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>. It's also possible to choose the necessary mode using the <img alt="Co-editing Mode icon" src="../images/coeditingmode.png" /> <b>Co-editing Mode</b> icon on the <b>Collaboration</b> tab of the top toolbar:</p>
<p><img alt="Co-editing Mode menu" src="../images/coeditingmodemenu.png" /></p>
<p class="note">
<b>Note</b>: when you co-edit a presentation in the <b>Fast</b> mode, the possibility to <b>Redo</b> the last undone operation is not available.
</p>
<p>When a presentation is being edited by several users simultaneously in the <b>Strict</b> mode, the edited objects (autoshapes, text objects, tables, images, charts) are marked with dashed lines of different colors. The object that you are editing is surrounded by the green dashed line. Red dashed lines indicate that objects are being edited by other users. By hovering the mouse cursor over one of the edited passages, the name of the user who is editing it at the moment is displayed. The <b>Fast</b> mode will show the actions and the names of the co-editors once they are editing the text.</p>
<p>The number of users who are working at the current presentation is specified on the right side of the editor header - <img alt="Number of users icon" src="../images/usersnumber.png" />. If you want to see who exactly are editing the file now, you can click this icon or open the <b>Chat</b> panel with the full list of the users.</p>
<p>When no users are viewing or editing the file, the icon in the editor header will look like <img alt="Manage document access rights icon" src="../images/access_rights.png" /> allowing you to manage the users who have access to the file right from the document: invite new users giving them permissions to <em>edit</em>, <em>read</em> or <em>comment</em> the presentation, or <em>deny</em> some users access rights to the file. Click this icon to manage the access to the file; this can be done both when there are no other users who view or co-edit the document at the moment and when there are other users and the icon looks like <img alt="Number of users icon" src="../images/usersnumber.png" />. It's also possible to set access rights using the <img alt="Sharing icon" src="../images/sharingicon.png" /> <b>Sharing</b> icon at the <b>Collaboration</b> tab of the top toolbar.</p>
<p>When a presentation is being edited by several users simultaneously in the <b>Strict</b> mode, the edited objects (autoshapes, text objects, tables, images, charts) are marked with dashed lines of different colors. The object that you are editing is surrounded by the green dashed line. Red dashed lines indicate that objects are being edited by other users. By hovering the mouse cursor over one of the edited passages, the name of the user who is editing it at the moment is displayed. The <b>Fast</b> mode will show the actions and the names of the co-editors when they are editing the text.</p>
<p>The number of users who are working on the current presentation is specified on the right side of the editor header - <img alt="Number of users icon" src="../images/usersnumber.png" />. If you want to see who exactly is editing the file now, you can click this icon or open the <b>Chat</b> panel with the full list of the users.</p>
<p>When no users are viewing or editing the file, the icon in the editor header will look like <img alt="Manage document access rights icon" src="../images/access_rights.png" /> allowing you to manage the users who have access to the file right from the document: invite new users giving them permissions to <em>edit</em>, <em>read</em> or <em>comment</em> the presentation, or <em>deny</em> some users access rights to the file. Click this icon to manage the access to the file; this can be done both when there are no other users who view or co-edit the document at the moment and when there are other users and the icon looks like <img alt="Number of users icon" src="../images/usersnumber.png" />. It's also possible to set access rights using the <img alt="Sharing icon" src="../images/sharingicon.png" /> <b>Sharing</b> icon on the <b>Collaboration</b> tab of the top toolbar.</p>
<p>As soon as one of the users saves his/her changes by clicking the <img alt="Save icon" src="../images/savewhilecoediting.png" /> icon, the others will see a note within the status bar stating that they have updates. To save the changes you made, so that other users can view them, and get the updates saved by your co-editors, click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar. The updates will be highlighted for you to check what exactly has been changed.</p>
<h3>Chat</h3>
<p>You can use this tool to coordinate the co-editing process on-the-fly, for example, to arrange with your collaborators about who is doing what, which paragraph you are going to edit now etc.</p>
<p>The chat messages are stored during one session only. To discuss the document content it is better to use comments which are stored until you decide to delete them.</p>
<p>You can use this tool to coordinate the co-editing process on-the-fly, for example, to distribute tasks with your collaborators.</p>
<p>The chat messages are stored during one session only. To discuss the document content, it is better to use comments which are stored until you decide to delete them.</p>
<p>To access the chat and leave a message for other users,</p>
<ol>
<li>
click the <img alt="Chat icon" src="../images/chaticon.png" /> icon at the left sidebar, or <br />
click the <img alt="Chat icon" src="../images/chaticon.png" /> icon on the left sidebar, or <br />
switch to the <b>Collaboration</b> tab of the top toolbar and click the <img alt="Chat icon" src="../images/chat_toptoolbar.png" /> <b>Chat</b> button,
</li>
<li>enter your text into the corresponding field below,</li>
<li>press the <b>Send</b> button.</li>
</ol>
<p>All the messages left by users will be displayed on the panel on the left. If there are new messages you haven't read yet, the chat icon will look like this - <img alt="Chat icon" src="../images/chaticon_new.png" />.</p>
<p>To close the panel with chat messages, click the <img alt="Chat icon" src="../images/chaticon.png" /> icon at the left sidebar or the <img alt="Chat icon" src="../images/chat_toptoolbar.png" /> <b>Chat</b> button at the top toolbar once again.</p>
<p>To close the panel with chat messages, click the <img alt="Chat icon" src="../images/chaticon.png" /> icon on the left sidebar or the <img alt="Chat icon" src="../images/chat_toptoolbar.png" /> <b>Chat</b> button on the top toolbar once again.</p>
</div>
<h3>Comments</h3>
<p>It's possible to work with comments in the offline mode, without connecting to the <em>online version</em>.</p>
@ -69,23 +69,23 @@
<li>click the <b>Add Comment/Add</b> button.</li>
</ol>
<p>The object you commented will be marked with the <img alt="Commented object icon" src="../images/added_comment_icon.png" /> icon. To view the comment, just click on this icon.</p>
<p>To add a comment to a certain slide, select the slide and use the <img alt="Comment icon" src="../images/comment_toptoolbar.png" /> <b>Comment</b> button at the <b>Insert</b> or <b>Collaboration</b> tab of the top toolbar. The added comment will be displayed in the upper left corner of the slide.</p>
<p>To create a presentation-level comment which is not related to a certain object or slide, click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon at the left sidebar to open the <b>Comments</b> panel and use the <b>Add Comment to Document</b> link. The presentation-level comments can be viewed at the <b>Comments</b> panel. Comments related to objects and slides are also available here.</p>
<p>To add a comment to a certain slide, select the slide and use the <img alt="Comment icon" src="../images/comment_toptoolbar.png" /> <b>Comment</b> button on the <b>Insert</b> or <b>Collaboration</b> tab of the top toolbar. The added comment will be displayed in the upper left corner of the slide.</p>
<p>To create a presentation-level comment which is not related to a certain object or slide, click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon on the left sidebar to open the <b>Comments</b> panel and use the <b>Add Comment to Document</b> link. The presentation-level comments can be viewed on the <b>Comments</b> panel. Comments related to objects and slides are also available here.</p>
<p>Any other user can answer to the added comment asking questions or reporting on the work he/she has done. For this purpose, click the <b>Add Reply</b> link situated under the comment, type in your reply text in the entry field and press the <b>Reply</b> button.</p>
<p>If you are using the <b>Strict</b> co-editing mode, new comments added by other users will become visible only after you click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar.</p>
<p>You can manage the added comments using the icons in the comment balloon or at the <b>Comments</b> panel on the left:</p>
<p>You can manage the added comments using the icons in the comment balloon or on the <b>Comments</b> panel on the left:</p>
<ul>
<li>edit the currently selected by clicking the <img alt="Edit icon" src="../images/editcommenticon.png" /> icon,</li>
<li>delete the currently selected by clicking the <img alt="Delete icon" src="../images/deletecommenticon.png" /> icon,</li>
<li>close the currently selected discussion by clicking the <img alt="Resolve icon" src="../images/resolveicon.png" /> icon if the task or problem you stated in your comment was solved, after that the discussion you opened with your comment gets the resolved status. To open it again, click the <img alt="Open again icon" src="../images/resolvedicon.png" /> icon.</li>
</ul>
<h4>Adding mentions</h4>
<p>When entering comments, you can use the <b>mentions</b> feature that allows to attract somebody's attention to the comment and send a notification to the mentioned user via email and <b>Talk</b>.</p>
<p>When entering comments, you can use the <b>mentions</b> feature that allows you to attract somebody's attention to the comment and send a notification to the mentioned user via email and <b>Talk</b>.</p>
<p>To add a mention enter the "+" or "@" sign anywhere in the comment text - a list of the portal users will open. To simplify the search process, you can start typing a name in the comment field - the user list will change as you type. Select the necessary person from the list. If the file has not yet been shared with the mentioned user, the <b>Sharing Settings</b> window will open. <b>Read only</b> access type is selected by default. Change it if necessary and click <b>OK</b>.</p>
<p>The mentioned user will receive an email notification that he/she has been mentioned in a comment. If the file has been shared, the user will also receive a corresponding notification.</p>
<p>To remove comments,</p>
<ol>
<li>click the <img alt="Remove comment icon" src="../images/removecomment_toptoolbar.png" /> <b>Remove</b> button at the <b>Collaboration</b> tab of the top toolbar,</li>
<li>click the <img alt="Remove comment icon" src="../images/removecomment_toptoolbar.png" /> <b>Remove</b> button on the <b>Collaboration</b> tab of the top toolbar,</li>
<li>
select the necessary option from the menu:
<ul>
@ -95,7 +95,7 @@
</ul>
</li>
</ol>
<p>To close the panel with comments, click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon at the left sidebar once again.</p>
<p>To close the panel with comments, click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon on the left sidebar once again.</p>
</div>
</body>
</html>

30
apps/presentationeditor/main/resources/help/en/HelpfulHints/KeyboardShortcuts.htm
View file

@ -28,7 +28,7 @@
<td>Open 'File' panel</td>
<td><kbd>Alt</kbd>+<kbd>F</kbd></td>
<td><kbd>⌥ Option</kbd>+<kbd>F</kbd></td>
<td>Open the <b>File</b> panel to save, download, print the current presentation, view its info, create a new presentation or open an existing one, access Presentation Editor help or advanced settings.</td>
<td>Open the <b>File</b> panel to save, download, print the current presentation, view its info, create a new presentation or open an existing one, access the Presentation Editor help or advanced settings.</td>
</tr>
<tr>
<td>Open 'Search' dialog box</td>
@ -58,7 +58,7 @@
<td>Save presentation</td>
<td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
<td><kbd>^ Ctrl</kbd>+<kbd>S</kbd>,<br /><kbd>&#8984; Cmd</kbd>+<kbd>S</kbd></td>
<td>Save all the changes to the presentation currently edited with Presentation Editor. The active file will be saved with its current file name, location, and file format.</td>
<td>Save all the changes to the presentation currently edited with the Presentation Editor. The active file will be saved under its current name, in the same location and file format.</td>
</tr>
<tr>
<td>Print presentation</td>
@ -70,25 +70,25 @@
<td>Download As...</td>
<td><kbd>Ctrl</kbd>+<kbd>⇧ Shift</kbd>+<kbd>S</kbd></td>
<td><kbd>^ Ctrl</kbd>+<kbd>⇧ Shift</kbd>+<kbd>S</kbd>,<br /><kbd>&#8984; Cmd</kbd>+<kbd>⇧ Shift</kbd>+<kbd>S</kbd></td>
<td>Open the <b>Download as...</b> panel to save the currently edited presentation to the computer hard disk drive in one of the supported formats: PPTX, PDF, ODP, POTX, PDF/A, OTP.</td>
<td>Open the <b>Download as...</b> panel to save the currently edited presentation to the hard disk drive of your computer in one of the supported formats: PPTX, PDF, ODP, POTX, PDF/A, OTP.</td>
</tr>
<tr>
<td>Full screen</td>
<td><kbd>F11</kbd></td>
<td></td>
<td>Switch to the full screen view to fit Presentation Editor into your screen.</td>
<td>Switch to the full screen view to fit the Presentation Editor into your screen.</td>
</tr>
<tr>
<td>Help menu</td>
<td><kbd>F1</kbd></td>
<td><kbd>F1</kbd></td>
<td>Open Presentation Editor <b>Help</b> menu.</td>
<td>Open the Presentation Editor <b>Help</b> menu.</td>
</tr>
<tr>
<td>Open existing file (Desktop Editors)</td>
<td><kbd>Ctrl</kbd>+<kbd>O</kbd></td>
<td></td>
<td>On the <b>Open local file</b> tab in <b>Desktop Editors</b>, opens the standard dialog box that allows to select an existing file.</td>
<td>On the <b>Open local file</b> tab in <b>Desktop Editors</b>, opens the standard dialog box that allows selecting an existing file.</td>
</tr>
<tr>
<td>Close file (Desktop Editors)</td>
@ -451,37 +451,37 @@
<td>Bold</td>
<td><kbd>Ctrl</kbd>+<kbd>B</kbd></td>
<td><kbd>^ Ctrl</kbd>+<kbd>B</kbd>,<br /><kbd>&#8984; Cmd</kbd>+<kbd>B</kbd></td>
<td>Make the font of the selected text fragment bold giving it more weight.</td>
<td>Make the font of the selected text fragment bold giving it a heavier appearance.</td>
</tr>
<tr>
<td>Italic</td>
<td><kbd>Ctrl</kbd>+<kbd>I</kbd></td>
<td><kbd>^ Ctrl</kbd>+<kbd>I</kbd>,<br /><kbd>&#8984; Cmd</kbd>+<kbd>I</kbd></td>
<td>Make the font of the selected text fragment italicized giving it some right side tilt.</td>
<td>Make the font of the selected text fragment slightly slanted to the right.</td>
</tr>
<tr>
<td>Underline</td>
<td><kbd>Ctrl</kbd>+<kbd>U</kbd></td>
<td><kbd>^ Ctrl</kbd>+<kbd>U</kbd>,<br /><kbd>&#8984; Cmd</kbd>+<kbd>U</kbd></td>
<td>Make the selected text fragment underlined with the line going under the letters.</td>
<td>Make the selected text fragment underlined with a line going under the letters.</td>
</tr>
<tr>
<td>Strikeout</td>
<td><kbd>Ctrl</kbd>+<kbd>5</kbd></td>
<td><kbd>^ Ctrl</kbd>+<kbd>5</kbd>,<br /><kbd>&#8984; Cmd</kbd>+<kbd>5</kbd></td>
<td>Make the selected text fragment struck out with the line going through the letters.</td>
<td>Make the selected text fragment struck out with a line going through the letters.</td>
</tr>
<tr>
<td>Subscript</td>
<td><kbd>Ctrl</kbd>+<kbd>⇧ Shift</kbd>+<kbd>&gt;</kbd></kbd></td>
<td><kbd>&#8984; Cmd</kbd>+<kbd>⇧ Shift</kbd>+<kbd>&gt;</kbd></kbd></td>
<td>Make the selected text fragment smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</td>
<td>Make the selected text fragment smaller placing it to the lower part of the text line, e.g. as in chemical formulas.</td>
</tr>
<tr>
<td>Superscript</td>
<td><kbd>Ctrl</kbd>+<kbd>⇧ Shift</kbd>+<kbd>&lt;</kbd></kbd></td>
<td><kbd>&#8984; Cmd</kbd>+<kbd>⇧ Shift</kbd>+<kbd>&lt;</kbd></kbd></td>
<td>Make the selected text fragment smaller and place it to the upper part of the text line, e.g. as in fractions.</td>
<td>Make the selected text fragment smaller placing it to the upper part of the text line, e.g. as in fractions.</td>
</tr>
<tr>
<td>Bulleted list</td>
@ -517,19 +517,19 @@
<td>Align justified</td>
<td><kbd>Ctrl</kbd>+<kbd>J</kbd></td>
<td></td>
<td>Justify the text in the paragraph adding additional space between words so that the left and the right text edges were aligned with the paragraph margins.</td>
<td>Justify the text in the paragraph adding additional space between words so that the left and the right text edges will be aligned with the paragraph margins.</td>
</tr>
<tr>
<td>Align right</td>
<td><kbd>Ctrl</kbd>+<kbd>R</kbd></td>
<td></td>
<td>Align right with the text lined up by the right side of the text box, the left side remains unaligned.</td>
<td>Align right with the text lined up on the right side of the text box, the left side remains unaligned.</td>
</tr>
<tr>
<td>Align left</td>
<td><kbd>Ctrl</kbd>+<kbd>L</kbd></td>
<td></td>
<td>Align left with the text lined up by the left side of the text box, the right side remains unaligned.</td>
<td>Align left with the text lined up on the left side of the text box, the right side remains unaligned.</td>
</tr>
<tr>
<td>Increase left indent</td>

6
apps/presentationeditor/main/resources/help/en/HelpfulHints/Navigation.htm
View file

@ -14,7 +14,7 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>View Settings and Navigation Tools</h1>
<p><b>Presentation Editor</b> offers several tools to help you view and navigate through your presentation: zoom, previous/next slide buttons, slide number indicator.</p>
<p>The <b>Presentation Editor</b> offers several tools to help you view and navigate through your presentation: zoom, previous/next slide buttons and slide number indicator.</p>
<h3>Adjust the View Settings</h3>
<p>To adjust default view settings and set the most convenient mode to work with the presentation, click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon on the right side of the editor header and select which interface elements you want to be hidden or shown.
You can select the following options from the <b>View settings</b> drop-down list:
@ -23,8 +23,8 @@
<li><b>Hide Toolbar</b> - hides the top toolbar that contains commands while tabs remain visible. When this option is enabled, you can click any tab to display the toolbar. The toolbar is displayed until you click anywhere outside it. To disable this mode, click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon and click the <b>Hide Toolbar</b> option once again. The top toolbar will be displayed all the time.
<p class="note"><b>Note</b>: alternatively, you can just double-click any tab to hide the top toolbar or display it again.</p>
</li>
<li><b>Hide Status Bar</b> - hides the bottommost bar where the <b>Slide Number Indicator</b> and <b>Zoom</b> buttons are situated. To show the hidden <b>Status Bar</b> click this option once again.</li>
<li><b>Hide Rulers</b> - hides rulers which are used to set up tab stops and paragraph indents within the text boxes. To show the hidden <b>Rulers</b> click this option once again.</li>
<li><b>Hide Status Bar</b> - hides the bottommost bar where the <b>Slide Number Indicator</b> and <b>Zoom</b> buttons are situated. To show the hidden <b>Status Bar</b>, click this option once again.</li>
<li><b>Hide Rulers</b> - hides rulers which are used to set up tab stops and paragraph indents within the text boxes. To show the hidden <b>Rulers</b>, click this option once again.</li>
</ul>
<p>The right sidebar is minimized by default. To expand it, select any object/slide and click the icon of the currently activated tab on the right. To minimize the right sidebar, click the icon once again. The left sidebar width is adjusted by simple drag-and-drop:
move the mouse cursor over the left sidebar border so that it turns into the bidirectional arrow and drag the border to the left to reduce the sidebar width or to the right to extend it.</p>

4
apps/presentationeditor/main/resources/help/en/HelpfulHints/Search.htm
View file

@ -15,7 +15,7 @@
</div>
<h1>Search and Replace Function</h1>
<p><b>To search</b> for the needed characters, words or phrases used in the currently edited presentation,
click the <img alt="Search icon" src="../images/searchicon.png" /> icon situated at the left sidebar or use the <em>Ctrl+F</em> key combination.</p>
click the <img alt="Search icon" src="../images/searchicon.png" /> icon situated on the left sidebar or use the <em>Ctrl+F</em> key combination.</p>
<p>The <b>Find and Replace</b> window will open:</p>
<img alt="Find and Replace Window" src="../images/search_window.png" />
<ol>
@ -33,7 +33,7 @@
</li>
</ol>
<p>The first slide in the selected direction that contains the characters you entered will be highlighted in the slide list and displayed in the working area with the required characters outlined. If it is not the slide you are looking for, click the selected button again to find the next slide containing the characters you entered.</p>
<p><b>To replace</b> one or more occurrences of the found characters click the <b>Replace</b> link below the data entry field or use the <em>Ctrl+H</em> key combination. The <b>Find and Replace</b> window will change:</p>
<p><b>To replace</b> one or more occurrences of the found characters, click the <b>Replace</b> link below the data entry field or use the <em>Ctrl+H</em> key combination. The <b>Find and Replace</b> window will change:</p>
<p><img alt="Find and Replace Window" src="../images/search_replace_window.png" /></p>
<ol>
<li>Type in the replacement text into the bottom data entry field.</li>

10
apps/presentationeditor/main/resources/help/en/HelpfulHints/SpellChecking.htm
View file

@ -14,16 +14,16 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Spell-checking</h1>
<p><b>Presentation Editor</b> allows you to check the spelling of your text in a certain language and correct mistakes while editing. In the <em>desktop version</em>, it's also possible to add words into a custom dictionary which is common for all three editors.</p>
<p>First of all, <b>choose a language</b> for your presentation. Click the <img alt="Set presentation language icon" src="../images/document_language.png" /> icon on the right side of the status bar. In the window that appears, select the necessary language and click <b>OK</b>. The selected language will be applied to the whole presentation. </p>
<p>The <b>Presentation Editor</b> allows you to check the spelling of your text in a certain language and correct mistakes while editing. In the <em>desktop version</em>, it's also possible to add words into a custom dictionary which is common for all three editors.</p>
<p>First of all, <b>choose a language</b> for your presentation. Click the <img alt="Set presentation language icon" src="../images/document_language.png" /> icon on the right side of the status bar. In the opened window, select the necessary language and click <b>OK</b>. The selected language will be applied to the whole presentation. </p>
<p><img alt="Set presentation language window" src="../images/document_language_window.png" /></p>
<p>To <b>choose a different language</b> for any piece of text within the presentation, select the necessary text passage with the mouse and use the <img alt="Spell-checking - Text Language selector" src="../images/spellchecking_language.png" /> menu at the status bar.</p>
<p>To <b>choose a different language</b> for any piece of text within the presentation, select the necessary text passage with the mouse and use the <img alt="Spell-checking - Text Language selector" src="../images/spellchecking_language.png" /> menu on the status bar.</p>
<p>To <b>enable</b> the spell checking option, you can:</p>
<ul>
<li>click the <img alt="Spell Checking deactivated icon" src="../images/spellcheckdeactivated.png" /> <b>Spell checking</b> icon at the status bar, or</li>
<li>open the <b>File</b> tab of the top toolbar, select the <b>Advanced Settings...</b> option, check the <b>Turn on spell checking option</b> box and click the <b>Apply</b> button.</li>
</ul>
<p>Incorrectly spelled words will be underlined by a red line.</p>
<p>Incorrectly spelled words will be underlined with a red line.</p>
<p>Right click on the necessary word to activate the menu and:</p>
<ul>
<li>choose one of the suggested similar words spelled correctly to replace the misspelled word with the suggested one. If too many variants are found, the <b>More variants...</b> option appears in the menu;</li>
@ -34,7 +34,7 @@
<p><img alt="Spell-checking" src="../images/spellchecking_presentation.png" /></p>
<p>To <b>disable</b> the spell checking option, you can:</p>
<ul>
<li>click the <img alt="Spell Checking activated icon" src="../images/spellcheckactivated.png" /> <b>Spell checking</b> icon at the status bar, or</li>
<li>click the <img alt="Spell Checking activated icon" src="../images/spellcheckactivated.png" /> <b>Spell checking</b> icon on the status bar, or</li>
<li>open the <b>File</b> tab of the top toolbar, select the <b>Advanced Settings...</b> option, uncheck the <b>Turn on spell checking option</b> box and click the <b>Apply</b> button.</li>
</ul>
</div>

14
apps/presentationeditor/main/resources/help/en/HelpfulHints/SupportedFormats.htm
View file

@ -14,8 +14,8 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Supported Formats of Electronic Presentation</h1>
<p>Presentation is a set of slides that may include different type of content such as images, media files, text, effects etc.
<b>Presentation Editor</b> handles the following presentation formats:</p>
<p>A presentation is a set of slides that may include different types of content such as images, media files, text, effects, etc.
The <b>Presentation Editor</b> handles the following presentation formats:</p>
<table>
<tr>
<td><b>Formats</b></td>
@ -40,35 +40,35 @@
</tr>
<tr>
<td>POTX</td>
<td>PowerPoint Open XML Document Template<br />Zipped, XML-based file format developed by Microsoft for presentation templates. A POTX template contains formatting settings, styles etc. and can be used to create multiple presentations with the same formatting</td>
<td>PowerPoint Open XML Document Template<br />Zipped, XML-based file format developed by Microsoft for presentation templates. A POTX template contains formatting settings, styles, etc. and can be used to create multiple presentations with the same formatting</td>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
<tr>
<td>ODP</td>
<td>OpenDocument Presentation<br />File format that represents presentation document created by Impress application, which is a part of OpenOffice based office suites</td>
<td>OpenDocument Presentation<br />File format that represents presentations created by Impress application, which is a part of OpenOffice based office suites</td>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
<tr>
<td>OTP</td>
<td>OpenDocument Presentation Template<br />OpenDocument file format for presentation templates. An OTP template contains formatting settings, styles etc. and can be used to create multiple presentations with the same formatting</td>
<td>OpenDocument Presentation Template<br />OpenDocument file format for presentation templates. An OTP template contains formatting settings, styles, etc. and can be used to create multiple presentations with the same formatting</td>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
<tr>
<td>PDF</td>
<td>Portable Document Format<br />File format used to represent documents in a manner independent of application software, hardware, and operating systems</td>
<td>Portable Document Format<br />File format used to represent documents regardless of application software, hardware, and operating systems used.</td>
<td></td>
<td></td>
<td>+</td>
</tr>
<tr>
<td>PDF/A</td>
<td>Portable Document Format / A<br />An ISO-standardized version of the Portable Document Format (PDF) specialized for use in the archiving and long-term preservation of electronic documents. </td>
<td>Portable Document Format / A<br />An ISO-standardized version of the Portable Document Format (PDF) designed for archivation and long-term preservation of electronic documents.</td>
<td></td>
<td></td>
<td>+</td>

10
apps/presentationeditor/main/resources/help/en/ProgramInterface/CollaborationTab.htm
View file

@ -14,20 +14,20 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Collaboration tab</h1>
<p>The <b>Collaboration</b> tab allows to organize collaborative work on the presentation. <span class="onlineDocumentFeatures">In the <em>online version</em>, you can share the file, select a co-editing mode, manage comments. In the commenting mode, you can add and remove comments and use chat.</span> <span class="desktopDocumentFeatures">In the <em>desktop version</em>, you can manage comments.</span></p>
<p>The <b>Collaboration</b> tab allows collaborating on presentations. <span class="onlineDocumentFeatures">In the <em>online version</em>, you can share a file, select a co-editing mode and manage comments. In the commenting mode, you can add and remove comments and use the chat.</span> <span class="desktopDocumentFeatures">In the <em>desktop version</em>, you can only manage comments.</span></p>
<div class="onlineDocumentFeatures">
<p>Online Presentation Editor window:</p>
<p>The corresponding window of the Online Presentation Editor:</p>
<p><img alt="Collaboration tab" src="../images/interface/collaborationtab.png" /></p>
</div>
<div class="desktopDocumentFeatures">
<p>Desktop Presentation Editor window:</p>
<p>The corresponding window of the Desktop Presentation Editor:</p>
<p><img alt="Collaboration tab" src="../images/interface/desktop_collaborationtab.png" /></p>
</div>
<p>Using this tab, you can:</p>
<ul>
<li class="onlineDocumentFeatures">specify <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">sharing settings</a> (available in the <em>online version</em> only),</li>
<li class="onlineDocumentFeatures">specify the <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">sharing settings</a> (available in the <em>online version</em> only),</li>
<li class="onlineDocumentFeatures">switch between the <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">Strict and Fast</a> co-editing modes (available in the <em>online version</em> only),</li>
<li>add or remove <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">comments</a> to the presentation,</li>
<li>add <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">comments</a> to your presentation and remove them,</li>
<li class="onlineDocumentFeatures">open the <a href="../HelpfulHints/CollaborativeEditing.htm#chat" onclick="onhyperlinkclick(this)">Chat</a> panel (available in the <em>online version</em> only).</li>
</ul>
</div>

14
apps/presentationeditor/main/resources/help/en/ProgramInterface/FileTab.htm
View file

@ -14,27 +14,27 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>File tab</h1>
<p>The <b>File</b> tab allows to perform some basic operations on the current file.</p>
<p>The <b>File</b> tab allows performing some basic file operations.</p>
<div class="onlineDocumentFeatures">
<p>Online Presentation Editor window:</p>
<p>The corresponding window of the Online Presentation Editor:</p>
<p><img alt="File tab" src="../images/interface/filetab.png" /></p>
</div>
<div class="desktopDocumentFeatures">
<p>Desktop Presentation Editor window:</p>
<p>The corresponding window of the Desktop Presentation Editor:</p>
<p><img alt="File tab" src="../images/interface/desktop_filetab.png" /></p>
</div>
<p>Using this tab, you can:</p>
<ul>
<li>
<span class="onlineDocumentFeatures">in the <em>online version</em>, <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">save</a> the current file (in case the <b>Autosave</b> option is disabled), <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">download as</a> (save the document in the selected format to the computer hard disk drive), <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">save copy as</a> (save a copy of the document in the selected format to the portal documents), <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">print</a> or <a href="../UsageInstructions/ViewDocInfo.htm" onclick="onhyperlinkclick(this)">rename</a> it,</span>
<span class="desktopDocumentFeatures">in the <em>desktop version</em>, <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">save</a> the current file keeping the current format and location using the <b>Save</b> option or save the current file with a different name, location or format using the <b>Save as</b> option, <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">print</a> the file.</span>
<span class="onlineDocumentFeatures">in the <em>online version</em>, <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">save</a> the current file (in case the <b>Autosave</b> option is disabled), <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">download as</a> (save the document in the selected format to the hard disk drive of your computer), <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">save copy as</a> (save a copy of the document in the selected format to the portal documents), <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">print</a> or <a href="../UsageInstructions/ViewDocInfo.htm" onclick="onhyperlinkclick(this)">rename</a> it,</span>
<span class="desktopDocumentFeatures">in the <em>desktop version</em>, <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">save</a> the current file keeping the current format and location using the <b>Save</b> option or save the current file under a different name and change its location or format using the <b>Save as</b> option, <a href="../UsageInstructions/SavePrintDownload.htm" onclick="onhyperlinkclick(this)">print</a> the file.</span>
</li>
<li class="desktopDocumentFeatures">protect the file using a password, change or remove the password (available in the <em>desktop version</em> only);</li>
<li class="onlineDocumentFeatures"><a href="../UsageInstructions/OpenCreateNew.htm" onclick="onhyperlinkclick(this)">create</a> a new presentation or open a recently edited one (available in the <em>online version</em> only),</li>
<li>view <a href="../UsageInstructions/ViewPresentationInfo.htm" onclick="onhyperlinkclick(this)">general information</a> about the presentation or change some file properties,</li>
<li class="onlineDocumentFeatures">manage <a href="../UsageInstructions/ViewPresentationInfo.htm" onclick="onhyperlinkclick(this)">access rights</a> (available in the <em>online version</em> only),</li>
<li>access the editor <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>,</li>
<li><span class="desktopDocumentFeatures">in the <em>desktop version</em>, open the folder where the file is stored in the <b>File explorer</b> window.</span><span class="onlineDocumentFeatures"> In the <em>online version</em>, open the folder of the <b>Documents</b> module where the file is stored in a new browser tab.</span></li>
<li>access the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> of the editor,</li>
<li><span class="desktopDocumentFeatures">in the <em>desktop version</em>, open the folder, where the file is stored, in the <b>File Explorer</b> window.</span><span class="onlineDocumentFeatures"> In the <em>online version</em>, open the folder of the <b>Documents</b> module, where the file is stored, in a new browser tab.</span></li>
</ul>
</div>
</body>

8
apps/presentationeditor/main/resources/help/en/ProgramInterface/HomeTab.htm
View file

@ -14,18 +14,18 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Home tab</h1>
<p>The <b>Home</b> tab opens by default when you open a presentation. It allows to set general slide parameters, format text, insert some objects, align and arrange them.</p>
<p>The <b>Home</b> tab opens by default when you open a presentation. It allows you to set general slide parameters, format text, insert some objects, align and arrange them.</p>
<div class="onlineDocumentFeatures">
<p>Online Presentation Editor window:</p>
<p>The corresponding window of the Online Presentation Editor:</p>
<p><img alt="Home tab" src="../images/interface/hometab.png" /></p>
</div>
<div class="desktopDocumentFeatures">
<p>Desktop Presentation Editor window:</p>
<p>The corresponding window of the Desktop Presentation Editor:</p>
<p><img alt="Home tab" src="../images/interface/desktop_hometab.png" /></p>
</div>
<p>Using this tab, you can:</p>
<ul>
<li>manage <a href="../UsageInstructions/ManageSlides.htm" onclick="onhyperlinkclick(this)">slides</a> and <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">start slideshow</a>,</li>
<li>manage <a href="../UsageInstructions/ManageSlides.htm" onclick="onhyperlinkclick(this)">slides</a> and <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">start a slideshow</a>,</li>
<li>format <a href="../UsageInstructions/InsertText.htm#formattext" onclick="onhyperlinkclick(this)">text</a> within a text box,</li>
<li>insert <a href="../UsageInstructions/InsertText.htm" onclick="onhyperlinkclick(this)">text boxes</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">pictures</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>,</li>
<li><a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">align and arrange objects</a> on a slide,</li>

6
apps/presentationeditor/main/resources/help/en/ProgramInterface/InsertTab.htm
View file

@ -14,13 +14,13 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert tab</h1>
<p>The <b>Insert</b> tab allows to add visual objects and comments into your presentation.</p>
<p>The <b>Insert</b> tab allows adding visual objects and comments to your presentation.</p>
<div class="onlineDocumentFeatures">
<p>Online Presentation Editor window:</p>
<p>The corresponding window of the Online Presentation Editor:</p>
<p><img alt="Insert tab" src="../images/interface/inserttab.png" /></p>
</div>
<div class="desktopDocumentFeatures">
<p>Desktop Presentation Editor window:</p>
<p>The corresponding window of the Desktop Presentation Editor:</p>
<p><img alt="Insert tab" src="../images/interface/desktop_inserttab.png" /></p>
</div>
<p>Using this tab, you can:</p>

28
apps/presentationeditor/main/resources/help/en/ProgramInterface/PluginsTab.htm
View file

@ -14,33 +14,33 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Plugins tab</h1>
<p>The <b>Plugins</b> tab allows to access advanced editing features using available third-party components. Here you can also use macros to simplify routine operations.</p>
<p>The <b>Plugins</b> tab makes it possible to access the advanced editing features using the available third-party components. Here you can also use macros to simplify routine operations.</p>
<div class="onlineDocumentFeatures">
<p>Online Presentation Editor window:</p>
<p>The corresponding window of the Online Presentation Editor:</p>
<p><img alt="Plugins tab" src="../images/interface/pluginstab.png" /></p>
</div>
<div class="desktopDocumentFeatures">
<p>Desktop Presentation Editor window:</p>
<p>The corresponding window of the Desktop Presentation Editor:</p>
<p><img alt="Plugins tab" src="../images/interface/desktop_pluginstab.png" /></p>
</div>
<p class="desktopDocumentFeatures">The <b>Settings</b> button allows to open the window where you can view and manage all installed plugins and add your own ones.</p>
<p>The <b>Macros</b> button allows to open the window where you can create your own macros and run them. To learn more about macros you can refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/macros" onclick="onhyperlinkclick(this)">API Documentation</a>.</p>
<p class="desktopDocumentFeatures">The <b>Settings</b> button allows you to open the window where you can view and manage all installed plugins and add your own ones.</p>
<p>The <b>Macros</b> button allows to open the window where you can create your own macros and run them. To learn more about macros, please refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/macros" onclick="onhyperlinkclick(this)">API Documentation</a>.</p>
<p>Currently, the following plugins are available:</p>
<ul>
<li class="desktopDocumentFeatures"><b>Send</b> allows to send the presentation via email using the default desktop mail client (available in the <em>desktop version</em> only),</li>
<li class="desktopDocumentFeatures"><b>Audio</b> allows to insert audio records stored on the hard disk drive into your presentation (available in the <em>desktop version</em> only, not available for Mac OS),</li>
<li class="desktopDocumentFeatures"><b>Video</b> allows to insert video records stored on the hard disk drive into your presentation (available in the <em>desktop version</em> only, not available for Mac OS),
<li class="desktopDocumentFeatures"><b>Send</b> allows sending the presentation via email using the default desktop mail client (available in the <em>desktop version</em> only),</li>
<li class="desktopDocumentFeatures"><b>Audio</b> allows inserting audio records stored on the hard disk drive of your computer into your presentation (available in the <em>desktop version</em> only, not available for Mac OS),</li>
<li class="desktopDocumentFeatures"><b>Video</b> allows inserting video records stored on the hard disk drive of your computer into your presentation (available in the <em>desktop version</em> only, not available for Mac OS),
<p class="note">
<b>Note</b>: to be able to playback video, you'll need to install codecs, for example, <b>K-Lite</b>.
</p>
</li>
<li><b>Highlight code</b> allows to highlight syntax of the code selecting the necessary language, style, background color,</li>
<li><b>PhotoEditor</b> allows to edit images: crop, flip, rotate them, draw lines and shapes, add icons and text, load a mask and apply filters such as Grayscale, Invert, Sepia, Blur, Sharpen, Emboss, etc.,</li>
<li><b>Thesaurus</b> allows to search for synonyms and antonyms of a word and replace it with the selected one,</li>
<li><b>Translator</b> allows to translate the selected text into other languages,</li>
<li><b>YouTube</b> allows to embed YouTube videos into your presentation.</li>
<li><a href="../UsageInstructions/HighlightedCode.htm" onclick="onhyperlinkclick(this)">Highlight code</a> allows highlighting the code syntax by selecting the necessary language, style, background color, etc.,</li>
<li><a href="../UsageInstructions/PhotoEditor.htm" onclick="onhyperlinkclick(this)">Photo Editor</a> allows editing images: cropping, flipping, rotating, drawing lines and shapes, adding icons and text, loading a mask and applying filters such as Grayscale, Invert, Sepia, Blur, Sharpen, Emboss, etc.,</li>
<li><a href="../UsageInstructions/Thesaurus.htm" onclick="onhyperlinkclick(this)">Thesaurus</a> allows finding synonyms and antonyms for the selected word and replacing it with the chosen one,</li>
<li><a href="../UsageInstructions/Translator.htm" onclick="onhyperlinkclick(this)">Translator</a> allows translating the selected text into other languages,</li>
<li><a href="../UsageInstructions/YouTube.htm" onclick="onhyperlinkclick(this)">YouTube</a> allows embedding YouTube videos into your presentation.</li>
</ul>
<p>To learn more about plugins please refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/basic" onclick="onhyperlinkclick(this)">API Documentation</a>. All the currently existing open source plugin examples are available on <a target="_blank" href="https://github.com/ONLYOFFICE/sdkjs-plugins" onclick="onhyperlinkclick(this)">GitHub</a>.</p>
<p>To learn more about plugins, please refer to our <a target="_blank" href="https://api.onlyoffice.com/plugin/basic" onclick="onhyperlinkclick(this)">API Documentation</a>. All the currently existing open source plugin examples are available on <a target="_blank" href="https://github.com/ONLYOFFICE/sdkjs-plugins" onclick="onhyperlinkclick(this)">GitHub</a>.</p>
</div>
</body>
</html>

50
apps/presentationeditor/main/resources/help/en/ProgramInterface/ProgramInterface.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Introducing the Presentation Editor user interface</title>
<title>Introducing the user interface of the Presentation Editor</title>
<meta charset="utf-8" />
<meta name="description" content="Introducing the Presentation Editor user interface" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
@ -13,50 +13,50 @@
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Introducing the Presentation Editor user interface</h1>
<p><b>Presentation Editor</b> uses a tabbed interface where editing commands are grouped into tabs by functionality.</p>
<h1>Introducing the user interface of the Presentation Editor</h1>
<p>The <b>Presentation Editor</b> uses a tabbed interface where editing commands are grouped into tabs according to their functionality.</p>
<div class="onlineDocumentFeatures">
<p>Online Presentation Editor window:</p>
<p>Main window of the Online Presentation Editor:</p>
<p><img alt="Online Presentation Editor window" src="../images/interface/editorwindow.png" /></p>
</div>
<div class="desktopDocumentFeatures">
<p>Desktop Presentation Editor window:</p>
<p>Main window of the Desktop Presentation Editor:</p>
<p><img alt="Desktop Presentation Editor window" src="../images/interface/desktop_editorwindow.png" /></p>
</div>
<p>The editor interface consists of the following main elements:</p>
<ol>
<li>
<b>Editor header</b> displays the logo, <span class="desktopDocumentFeatures">opened documents tabs, </span>presentation name and menu tabs.
<p>In the left part of the <b>Editor header</b> there are the <b>Save</b>, <b>Print file</b>, <b>Undo</b> and <b>Redo</b> buttons.</p>
The <b>Editor header</b> displays the logo, <span class="desktopDocumentFeatures">tabs for all opened presentations with their names</span> and menu tabs.
<p>On the left side of the <b>Editor header</b>, the <b>Save</b>, <b>Print file</b>, <b>Undo</b> and <b>Redo</b> buttons are located.</p>
<p><img alt="Icons in the editor header" src="../images/interface/leftpart.png" /></p>
<p>In the right part of the <b>Editor header</b> the user name is displayed as well as the following icons:</p>
<p>On the right side of the <b>Editor header</b>, along with the user name the following icons are displayed:</p>
<ul>
<li><img alt="Open file location" src="../images/gotodocuments.png" /> <b>Open file location</b> - <span class="desktopDocumentFeatures">in the <em>desktop version</em>, it allows to open the folder where the file is stored in the <b>File explorer</b> window.</span> <span class="onlineDocumentFeatures"> In the <em>online version</em>, it allows to open the folder of the <b>Documents</b> module where the file is stored in a new browser tab.</span></li>
<li><img alt="View Settings icon" src="../images/viewsettingsicon.png" /> - allows to adjust <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and access the editor <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>.</li>
<li class="onlineDocumentFeatures"><img alt="Manage document access rights icon" src="../images/access_rights.png" /> <b>Manage document access rights</b> - (available in the <em>online version</em> only) allows to <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">set access rights</a> for the documents stored in the cloud.</li>
<li><img alt="Open file location" src="../images/gotodocuments.png" /> <b>Open file location</b> - <span class="desktopDocumentFeatures">in the <em>desktop version</em>, it allows opening the folder, where the file is stored, in the <b>File Explorer</b> window.</span> <span class="onlineDocumentFeatures"> In the <em>online version</em>, it allows opening the folder of the <b>Documents</b> module, where the file is stored, in a new browser tab.</span></li>
<li><img alt="View Settings icon" src="../images/viewsettingsicon.png" /> <b>View Settings</b> - allows adjusting the <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">View Settings</a> and accessing the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> of the editor.</li>
<li class="onlineDocumentFeatures"><img alt="Manage document access rights icon" src="../images/access_rights.png" /> <b>Manage document access rights</b> - (available in the <em>online version</em> only) allows <a href="../HelpfulHints/CollaborativeEditing.htm" onclick="onhyperlinkclick(this)">setting access rights</a> for the documents stored in the cloud.</li>
</ul>
</li>
<li>
<b>Top toolbar</b> displays a set of editing commands depending on the selected menu tab. Currently, the following tabs are available: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Home</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Insert</a>, <a href="../ProgramInterface/CollaborationTab.htm" onclick="onhyperlinkclick(this)">Collaboration</a>, <span class="desktopDocumentFeatures">Protection,</span> <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
<p>The <img alt="Copy icon" src="../images/copy.png" /> <b>Copy</b> and <img alt="Paste icon" src="../images/paste.png" /> <b>Paste</b> options are always available at the left part of the <b>Top toolbar</b> regardless of the selected tab.</p>
The <b>Top toolbar</b> displays a set of editing commands depending on the selected menu tab. Currently, the following tabs are available: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Home</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Insert</a>, <a href="../ProgramInterface/CollaborationTab.htm" onclick="onhyperlinkclick(this)">Collaboration</a>, <span class="desktopDocumentFeatures">Protection,</span> <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
<p>The <img alt="Copy icon" src="../images/copy.png" /> <b>Copy</b> and <img alt="Paste icon" src="../images/paste.png" /> <b>Paste</b> options are always available on the left side of the <b>Top toolbar</b> regardless of the selected tab.</p>
</li>
<li><b>Status bar</b> at the bottom of the editor window contains the <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">Start slideshow</a> icon, some <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">navigation tools</a>: slide number indicator and zoom buttons. The <b>Status bar</b> also displays some notifications (such as "All changes saved" etc.) and allows to <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">set text language and enable spell checking</a>.</li>
<li>The <b>Status bar</b> at the bottom of the editor window contains the <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">Start slideshow</a> icon, some <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">navigation tools</a>: slide number indicator and zoom buttons. The <b>Status bar</b> also displays some notifications (such as "All changes saved", etc.) and allows <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">setting the text language and enable spell checking</a>.</li>
<li>
<b>Left sidebar</b> contains the following icons:
The <b>Left sidebar</b> contains the following icons:
<ul>
<li><img alt="Search icon" src="../images/searchicon.png" /> - allows to use the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool,</li>
<li><img alt="Comments icon" src="../images/commentsicon.png" /> - allows to open the <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Comments</a> panel,</li>
<li class="onlineDocumentFeatures"><img alt="Chat icon" src="../images/chaticon.png" /> - (available in the <em>online version</em> only) allows to open the <a href="../HelpfulHints/CollaborativeEditing.htm#chat" onclick="onhyperlinkclick(this)">Chat</a> panel,</li>
<li class="onlineDocumentFeatures"><img alt="Feedback and Support icon" src="../images/feedbackicon.png" /> - (available in the <em>online version</em> only) allows to contact our support team,</li>
<li class="onlineDocumentFeatures"><img alt="About icon" src="../images/abouticon.png" /> - (available in the <em>online version</em> only) allows to view the information about the program.</li>
<li><img alt="Search icon" src="../images/searchicon.png" /> - allows using the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool,</li>
<li><img alt="Comments icon" src="../images/commentsicon.png" /> - allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Comments</a> panel,</li>
<li class="onlineDocumentFeatures"><img alt="Chat icon" src="../images/chaticon.png" /> - (available in the <em>online version</em> only) allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm#chat" onclick="onhyperlinkclick(this)">Chat</a> panel,</li>
<li class="onlineDocumentFeatures"><img alt="Feedback and Support icon" src="../images/feedbackicon.png" /> - (available in the <em>online version</em> only) allows contacting our support team,</li>
<li class="onlineDocumentFeatures"><img alt="About icon" src="../images/abouticon.png" /> - (available in the <em>online version</em> only) allows viewing the information about the program.</li>
</ul>
</li>
<li><b>Right sidebar</b> allows to adjust additional parameters of different objects. When you select a particular object on a slide, the corresponding icon is activated at the right sidebar. Click this icon to expand the right sidebar.</li>
<li>Horizontal and vertical <b>Rulers</b> help you place objects on a slide and allow to set up tab stops and paragraph indents within the text boxes.</li>
<li><b>Working area</b> allows to view presentation content, enter and edit data.</li>
<li><b>Scroll bar</b> on the right allows to scroll the presentation up and down.</li>
<li>The <b>Right sidebar</b> allows adjusting additional parameters of different objects. When you select a particular object on a slide, the corresponding icon is activated on the right sidebar. Click this icon to expand the right sidebar.</li>
<li>The horizontal and vertical <b>Rulers</b> help you place objects on a slide and allow you to set up tab stops and paragraph indents within the text boxes.</li>
<li>The <b>Working area</b> allows viewing the presentation content, entering and editing data.</li>
<li>The <b>Scroll bar</b> on the right allows scrolling the presentation up and down.</li>
</ol>
<p>For your convenience you can hide some components and display them again when it is necessary. To learn more on how to adjust view settings please refer to <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">this page</a>.</p>
<p>For your convenience, you can hide some components and display them again when necessary. To learn more on how to adjust the view settings, please refer to <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">this page</a>.</p>
</div>
</body>

10
apps/presentationeditor/main/resources/help/en/UsageInstructions/AddHyperlinks.htm
View file

@ -16,10 +16,10 @@
<h1>Add hyperlinks</h1>
<p>To add a hyperlink,</p>
<ol>
<li>place the cursor to a position within the text box where a hyperlink will be added,</li>
<li>place the cursor within the text box where a hyperlink should be added,</li>
<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Hyperlink icon" src="../images/addhyperlink.png" /> <b>Hyperlink</b> icon at the top toolbar,</li>
<li>after that the <b>Hyperlink Settings</b> will appear where you can specify the hyperlink parameters:
<li>click the <img alt="Hyperlink icon" src="../images/addhyperlink.png" /> <b>Hyperlink</b> icon on the top toolbar,</li>
<li>after that the <b>Hyperlink Settings</b> window will appear where you can specify the hyperlink parameters:
<ul>
<li>Select a link type you wish to insert:
<ul>
@ -32,12 +32,12 @@
</ul>
</li>
<li><b>Display</b> - enter a text that will get clickable and lead to the web address/slide 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>
<li><b>ScreenTip text</b> - enter a text that will become visible in a small pop-up window with a brief note or label pertaining to the hyperlink to be pointed.</li>
</ul>
</li>
<li>Click the <b>OK</b> button.</li>
</ol>
<p>To add a hyperlink, you can also use the <b>Ctrl+K</b> key combination or click with the right mouse button at a position where a hyperlink will be added and select the <b>Hyperlink</b> option in the right-click menu.</p>
<p>To add a hyperlink, you can also use the <b>Ctrl+K</b> key combination or click with the right mouse button where a hyperlink should be added and select the <b>Hyperlink</b> option in the right-click menu.</p>
<p class="note"><b>Note</b>: it's also possible to select a character, word or word combination with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a> and
then open the <b>Hyperlink Settings</b> window as described above. In this case, the <b>Display</b> field will be 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.

30
apps/presentationeditor/main/resources/help/en/UsageInstructions/AlignArrangeObjects.htm
View file

@ -14,13 +14,13 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Align and arrange objects on a slide</h1>
<p>The added <b>autoshapes, images, charts</b> or <b>text boxes</b> can be aligned, grouped, ordered, distributed horizontally and vertically on a slide. To perform any of these actions, first select a separate object or several objects in the slide editing area. To select several objects, hold down the <b>Ctrl</b> key and left-click the necessary objects. To select a text box, click on its border, not the text within it. After that you can use either the icons at the <b>Home</b> tab of the top toolbar described below or the analogous options from the right-click menu.</p>
<p>The added <b>autoshapes, images, charts</b> or <b>text boxes</b> can be aligned, grouped, ordered, distributed horizontally and vertically on the slide. To perform any of these actions, first select a separate object or several objects in the slide editing area. To select several objects, hold down the <b>Ctrl</b> key and left-click the necessary objects. To select a text box, click on its border, not the text within it. After that you can use either the icons on the <b>Home</b> tab of the top toolbar described below or the analogous options from the right-click menu.</p>
<h3>Align objects</h3>
<p>To <b>align</b> <em>two or more</em> selected objects, </p>
<ol>
<li>
Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon at the <b>Home</b> tab of the top toolbar and select one of the following options:
Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Slide</b> to align objects relative to the edges of the slide,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to align objects relative to each other,</li>
@ -29,12 +29,12 @@
<li>
Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon once again and select the necessary alignment type from the list:
<ul>
<li><b>Align Left</b> <img alt="Align Left icon" src="../images/alignobjectleft.png" /> - to line up the objects horizontally by the left edge of the leftmost object/left edge of the slide,</li>
<li><b>Align Center</b> <img alt="Align Center icon" src="../images/alignobjectcenter.png" /> - to line up the objects horizontally by their centers/center of the slide,</li>
<li><b>Align Right</b> <img alt="Align Right icon" src="../images/alignobjectright.png" /> - to line up the objects horizontally by the right edge of the rightmost object/right edge of the slide,</li>
<li><b>Align Top</b> <img alt="Align Top icon" src="../images/alignobjecttop.png" /> - to line up the objects vertically by the top edge of the topmost object/top edge of the slide,</li>
<li><b>Align Middle</b> <img alt="Align Middle icon" src="../images/alignobjectmiddle.png" /> - to line up the objects vertically by their middles/middle of the slide,</li>
<li><b>Align Bottom</b> <img alt="Align Bottom icon" src="../images/alignobjectbottom.png" /> - to line up the objects vertically by the bottom edge of the bottommost object/bottom edge of the slide.</li>
<li><b>Align Left</b> <img alt="Align Left icon" src="../images/alignobjectleft.png" /> - to line up the objects horizontally on the left side of the leftmost object/left edge of the slide,</li>
<li><b>Align Center</b> <img alt="Align Center icon" src="../images/alignobjectcenter.png" /> - to line up the objects horizontally in their centers/center of the slide,</li>
<li><b>Align Right</b> <img alt="Align Right icon" src="../images/alignobjectright.png" /> - to line up the objects horizontally on the right side of the rightmost object/right edge of the slide,</li>
<li><b>Align Top</b> <img alt="Align Top icon" src="../images/alignobjecttop.png" /> - to line up the objects vertically to the top edge of the topmost object/top edge of the slide,</li>
<li><b>Align Middle</b> <img alt="Align Middle icon" src="../images/alignobjectmiddle.png" /> - to line up the objects vertically in their middles/middle of the slide,</li>
<li><b>Align Bottom</b> <img alt="Align Bottom icon" src="../images/alignobjectbottom.png" /> - to line up the objects vertically to the bottom edge of the bottommost object/bottom edge of the slide.</li>
</ul>
</li>
</ol>
@ -44,7 +44,7 @@
<p>To <b>distribute</b> <em>three or more</em> selected objects horizontally or vertically so that the equal distance appears between them, </p>
<ol>
<li>
Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon at the <b>Home</b> tab of the top toolbar and select one of the following options:
Click the <b>Align</b> <img alt="Align icon" src="../images/alignshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Slide</b> to distribute objects between the edges of the slide,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to distribute objects between two outermost selected objects,</li>
@ -62,20 +62,20 @@
<p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
<h3>Group objects</h3>
<p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the <b>Arrange shape</b> <img alt="Arrange shape icon" src="../images/arrangeshape.png" /> icon at the <b>Home</b> tab of the top toolbar and select the necessary option from the list:</p>
<p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the <b>Arrange shape</b> <img alt="Arrange shape icon" src="../images/arrangeshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select the necessary option from the list:</p>
<ul>
<li><b>Group</b> <img alt="Group icon" src="../images/group.png" /> - to join several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <img alt="Ungroup icon" src="../images/ungroup.png" /> - to ungroup the selected group of the previously joined objects.</li>
<li><b>Group</b> <img alt="Group icon" src="../images/group.png" /> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <img alt="Ungroup icon" src="../images/ungroup.png" /> - to ungroup the selected group of the previously combined objects.</li>
</ul>
<p>Alternatively, you can right-click the selected objects, choose the <b>Arrange</b> option from the contextual menu and then use the <b>Group</b> or <b>Ungroup</b> option.</p>
<p class="note"><b>Note</b>: the <b>Group</b> option is disabled if you select less than two objects. The <b>Ungroup</b> option is available only when a group of the previously joined objects is selected.</p>
<h3>Arrange objects</h3>
<p>To <b>arrange</b> the selected object(s) (i.e. to change their order when several objects overlap each other), click the <b>Arrange shape</b> <img alt="Arrange shape icon" src="../images/arrangeshape.png" /> icon at the <b>Home</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
<p>To <b>arrange</b> the selected object(s) (i.e. to change their order when several objects overlap each other), click the <b>Arrange shape</b> <img alt="Arrange shape icon" src="../images/arrangeshape.png" /> icon on the <b>Home</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
<ul>
<li><b>Bring To Foreground</b> <img alt="Bring To Foreground icon" src="../images/bringtofront.png" /> - to move the object(s) in front of all other objects,</li>
<li><b>Send To Background</b> <img alt="Send To Background icon" src="../images/sendtoback.png" /> - to move the object(s) behind all other objects,</li>
<li><b>Bring Forward</b> <img alt="Bring Forward icon" src="../images/bringforward.png" /> - to move the selected object(s) by one level forward as related to other objects.</li>
<li><b>Send Backward</b> <img alt="Send Backward icon" src="../images/sendbackward.png" /> - to move the selected object(s) by one level backward as related to other objects.</li>
<li><b>Bring Forward</b> <img alt="Bring Forward icon" src="../images/bringforward.png" /> - to move the selected object(s) one level forward as related to other objects.</li>
<li><b>Send Backward</b> <img alt="Send Backward icon" src="../images/sendbackward.png" /> - to move the selected object(s) one level backward as related to other objects.</li>
</ul>
<p>Alternatively, you can right-click the selected object(s), choose the <b>Arrange</b> option from the contextual menu and then use one of the available arrangement options.</p>
</div>

10
apps/presentationeditor/main/resources/help/en/UsageInstructions/ApplyTransitions.htm
View file

@ -14,11 +14,11 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Apply transitions</h1>
<p>A <b>transition</b> is an effect that appears between two slides when one slide advances to the next one during a demonstration. You can apply the same transition to all slides or apply different transitions to each separate slide and adjust the transition properties.</p>
<p>A <b>transition</b> is an effect that appears between two slides when one slide advances to the next one when displayed. You can apply the same transition to all slides or apply different transitions to each separate slide and adjust the transition properties.</p>
<p><b>To apply a transition to a single slide</b> or several selected slides:</p>
<p><img class="floatleft"alt="Slide settings tab" src="../images/slidesettingstab.png" /></p>
<ol style="margin-left: 280px;">
<li>Select the necessary slide (or several slides in the slide list) you want to apply a transition to. The <b>Slide settings</b> tab will be activated on the right sidebar. To open it click the <b>Slide settings</b> <img alt="Slide settings icon" src="../images/slide_settings_icon.png" /> icon on the right. Alternatively, you can right-click a slide in the slide editing area and select the <b>Slide Settings</b> option from the contextual menu.
<li>Select the necessary slide (or several slides in the slide list) you want to apply a transition to. The <b>Slide settings</b> tab will be activated on the right sidebar. To open it, click the <b>Slide settings</b> <img alt="Slide settings icon" src="../images/slide_settings_icon.png" /> icon on the right. Alternatively, you can right-click a slide in the slide editing area and select the <b>Slide Settings</b> option from the contextual menu.
</li>
<li>In the <b>Effect</b> drop-down list, select the transition you want to use.
<p>The following transitions are available: Fade, Push, Wipe, Split, Uncover, Cover, Clock, Zoom.</p>
@ -28,9 +28,9 @@
<li>Press the <b>Preview</b> button to view the slide with the applied transition in the slide editing area.</li>
<li>Specify how long you want the slide to be displayed until it advances to another one:
<ul>
<li><b>Start on click</b> – check this box if you don't want to restrict the time while the selected slide is being displayed. The slide will advance to another one only when you click on it with the mouse.</li>
<li><b>Delay</b> – use this option if you want the selected slide to be displayed for a specified time until it advances to the next one. Check this box and enter or select the necessary time value, measured in seconds.
<p class="note"><b>Note</b>: if you check only the <b>Delay</b> box, the slides will advance automatically in a specified time interval. If you check both the <b>Start on click</b> and the <b>Delay</b> boxes and set the delay value, the slides will advance automatically as well, but you will also be able to click a slide to advance from it to the next.</p>
<li><b>Start on click</b> – check this box if you don't want to restrict the time while the selected slide is displayed. The slide will advance to another one only when you click on it with the mouse.</li>
<li><b>Delay</b> – use this option if you want the selected slide to be displayed within a specified period of time until it advances to the next one. Check this box and enter or select the necessary time value, measured in seconds.
<p class="note"><b>Note</b>: if you check only the <b>Delay</b> box, the slides will advance automatically within a specified time interval. If you check both the <b>Start on click</b> and the <b>Delay</b> boxes and set the delay value, the slides will advance automatically as well, but you will also be able to click a slide to advance from it to the next.</p>
</li>
</ul>
</li>

10
apps/presentationeditor/main/resources/help/en/UsageInstructions/CopyClearFormatting.htm
View file

@ -16,21 +16,21 @@
<h1>Copy/clear 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" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
<li>click the <b>Copy style</b> <img alt="Copy style" src="../images/copystyle.png" /> icon at the <b>Home</b> tab of 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 whose formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
<li>click the <b>Copy style</b> <img alt="Copy style" src="../images/copystyle.png" /> icon on the <b>Home</b> tab of 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 apply the copied formatting to multiple text passages,</p>
<ol>
<li>select the text passage which formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
<li>double-click the <b>Copy style</b> <img alt="Copy style" src="../images/copystyle.png" /> icon at the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <img alt="Mouse pointer while pasting style" src="../images/paste_style.png" /> and the <b>Copy style</b> icon will remain selected: <img alt="Multiple copying style" src="../images/copystyle_selected.png" />),</li>
<li>select the text passage whose formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
<li>double-click the <b>Copy style</b> <img alt="Copy style" src="../images/copystyle.png" /> icon on the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <img alt="Mouse pointer while pasting style" src="../images/paste_style.png" /> and the <b>Copy style</b> icon will remain selected: <img alt="Multiple copying style" src="../images/copystyle_selected.png" />),</li>
<li>select the necessary text passages one by one to apply the same formatting to each of them,</li>
<li>to exit this mode, click the <b>Copy style</b> <img alt="Multiple copying style" src="../images/copystyle_selected.png" /> icon once again or press the <b>Esc</b> key on the keyboard.</li>
</ol>
<p>To quickly remove the formatting that you have applied to a text passage,</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 <b>Home</b> tab of the top toolbar.</li>
<li>click the <b>Clear style</b> <img alt="Clear style" src="../images/clearstyle.png" /> icon on the <b>Home</b> tab of the top toolbar.</li>
</ol>
</div>
</body>

22
apps/presentationeditor/main/resources/help/en/UsageInstructions/CopyPasteUndoRedo.htm
View file

@ -15,11 +15,11 @@
</div>
<h1>Copy/paste data, undo/redo your actions</h1>
<h3>Use basic clipboard operations</h3>
<p>To cut, copy and paste selected objects (slides, text passages, autoshapes) in the current presentation or undo/redo your actions use the corresponding options from the right-click menu, or keyboard shortcuts, or icons available at any tab of the top toolbar:</p>
<p>To cut, copy and paste the selected objects (slides, text passages, autoshapes) in the current presentation or undo/redo your actions, use the corresponding options from the right-click menu, keyboard shortcuts or icons available on any tab of the top toolbar:</p>
<ul>
<li><b>Cut</b> – select 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. <span class="onlineDocumentFeatures">The cut data can be later inserted to another place in the same presentation.</span></li>
<li><b>Copy</b> – select 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. <span class="onlineDocumentFeatures">The copied object can be later inserted to another place in the same presentation.</span></li>
<li><b>Paste</b> – find the place in your presentation where you need to paste the previously copied 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 object will be inserted at the current cursor position. <span class="onlineDocumentFeatures">The object can be previously copied from the same presentation.</span></li>
<li><b>Copy</b> – select 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 on the top toolbar to copy the selection to the computer clipboard memory. <span class="onlineDocumentFeatures">The copied object can be later inserted to another place in the same presentation.</span></li>
<li><b>Paste</b> – find the place in your presentation where you need to paste the previously copied 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 on the top toolbar. The object will be inserted to the current cursor position. <span class="onlineDocumentFeatures">The object can be previously copied from the same presentation.</span></li>
</ul>
<p><span class="onlineDocumentFeatures">In the <em>online version</em>, the following key combinations are only used to copy or paste data from/into another presentation or some other program,</span> <span class="desktopDocumentFeatures">in the <em>desktop version</em>, both the corresponding buttons/menu options and key combinations can be used for any copy/paste operations:</span></p>
<ul>
@ -31,20 +31,20 @@
<p>Once the copied data is pasted, the <b>Paste Special</b> <img alt="Paste Special" src="../images/pastespecialbutton.png" /> button appears next to the inserted text passage/object. Click this button to select the necessary paste option. </p>
<p>When pasting text passages, the following options are available:</p>
<ul>
<li><em>Use destination theme</em> - allows to apply the formatting specified by the theme of the current presentation. This option is used by default.</li>
<li><em>Keep source formatting</em> - allows to keep the source formatting of the copied text.</li>
<li><em>Picture</em> - allows to paste the text as an image so that it cannot be edited.</li>
<li><em>Keep text only</em> - allows to paste the text without its original formatting.</li>
<li><em>Use destination theme</em> - allows applying the formatting specified by the theme of the current presentation. This option is used by default.</li>
<li><em>Keep source formatting</em> - allows keeping the source formatting of the copied text.</li>
<li><em>Picture</em> - allows pasting the text as an image so that it cannot be edited.</li>
<li><em>Keep text only</em> - allows pasting the text without its original formatting.</li>
</ul>
<p><img alt="Paste options" src="../images/pastespecial.png" /></p>
<p>When pasting objects (autoshapes, charts, tables) the following options are available:</p>
<p>When pasting objects (autoshapes, charts, tables), the following options are available:</p>
<ul>
<li><em>Use destination theme</em> - allows to apply the formatting specified by the theme of the current presentation. This option is used by default.</li>
<li><em>Picture</em> - allows to paste the object as an image so that it cannot be edited.</li>
<li><em>Use destination theme</em> - allows applying the formatting specified by the theme of the current presentation. This option is used by default.</li>
<li><em>Picture</em> - allows pasting the object as an image so that it cannot be edited.</li>
</ul>
<p><p>To enable / disable the automatic appearance of the <b>Paste Special</b> button after pasting, go to the <b>File</b> tab > <b>Advanced Settings...</b> and check / uncheck the <b>Cut, copy and paste</b> checkbox.</p></p>
<h3>Use the Undo/Redo operations</h3>
<p>To perform the undo/redo operations, use the corresponding icons in the left part of the editor header or keyboard shortcuts:</p>
<p>To undo/redo your actions, use the corresponding icons on the left side of the editor header or keyboard shortcuts:</p>
<ul>
<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>

22
apps/presentationeditor/main/resources/help/en/UsageInstructions/CreateLists.htm
View file

@ -14,30 +14,30 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Create lists</h1>
<p>To create a list in your document,</p>
<p>To create a list in your presentation,</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>place the cursor where a list should start (this can be a new line or the already entered text),</li>
<li>switch to the <b>Home</b> tab of the top toolbar,</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>Unordered list</b> with markers is created using the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> icon situated on 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>
<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>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 <b>Home</b> tab of 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="InsertText.htm" onclick="onhyperlinkclick(this)">Insert and format your text</a> section.</p>
<p>You can also change the text indentation in the lists and their nesting using the <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 on the <b>Home</b> tab of the top toolbar.</p>
<p class="note"><b>Note</b>: the additional indentation and spacing parameters can be changed on the right sidebar and in the advanced settings window. To learn more about it, read the <a href="InsertText.htm" onclick="onhyperlinkclick(this)">Insert and format your text</a> section.</p>
<h3>Change the list settings</h3>
<p>To change the bulleted or numbered list settings, such as a bullet type, size and color:</p>
<ol>
<li>click an existing list item or select the text you want to format as a list,</li>
<li>click the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> or <b>Numbering</b> <img alt="Ordered List icon" src="../images/numbering.png" /> icon at the <b>Home</b> tab of the top toolbar,</li>
<li>click the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> or <b>Numbering</b> <img alt="Ordered List icon" src="../images/numbering.png" /> icon on the <b>Home</b> tab of the top toolbar,</li>
<li>select the <b>List Settings</b> option,</li>
<li>
the <b>List Settings</b> window will open. The bulleted list settings window looks like this:
@ -46,10 +46,10 @@
<p><img alt="Numbered List Settings window" src="../images/orderedlistsettings.png" /></p>
<p>For the bulleted list, you can choose a character used as a <b>bullet</b>, while for the numbered list you can choose what number the list <b>Starts at</b>. The <b>Size</b> and <b>Color</b> options are the same both for the bulleted and numbered lists.</p>
<ul>
<li><b>Size</b> - allows to select the necessary bullet/number size depending on the current size of the text. It can take a value from 25% to 400%.</li>
<li><b>Color</b> - allows to select the necessary bullet/number color. You can select one of the <em>theme colors</em>, or <em>standard colors</em> on the palette, or specify a <em>custom</em> color.</li>
<li><b>Type</b> - allows to select the necessary character used for the list. When you click on the field, a drop-down list opens that allows to choose one of the available options. For <b>Bulleted</b> lists, you can also add a new symbol. To learn more on how to work with symbols, you can refer to <a href="../UsageInstructions/InsertSymbols.htm" onclick="onhyperlinkclick(this)">this article</a>.</li>
<li><b>Start at</b> - allows to select the nesessary sequence number a numbered list starts from.</li>
<li><b>Size</b> - allows you to select the necessary bullet/number size depending on the current size of the text. It can be a value ranging from 25% to 400%.</li>
<li><b>Color</b> - allows you to select the necessary bullet/number color. You can select one of the <em>theme colors</em>, or <em>standard colors</em> on the palette, or specify a <em>custom</em> color.</li>
<li><b>Bullet</b> - allows you to select the necessary character used for the list. When you click on the Bullet field, the Symbol window opens, and you can choose one of the available characters. For <b>Bulleted</b> lists, you can also add a new symbol. To learn more on how to work with symbols, please refer to <a href="../UsageInstructions/InsertSymbols.htm" onclick="onhyperlinkclick(this)">this article</a>.</li>
<li><b>Start at</b> - allows you to select the nesessary sequence number a numbered list starts from.</li>
</ul>
</li>
<li>click <b>OK</b> to apply the changes and close the settings window.</li>

40
apps/presentationeditor/main/resources/help/en/UsageInstructions/FillObjectsSelectColor.htm
View file

@ -18,42 +18,50 @@
<ol>
<li>Select an object
<ul>
<li>To change the slide background fill, select the necessary slides in the slide list. The <img alt="Slide settings Icon" src="../images/slide_settings_icon.png" /> <b>Slide settings</b> tab will be activated at the the right sidebar.</li>
<li>To change the autoshape fill, left-click the necessary autoshape. The <img alt="Shape settings Icon" src="../images/shape_settings_icon.png" /> <b>Shape settings</b> tab will be activated at the the right sidebar.</li>
<li>To change the Text Art font fill, left-click the necessary text object. The <img alt="Text Art settings Icon" src="../images/textart_settings_icon.png" /> <b>Text Art settings</b> tab will be activated at the the right sidebar.</li>
<li>To change the slide background fill, select the necessary slides in the slide list. The <img alt="Slide settings Icon" src="../images/slide_settings_icon.png" /> <b>Slide settings</b> tab will be activated on the right sidebar.</li>
<li>To change the autoshape fill, left-click the necessary autoshape. The <img alt="Shape settings Icon" src="../images/shape_settings_icon.png" /> <b>Shape settings</b> tab will be activated on the right sidebar.</li>
<li>To change the Text Art font fill, left-click the necessary text object. The <img alt="Text Art settings Icon" src="../images/textart_settings_icon.png" /> <b>Text Art settings</b> tab will be activated on the right sidebar.</li>
</ul>
</li>
<li>Set the necessary fill type</li>
<li>Adjust the selected fill properties (see the detailed description below for each fill type)
<p class="note"><b>Note</b>: for the autoshapes and Text Art font, regardless of the selected fill type, you can also 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.</p>
<p class="note"><b>Note</b>: for the autoshapes and Text Art font, regardless of the selected fill type, you can also set an <b>Opacity</b> level by 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.</p>
</li>
</ol>
<p><b>The following fill types are available:</b></p>
<ul>
<li><b>Color Fill</b> - select this option to specify the solid color you want to fill the inner space of the selected shape/slide with.
<li><b>Color Fill</b> - select this option to specify the solid color to fill the inner space of the selected shape/slide.
<p><img alt="Color Fill" src="../images/fill_color.png" /></p>
<p>Click on 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/palettes.png" /></p>
<ul>
<li><b>Theme Colors</b> - the colors that correspond to the selected theme/color scheme of the presentation. Once you apply a different theme or color scheme, the <b>Theme Colors</b> set will change.</li>
<li><b>Standard Colors</b> - the default colors set.</li>
<li><b>Custom Color</b> - click on 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:
<li><b>Custom Color</b> - click on this caption if there is no needed color in the available palettes. Select the necessary color range by moving the vertical color slider and set the specific color by 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 by 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 will appear 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 object and added to the <b>Custom color</b> palette of the menu.</p>
</li>
</ul>
<p class="note"><b>Note</b>: just the same color types you can use when selecting the <b>color of the autoshape stroke</b>, adjusting the <b>font color</b>, or changing the <b>table background or border color</b>.</p>
<p class="note"><b>Note</b>: you can use the same color types when selecting the <b>color of the autoshape stroke</b>, adjusting the <b>font color</b>, or changing the <b>table background or border color</b>.</p>
</li>
</ul>
<hr />
<ul>
<li><b>Gradient Fill</b> - select this option to fill the slide/shape with two colors which smoothly change from one to another.
<p><img class="floatleft"alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
<ul style="margin-left: 280px;">
<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>
<b>Gradient Fill</b> - select this option to fill the slide/shape with two colors which smoothly change from one to another. Click the <img alt="Shape settings Icon" src="../images/shape_settings_icon.png" /> <b>Shape settings</b> icon to open the <b>Fill</b> menu:
<p><img class="floatleft" alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
<ul style="margin-left: 280px;">
<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>Angle</b> - set the numeric value for a precise color transition angle.</li>
<li><b>Gradient Points</b> are specific points of color transition.
<ol>
<li>Use the <b>Add Gradient Point</b> button or a slider bar to add a gradient point, and the <b>Remove Gradient Point</b> button to delete one. You can add up to 10 gradient points. Each of the following gradient points added does not affect the current gradient appearance.</li>
<li>Use the slider bar to change the location of the gradient point or specify the <b>Position</b> in percentage for a precise location.</li>
<li>To apply a color to the gradient point, click on the required point on the slider bar, and then click <b>Color</b> to choose the color you want.</li>
</ol>
</li>
</ul>
</li>
</ul>
<hr />
@ -70,8 +78,8 @@
</ul>
<ul style="margin-left: 280px;">
<li>In case the selected <b>Picture</b> has less or more dimensions than the autoshape or slide has, you can choose the <b>Stretch</b> or <b>Tile</b> setting from the drop-down list.
<p>The <b>Stretch</b> option allows to adjust the image size to fit the slide or autoshape size so that it could fill the space completely.</p>
<p>The <b>Tile</b> option allows to display only a part of the bigger image keeping its original dimensions, or repeat the smaller image keeping its original dimensions over the slide or autoshape surface so that it could fill the space completely.</p>
<p>The <b>Stretch</b> option allows you to adjust the image size to fit the slide or 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 slide or 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>

30
apps/presentationeditor/main/resources/help/en/UsageInstructions/HighlightedCode.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Insert highlighted code</title>
<meta charset="utf-8" />
<meta name="description" content="The description of Hightlight code plugin for ONLYOFFICE editors, which allows to embed code with the already adjusted style into presentations" />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert highlighted code</h1>
<p>You can embed highlighted code with the already adjusted style in accordance with the programming language and coloring style of the program you have chosen.</p>
<ol>
<li>Go to your presentation and place the cursor at the location where you want to include the code.</li>
<li>Switch to the <b>Plugins</b> tab and choose <img alt="Highlight code plugin icon" src="../images/highlight.png" /> <b>Highlight code</b>.</li>
<li>Specify the programming <b>Language</b>.</li>
<li>Select a <b>Style</b> of the code so that it appears as if it were open in this program.</li>
<li>Specify if you want to replace tabs with spaces.</li>
<li>Choose <b>Background color</b>. To do this, manually move the cursor over the palette or insert the <b>RBG</b>/<b>HSL</b>/<b>HEX</b> value.</li>
<li>Click <b>OK</b> to insert the code.</li>
</ol>
<img class="gif" alt="Highlight plugin gif" src="../images/highlight_plugin.gif" width="600" />
</div>
</body>
</html>

36
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm
View file

@ -15,23 +15,23 @@
</div>
<h1>Insert and format autoshapes</h1>
<h3>Insert an autoshape</h3>
<p>To <b>add</b> an autoshape on a slide,</p>
<p>To <b>add</b> an autoshape to a slide,</p>
<ol>
<li>in the slide list on the left, select the slide you want to add the autoshape to,</li>
<li>click the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon at the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon on the <b>Home</b> or <b>Insert</b> tab of 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 on the necessary autoshape within the selected group,</li>
<li>in the slide editing area, place the mouse cursor where you want the shape to be put,
<p class="note"><b>Note</b>: you can click and drag to stretch the shape.</p>
</li>
<li>once the autoshape is added you can <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size, position</a> and properties.
<p class="note"><b>Note</b>: to add a caption within the autoshape make sure the shape is selected on the slide 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>once the autoshape is added, you can <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size, position</a> and properties.
<p class="note"><b>Note</b>: to add a caption within the autoshape, make sure the shape is selected on the slide 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>It's also possible to add an autoshape to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
<hr />
<h3>Adjust autoshape settings</h3>
<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 autoshape 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>
<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 autoshape 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>
<p><img class="floatleft"alt="Shape settings tab" src="../images/shapesettingstab.png" /></p>
<ul style="margin-left: 280px;">
<li><b>Fill</b> - use this section to select the autoshape fill. You can choose the following options:
@ -42,7 +42,7 @@
<li><b>Pattern</b> - to fill the shape with a two-colored design composed of regularly repeated elements.</li>
<li><b>No Fill</b> - select this option if you don't want to use any fill.</li>
</ul>
<p>For more detailed information on these options please refer to the <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">Fill objects and select colors</a> section.</p>
<p>For more detailed information on these options, please refer to the <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">Fill objects and select colors</a> section.</p>
</li>
<li id="shapestroke"><b>Stroke</b> - use this section to change the autoshape stroke width, color or type.
<ul>
@ -64,9 +64,9 @@
<li><b>Show shadow</b> - check this option to display shape with shadow.</li>
</ul>
<hr />
<p>To change the <b>advanced settings</b> of the autoshape, right-click the shape and select the <b>Shape Advanced Settings</b> option from the contextual menu or left-click it and press the <b>Show advanced settings</b> link at the right sidebar. The shape properties window will be opened:</p>
<p>To change the <b>advanced settings</b> of the autoshape, right-click the shape and select the <b>Shape Advanced Settings</b> option from the contextual menu or left-click it and press the <b>Show advanced settings</b> link on the right sidebar. The shape properties window will be opened:</p>
<p><img alt="Shape Properties - Size tab" src="../images/shape_properties1.png" /></p>
<p>The <b>Size</b> tab allows to change the autoshape <b>Width</b> and/or <b>Height</b>. 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 autoshape aspect ratio.</p>
<p>The <b>Size</b> tab allows you to change the autoshape <b>Width</b> and/or <b>Height</b>. 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 autoshape aspect ratio.</p>
<p><img alt="Shape - Advanced Settings" src="../images/shape_properties5.png" /></p>
<p>The <b>Rotation</b> tab contains the following parameters:</p>
<ul>
@ -76,16 +76,16 @@
<p><img alt="Shape Properties - Weights & Arrows tab" src="../images/shape_properties.png" /></p>
<p>The <b>Weights & Arrows</b> tab contains the following parameters:</p>
<ul>
<li><b>Line Style</b> - this option group allows to specify the following parameters:
<li><b>Line Style</b> - this option allows specifying 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.:
<li><b>Cap Type</b> - this option allows setting 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:
<li><b>Join Type</b> - this option allows setting 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>
@ -95,24 +95,24 @@
</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 drop-down lists.</li>
<li><b>Arrows</b> - this option group is available if a shape from the <b>Lines</b> shape group is selected. It allows you to set the arrow <b>Start</b> and <b>End Style</b> and <b>Size</b> by selecting the appropriate option from the drop-down lists.</li>
</ul>
<p id="internalmargins"><img alt="Shape Properties - Text Padding tab" src="../images/shape_properties3.png" /></p>
<p>The <b>Text Box</b> tab allows you to <b>Not Autofit</b> text at all, <b>Shrink text on overflow</b>, <b>Resize shape to fit text</b> or 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>The <b>Text Padding</b> tab allows you 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>
<p id ="columns"><img alt="Shape Properties - Columns tab" src="../images/shape_properties2.png" /></p>
<p>The <b>Columns</b> tab allows to add columns of text within the autoshape specifying the necessary <b>Number of columns</b> (up to 16) and <b>Spacing between columns</b>. Once you click <b>OK</b>, the text that already exists or any other text you enter within the autoshape will appear in columns and will flow from one column to another.</p>
<p>The <b>Columns</b> tab allows adding columns of text within the autoshape specifying the necessary <b>Number of columns</b> (up to 16) and <b>Spacing between columns</b>. Once you click <b>OK</b>, the text that already exists or any other text you enter within the autoshape will appear in columns and will flow from one column to another.</p>
<p><img alt="Shape Properties - Alternative Text tab" src="../images/shape_properties4.png" /></p>
<p>The <b>Alternative Text</b> tab allows to specify a <b>Title</b> and <b>Description</b> which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the shape.</p>
<p>The <b>Alternative Text</b> tab allows specifying the <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand the contents of the shape.</p>
<hr />
<p>To <b>replace</b> the added autoshape, left-click it and use the <b>Change Autoshape</b> drop-down list at the <b>Shape settings</b> tab of the right sidebar.</p>
<p>To <b>delete</b> the added autoshape, left-click it and press the <b>Delete</b> key on the keyboard.</p>
<p>To <b>replace</b> the added autoshape, left-click it and use the <b>Change Autoshape</b> drop-down list on the <b>Shape settings</b> tab of the right sidebar.</p>
<p>To <b>delete</b> the added autoshape, left-click it and press the <b>Delete</b> key.</p>
<p>To learn how to <b>align</b> an autoshape on the slide or <b>arrange</b> several autoshapes, refer to the <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Align and arrange objects on a slide</a> section.</p>
<hr />
<h3>Join autoshapes using connectors</h3>
<p>You can connect autoshapes using lines with connection points to demonstrate dependencies between the objects (e.g. if you want to create a flowchart). To do that,</p>
<ol>
<li>click the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon at the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>
select the <b>Lines</b> group from the menu,
<p><img alt="Shapes - Lines" src="../images/connectors.png" /></p>

98
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertCharts.htm
View file

@ -17,9 +17,9 @@
<h3>Insert a chart</h3>
<p><b>To insert a chart</b> into your presentation,</p>
<ol>
<li>put the cursor at the place where you want to add a chart,</li>
<li>put the cursor where you want to add a chart,</li>
<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Chart icon" src="../images/insertchart.png" /> <b>Chart</b> icon at the top toolbar,</li>
<li>click the <img alt="Chart icon" src="../images/insertchart.png" /> <b>Chart</b> icon on the top toolbar,</li>
<li>select the needed chart type from the available ones - Column, Line, Pie, Bar, Area, XY (Scatter), Stock,
<p class="note"><b>Note</b>: for <b>Column</b>, <b>Line</b>, <b>Pie</b>, or <b>Bar</b> charts, a 3D format is also available.</p>
</li>
@ -35,17 +35,17 @@
<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.
change the chart settings by 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 Settings window" src="../images/chartsettings.png" /></p>
<p>The <b>Type &amp Data</b> tab allows you to select the chart type 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: Column, Line, Pie, Bar, Area, XY (Scatter), Stock.</li>
<li>Select the required chart <b>Type</b>: Column, Line, Pie, Bar, Area, XY (Scatter), Stock.</li>
<li>
Check the selected <b>Data Range</b> and modify it, if necessary. To do that, click the <img alt="Source data range icon" src="../images/changerange.png" /> icon.
<p><img alt="Select Data Range window" src="../images/selectdata.png" /></p>
<p>In the <b>Select Data Range</b> window, enter the necessary data range in the following format: <em>Sheet1!$A$1:$E$10</em>. You can also select the necessary cell range in the sheet using the mouse. When ready, click <b>OK</b>.</p>
</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>
<li>Choose a way to arrange the data. You can select the <b>Data series</b> to be used on the X axis: either <b>in rows</b> or <b>in columns</b>.</li>
</ul>
<p><img alt="Chart Settings window" src="../images/chartsettings2.png" /></p>
<p>The <b>Layout</b> tab allows you to change the layout of chart elements.</p>
@ -53,15 +53,15 @@
<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>None</b> not to display the title of a chart,</li>
<li><b>Overlay</b> to overlay and center the title in 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>None</b> not to 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>
@ -81,29 +81,29 @@
<li>For <b>Area</b> charts as well as for <b>3D</b> <b>Column</b>, <b>Line</b> and <b>Bar</b> charts, you can choose the following options: <b>None</b>, <b>Center</b>.</li>
</ul>
</li>
<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>enter a character (comma, semicolon etc.) you wish to use for separating several labels into the <b>Data Labels Separator</b> entry field.</li>
<li>select the data you wish to include into your labels by checking the corresponding boxes: <b>Series Name</b>, <b>Category Name</b>, <b>Value</b>,</li>
<li>enter a character (comma, semicolon, etc.) you wish to use to separate 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/XY (Scatter) 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>Lines</b> - is used to choose a line style for <b>Line/XY (Scatter) charts</b>. You can choose one of the following options: <b>Straight</b> to use straight lines among data points, <b>Smooth</b> to use smooth curves among data points, or <b>None</b> not to 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/XY (Scatter) 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>XY (Scatter) charts</b> only.</p>
</li>
<li>
The <b>Axis Settings</b> section allows to specify if you wish to display <b>Horizontal/Vertical Axis</b> or not selecting the <b>Show</b> or <b>Hide</b> option from the drop-down list. You can also specify <b>Horizontal/Vertical Axis Title</b> parameters:
The <b>Axis Settings</b> section allows specifying if you wish to display <b>Horizontal/Vertical Axis</b> or not by selecting the <b>Show</b> or <b>Hide</b> option from the drop-down list. You can also specify <b>Horizontal/Vertical Axis Title</b> parameters:
<ul>
<li>
Specify if you wish to display the <b>Horizontal Axis Title</b> or not selecting the necessary option from the drop-down list:
Specify if you wish to display the <b>Horizontal Axis Title</b> or not by selecting the necessary option from the drop-down list:
<ul>
<li><b>None</b> to not display a horizontal axis title,</li>
<li><b>None</b> not to 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:
Specify the <b>Vertical Axis Title</b> orientation by selecting the necessary option from the drop-down list:
<ul>
<li><b>None</b> to not display a vertical axis title,</li>
<li><b>None</b> not to display a vertical axis title,</li>
<li><b>Rotated</b> to display the title from bottom to top to the left of the vertical axis,</li>
<li><b>Horizontal</b> to display the title horizontally to the left of the vertical axis.</li>
</ul>
@ -111,7 +111,7 @@
</ul>
</li>
<li>
The <b>Gridlines</b> section allows to 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.
The <b>Gridlines</b> section allows specifying which of the <b>Horizontal/Vertical Gridlines</b> you wish to display by 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>Axis Settings</b> and <b>Gridlines</b> sections will be disabled for <b>Pie charts</b> since charts of this type have no axes and gridlines.</p>
</li>
</ul>
@ -120,28 +120,28 @@
<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>XY (Scatter) charts</b>, both axes are value axes.</p>
<ul>
<li>
The <b>Axis Options</b> section allows to set the following parameters:
The <b>Axis Options</b> section allows you 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>
<li><b>Minimum Value</b> - is used to specify the lowest value displayed at the beginning of the vertical axis. 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 the highest value displayed at the end of the vertical axis. 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 the representation of 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 a more compact and readable way (e.g. you can represent 50 000 as 50 by using the <b>Thousands</b> display units). Select the 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:
The <b>Tick Options</b> section allows you to adjust the appearance of tick marks on the vertical scale. Major tick marks are larger scale divisions which can have labels with numeric values. Minor tick marks are 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 on 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>None</b> not to 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:
The <b>Label Options</b> section allows you 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>None</b> not to 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>
@ -152,69 +152,69 @@
<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>XY (Scatter) charts</b>, both axes are value axes.</p>
<ul>
<li>
The <b>Axis Options</b> section allows to set the following parameters:
The <b>Axis Options</b> section allows setting 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 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:
The <b>Tick Options</b> section allows adjusting the appearance of tick marks on the horizontal scale. Major tick marks are larger divisions which can have labels with category values. Minor tick marks are 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 on 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>Major/Minor Type</b> - is used to specify the following placement options: <b>None</b> not to 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.
The <b>Label Options</b> section allows adjusting 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>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> not to 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>
<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>
<p><img alt="Chart Settings window" src="../images/chartsettings5.png" /></p>
<p>The <b>Alternative Text</b> tab allows to specify a <b>Title</b> and <b>Description</b> which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the chart.</p>
<p>The <b>Alternative Text</b> tab allows specifying the <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand the contents of the chart.</p>
</li>
<li>once the chart is added you can also <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>.
<p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">chart position</a> on the slide dragging it vertically or horizontally.</p>
<li>once the chart is added, you can also <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>.
<p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">chart position</a> on the slide by dragging it vertically or horizontally.</p>
</li>
</ol>
<p>You can also add a chart into a text placeholder pressing the <img alt="Chart icon" src="../images/placeholder_chart.png" /> <b>Chart</b> icon within it and selecting the necessary chart type:</p>
<p>You can also add a chart into a text placeholder by pressing the <img alt="Chart icon" src="../images/placeholder_chart.png" /> <b>Chart</b> icon within it and selecting the necessary chart type:</p>
<p><img alt="Add chart to placeholder" src="../images/placeholder_object.png" /></p>
<p>It's also possible to add a chart to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
<hr />
<h3>Edit chart elements</h3>
<p>To edit the chart <b>Title</b>, select the default text with the mouse and type in your own one instead.</p>
<p>To change the font formatting within text elements, such as the chart title, axes titles, legend entries, data labels etc., select the necessary text element by left-clicking it. Then use icons at the <b>Home</b> tab of the top toolbar to change the font <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">type, style, size, or color</a>.</p>
<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" onclick="onhyperlinkclick(this)"><b>Fill</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> and <b>Wrapping Style</b>. Note that you cannot change the shape type.</p>
<p>To change the font formatting within text elements, such as the chart title, axes titles, legend entries, data labels, etc., select the necessary text element by left-clicking it. Then use the corresponding icons on the <b>Home</b> tab of the top toolbar to change the font <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">type, style, size, or color</a>.</p>
<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 the shape is used as the background for the chart. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the shape <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Fill</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> and <b>Wrapping Style</b>. Note that you cannot change the shape type.</p>
<p>
Using the <b>Shape Settings</b> tab at the right panel you can not only adjust the chart area itself, but also change the chart elements, such as <em>plot area</em>, <em>data series</em>, <em>chart title</em>, <em>legend</em> etc and apply different fill types to them. Select the chart element clicking it with the left mouse button and choose the preferred fill type: <em>solid color</em>, <em>gradient</em>, <em>texture</em> or <em>picture</em>, <em>pattern</em>. Specify the fill parameters and set the <em>Opacity</em> level if necessary.
When you select a vertical or horizontal axis or gridlines, the stroke settings are only available at the <b>Shape Settings</b> tab: <em>color</em>, <em>width</em> and <em>type</em>. For more details on how to work with shape colors, fills and stroke, you can refer to <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">this page</a>.
Using the <b>Shape Settings</b> tab on the right panel, you can not only adjust the chart area itself, but also change the chart elements, such as <em>plot area</em>, <em>data series</em>, <em>chart title</em>, <em>legend</em>, etc. and apply different fill types to them. Select the chart element by clicking it with the left mouse button and choose the preferred fill type: <em>solid color</em>, <em>gradient</em>, <em>texture</em> or <em>picture</em>, <em>pattern</em>. Specify the fill parameters and set the <em>Opacity</em> level if necessary.
When you select a vertical or horizontal axis or gridlines, the stroke settings are only available on the <b>Shape Settings</b> tab: <em>color</em>, <em>width</em> and <em>type</em>. For more details on how to work with shape colors, fills and stroke, please refer to <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">this page</a>.
</p>
<p class="note"><b>Note</b>: the <b>Show shadow</b> option is also available at the <b>Shape settings</b> tab, but it is disabled for chart elements.</p>
<p class="note"><b>Note</b>: the <b>Show shadow</b> option is also available on the <b>Shape settings</b> tab, but it is disabled for chart elements.</p>
<p>If you need to resize chart elements, left-click to select the needed element and drag one of 8 white squares <img alt="Square icon" src="../images/resize_square.png" /> located along the perimeter of the element.</p>
<p><img alt="Resize chart elements" src="../images/resizeelement.png" /></p>
<p>To change the position of the element, left-click on it, make sure your cursor changed to <img alt="Arrow" src="../images/arrow.png" />, hold the left mouse button and drag the element to the needed position.</p>
<p><img alt="Move chart elements" src="../images/moveelement.png" /></p>
<p>To delete a chart element, select it by left-clicking and press the <b>Delete</b> key on the keyboard.</p>
<p>To delete a chart element, select it by left-clicking and press the <b>Delete</b> key.</p>
<p>You can also rotate 3D charts using the mouse. Left-click within the plot area and hold the mouse button. Drag the cursor without releasing the mouse button to change the 3D chart orientation.</p>
<p><img alt="3D chart" src="../images/3dchart.png" /></p>
<hr />
<h3>Adjust chart settings</h3>
<img alt="Chart tab" src="../images/charttab.png" />
<p>The chart size, type and style as well as data used to create the chart can be altered using 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.</p>
<p>The chart size, type and style as well as the data used to create the chart can be altered using 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.</p>
<p>The <b>Size</b> section allows you 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.</p>
<p>The <b>Change Chart Type</b> section allows you to change the selected chart type and/or style using the corresponding drop-down menu. </p>
<p>The <b>Change Chart Type</b> section allows you to change the type of the selected chart type and/or its style using the corresponding drop-down menu. </p>
<p>To select the necessary chart <b>Style</b>, use the second drop-down menu in the <b>Change Chart Type</b> section.</p>
<p>The <b>Edit Data</b> button allows you to open the <b>Chart Editor</b> window and start editing data as described above.</p>
<p class="note"><b>Note</b>: to quickly open the 'Chart Editor' window you can also double-click the chart on the slide.</p>
<p>The <b>Show advanced settings</b> option at the right sidebar allows to open the <b>Chart - Advanced Settings</b> window where you can set the alternative text:</p>
<p class="note"><b>Note</b>: to quickly open the 'Chart Editor' window, you can also double-click the chart on the slide.</p>
<p>The <b>Show advanced settings</b> option on the right sidebar allows you to open the <b>Chart - Advanced Settings</b> window where you can set the alternative text:</p>
<p><img alt="Chart Advanced Settings window" src="../images/chartsettings6.png" /></p>
<hr />
<p>To <b>delete</b> the inserted chart, left-click it and press the <b>Delete</b> key on the keyboard.</p>
<p>To <b>delete</b> the inserted chart, left-click it and press the <b>Delete</b> key.</p>
<p>To learn how to <b>align</b> a chart on the slide or <b>arrange</b> several objects, refer to the <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Align and arrange objects on a slide</a> section.</p>
</div>
</body>

34
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertEquation.htm
View file

@ -14,46 +14,46 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert equations</h1>
<p><b>Presentation Editor</b> allows you to build equations using the built-in templates, edit them, insert special characters (including mathematical operators, Greek letters, accents etc.).</p>
<p>The <b>Presentation Editor</b> allows you to create equations using the built-in templates, edit them, insert special characters (including mathematical operators, Greek letters, accents, etc.).</p>
<h3>Add a new equation</h3>
<p>To insert an equation from the gallery,</p>
<ol>
<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
<li>click the arrow next to the <img alt="Equation icon" src="../images/insertequationicon.png" /> <b>Equation</b> icon at the top toolbar,</li>
<li>click the arrow next to the <img alt="Equation icon" src="../images/insertequationicon.png" /> <b>Equation</b> icon on 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>Matrices</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 in the center of the current slide.</p>
<img alt="Inserted Equation" src="../images/insertedequation.png" />
<p>If you do not see the equation box border, click anywhere within the equation - the border will be displayed as a dashed line. The equation box can be freely <b>moved, resized or rotated</b> on the slide. To do that click on the equation box border (it will be displayed as a solid line) and use <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">corresponding handles</a>.</p>
<p>If you do not see the equation box border, click anywhere within the equation - the border will be displayed as a dashed line. The equation box can be freely <b>moved, resized or rotated</b> on the slide. To do that, click on the equation box border (it will be displayed as a solid line) and use the <a href="ManipulateObjects.htm" onclick="onhyperlinkclick(this)">corresponding handles</a>.</p>
<img alt="Selected Equation" src="../images/selectedequation.png" />
<p>Each equation template represents a set of slots. Slot is a position for each element that makes up the equation. An empty slot (also called as a placeholder) has a dotted outline <img alt="Equation Placeholder" src="../images/equationplaceholder.png" />. You need to fill in all the placeholders specifying the necessary values.</p>
<p>Each equation template represents a set of slots. A slot is a position for each element that makes up the equation. An empty slot (also called as a placeholder) has a dotted outline <img alt="Equation Placeholder" src="../images/equationplaceholder.png" />. You need to fill in all the placeholders specifying the necessary values.</p>
<h3>Enter values</h3>
<p>The <b>insertion point</b> specifies where the next character you enter will appear. To position the insertion point precisely, click within a placeholder and use the keyboard arrows to move the insertion point by one character left/right.</p>
<p>The <b>insertion point</b> specifies where the next character you enter will appear. To position the insertion point precisely, click within a placeholder and use the keyboard arrows to move the insertion point one character left/right.</p>
<img alt="Edited Equation" src="../images/newslot.png" />
<p>Once the insertion point is positioned, you can fill in the placeholder:
<ul>
<li>enter the desired numeric/literal value using the keyboard,</li>
<li>insert a special character using the <b>Symbols</b> palette from the <img alt="Equation icon" src="../images/insertequationicon.png" /> <b>Equation</b> menu at the <b>Insert</b> tab of the top toolbar or typing them from the keyboard (see the <a href="../UsageInstructions/MathAutoCorrect.htm" onclick="onhyperlinkclick(this)"><b>Math AutoСorrect</b></a> option description),</li>
<li>insert a special character using the <b>Symbols</b> palette from the <img alt="Equation icon" src="../images/insertequationicon.png" /><b>Equation</b> menu on the <b>Insert</b> tab of the top toolbar or typing them from the keyboard (see the <a href="../UsageInstructions/MathAutoCorrect.htm" onclick="onhyperlinkclick(this)"><b>Math AutoСorrect</b></a> option description),</li>
<li>add another equation template from the palette to create a complex nested equation. The size of the primary equation will be automatically adjusted to fit its content. The size of the nested equation elements depends on the primary equation placeholder size, but it cannot be smaller than the sub-subscript size.</li>
</ul>
</p>
<p><img alt="Edited Equation" src="../images/nestedfraction.png" /></p>
<p>To add some new equation elements you can also use the <b>right-click menu options</b>:</p>
<p>To add some new equation elements, you can also use the <b>right-click menu options</b>:</p>
<ul>
<li>To add a new argument that goes before or after the existing one within <em>Brackets</em>, you can right-click on the existing argument and select the <b>Insert argument before/after</b> option from the menu.</li>
<li>To add a new equation within <em>Cases</em> with several conditions from the <em>Brackets</em> group, you can right-click on an empty placeholder or entered equation within it and select the <b>Insert equation before/after</b> option from the menu.</li>
<li>To add a new row or a column in a <em>Matrix</em>, you can right-click on a placeholder within it, select the <b>Insert</b> option from the menu, then select <b>Row Above/Below</b> or <b>Column Left/Right</b>.</li>
</ul>
<p class="note"><b>Note</b>: currently, equations cannot be entered using the linear format, i.e. <b>\sqrt(4&x^3)</b>.</p>
<p>When entering the values of the mathematical expressions, you do not need to use <b>Spacebar</b> as the spaces between the characters and signs of operations are set automatically.</p>
<p>If the equation is too long and does not fit to a single line within the text box, automatic line breaking occurs as you type. You can also insert a line break in a specific position by right-clicking on a mathematical operator and selecting the <b>Insert manual break</b> option from the menu. The selected operator will start a new line. To delete the added manual line break, right-click on the mathematical operator that starts a new line and select the <b>Delete manual break</b> option.</p>
<p>When entering the values of mathematical expressions, you do not need to use <b>Spacebar</b> because spaces between the characters and signs of operations are set automatically.</p>
<p>If the equation is too long and does not fit to a single line within the text box, automatic line breaking appears while you are typing. You can also insert a line break in a specific position by right-clicking on a mathematical operator and selecting the <b>Insert manual break</b> option from the menu. The selected operator will start a new line. To delete the added manual line break, right-click on the mathematical operator that starts a new line and select the <b>Delete manual break</b> option.</p>
<h3>Format equations</h3>
<p>By default, the equation within the text box is horizontally centered and vertically aligned to the top of the text box. To change its horizontal/vertical alignment, put the cursor within the the equation box (the text box borders will be displayed as dashed lines) and use the <a href="../UsageInstructions/InsertText.htm#formattext" onclick="onhyperlinkclick(this)">corresponding icons</a> at the <b>Home</b> tab of the top toolbar.</p>
<p>To increase or decrease the equation <b>font size</b>, click anywhere within the equation box and select the necessary font size from the list at the <b>Home</b> tab of the top toolbar. All the equation elements will change correspondingly.</p>
<p>The letters within the equation are italicized by default. If necessary, you can change the <b>font style</b> (<em>bold, italic, strikeout</em>) or <b>color</b> for a whole equation or its part. The <em>underlined</em> style can be applied to the entire equation only, not to individual characters. Select the necessary part of the equation by clicking and dragging. The selected part will be highlighted blue. Then use the necessary buttons at the <b>Home</b> tab of the top toolbar to format the selection. For example, you can remove the italic format for ordinary words that are not variables or constants.</p>
<p>By default, the equation within the text box is horizontally centered and vertically aligned to the top of the text box. To change its horizontal/vertical alignment, put the cursor within the the equation box (the text box borders will be displayed as dashed lines) and use the <a href="../UsageInstructions/InsertText.htm#formattext" onclick="onhyperlinkclick(this)">corresponding icons</a> on the <b>Home</b> tab of the top toolbar.</p>
<p>To increase or decrease the equation <b>font size</b>, click anywhere within the equation box and select the necessary font size from the list on the <b>Home</b> tab of the top toolbar. All the equation elements will change correspondingly.</p>
<p>The letters within the equation are italicized by default. If necessary, you can change the <b>font style</b> (<em>bold, italic, strikeout</em>) or <b>color</b> for a whole equation or its part. The <em>underlined</em> style can be applied to the entire equation only, not to individual characters. Select the necessary part of the equation by clicking and dragging. The selected part will be highlighted blue. Then use the necessary buttons on the <b>Home</b> tab of the top toolbar to format the selection. For example, you can remove the italic format for ordinary words that are not variables or constants.</p>
<img alt="Edited Equation" src="../images/formatastext.png" />
<p>To modify some equation elements you can also use the <b>right-click menu options</b>:</p>
<p>To modify some equation elements, you can also use the <b>right-click menu options</b>:</p>
<ul><li>To change the <em>Fractions</em> format, you can right-click on a fraction and select the <b>Change to skewed/linear/stacked fraction</b> option from the menu (the available options differ depending on the selected fraction type). <!--The <b>Remove/Add fraction bar</b> option is also available for stacked fractions.--></li>
<li>To change the <em>Scripts</em> position relating to text, you can right-click on the equation that includes scripts and select the <b>Scripts before/after text</b> option from the menu.</li>
<li>To change the argument size for <em>Scripts, Radicals, Integrals, Large Operators, Limits and Logarithms, Operators</em> as well as for overbraces/underbraces and templates with grouping characters from the <em>Accents</em> group, you can right-click on the argument you want to change and select the <b>Increase/Decrease argument size</b> option from the menu.</li>
@ -67,18 +67,18 @@
<li>To choose which borders should be displayed for a <em>Boxed formula</em> from the <em>Accents</em> group, you can right-click on the equation and select the <b>Border properties</b> option from the menu, then select <b>Hide/Show top/bottom/left/right border</b> or <b>Add/Hide horizontal/vertical/diagonal line</b>.</li>
<li>To specify whether empty placeholders should be displayed or not for a <em>Matrix</em>, you can right-click on it and select the <b>Hide/Show placeholder</b> option from the menu.</li>
</ul>
<p>To align some equation elements you can use the <b>right-click menu options</b>:</p>
<p>To align some equation elements, you can use the <b>right-click menu options</b>:</p>
<ul>
<li>To align equations within <em>Cases</em> with several conditions from the <em>Brackets</em> group, you can right-click on an equation, select the <b>Alignment</b> option from the menu, then select the alignment type: <b>Top</b>, <b>Center</b>, or <b>Bottom</b>.</li>
<li>To align a <em>Matrix</em> vertically, you can right-click on the matrix, select the <b>Matrix Alignment</b> option from the menu, then select the alignment type: <b>Top</b>, <b>Center</b>, or <b>Bottom</b>.</li>
<li>To align elements within a <em>Matrix</em> column horizontally, you can right-click on a placeholder within the column, select the <b>Column Alignment</b> option from the menu, then select the alignment type: <b>Left</b>, <b>Center</b>, or <b>Right</b>.</li>
</ul>
<h3>Delete equation elements</h3>
<p>To delete a part of the equation, select the part you want to delete by dragging the mouse or holding down the <b>Shift</b> key and using the arrow buttons, then press the <b>Delete</b> key on the keyboard.</p>
<p>To delete a part of the equation, select the part you want to delete by dragging the mouse or holding down the <b>Shift</b> key and using the arrow buttons, then press the <b>Delete</b> key.</p>
<p>A slot can only be deleted together with the template it belongs to.</p>
<p>To delete the entire equation, click on the equation box border (it will be displayed as a solid line) and and press the <b>Delete</b> key on the keyboard.</p>
<p>To delete the entire equation, click on the equation box border (it will be displayed as a solid line) and and press the <b>Delete</b> key.</p>
<img alt="Delete Equation" src="../images/deleteequation.png" />
<p>To delete some equation elements you can also use the <b>right-click menu options</b>:</p>
<p>To delete some equation elements, you can also use the <b>right-click menu options</b>:</p>
<ul>
<li>To delete a <em>Radical</em>, you can right-click on it and select the <b>Delete radical</b> option from the menu.</li>
<li>To delete a <em>Subscript</em> and/or <em>Superscript</em>, you can right-click on the expression that contains them and select the <b>Remove subscript/superscript</b> option from the menu. If the expression contains scripts that go before text, the <b>Remove scripts</b> option is available.</li>

22
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertHeadersFooters.htm
View file

@ -14,14 +14,14 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert footers</h1>
<p>Footers allow to add some additional info on a slide, such as date and time, slide number, or a text.</p>
<p>Footers allow adding some additional info to a slide, such as date and time, slide number, or a text.</p>
<p>To insert a footer in a presentation:</p>
<ol>
<li>switch to the <b>Insert</b> tab,</li>
<li>click the <img alt="Edit footer icon" src="../images/header_footer_icon.png" /> <b>Edit footer</b> button at the top toolbar,</li>
<li>the <b>Footer Settings</b> window will open. Check the data you want to add into the footer. The changes are displayed in the preview window on the right.
<li>click the <img alt="Edit footer icon" src="../images/header_footer_icon.png" /> <b>Edit footer</b> button on the top toolbar,</li>
<li>the <b>Footer Settings</b> window will open. Check the data you want to add to the footer. The changes are displayed in the preview window on the right.
<ul>
<li>check the <b>Date and time</b> box to insert a date or time in a selected format. The selected date will be added to the left field of the slide footer.
<li>check the <b>Date and time</b> box to insert a date or time in the selected format. The selected date will be added to the left field of the slide footer.
<p>Specify the necessary data format:</p>
<ul>
<li><b>Update automatically</b> - check this radio button if you want to automatically update the date and time according to the current date and time.
@ -35,17 +35,17 @@
</ul>
<p><img alt="Footer Settings" src="../images/header_footer_settings.png" /></p>
</li>
<li>check the <b>Don't show on the title slide</b> option, if necessary,</li>
<li>check the <b>Don't show on the title slide</b> option if necessary,</li>
<li>click the <b>Apply to all</b> button to apply changes to all slides or use the <b>Apply</b> button to apply the changes to the current slide only.</li>
</ol>
<p>To quickly insert a date or a slide number into the footer of the selected slide, you can use the <b>Show slide Number</b> and <b>Show Date and Time</b> options at the <b>Slide Settings</b> tab of the right sidebar. In this case, the selected settings will be applied to the current slide only. The date and time or slide number added in such a way can be adjusted later using the <b>Footer Settings</b> window.</p>
<p>To edit the added footer, click the <img alt="Edit footer icon" src="../images/header_footer_icon.png" /> <b>Edit footer</b> button at the top toolbar, make the necessary changes in the <b>Footer Settings</b> window, and click the <b>Apply</b> or <b>Apply to All</b> button to save the changes.</p>
<p>To quickly insert a date or a slide number to the footer of the selected slide, you can use the <b>Show slide Number</b> and <b>Show Date and Time</b> options on the <b>Slide Settings</b> tab of the right sidebar. In this case, the selected settings will be applied to the current slide only. The date and time or slide number added in such a way can be adjusted later using the <b>Footer Settings</b> window.</p>
<p>To edit the added footer, click the <img alt="Edit footer icon" src="../images/header_footer_icon.png" /> <b>Edit footer</b> button on the top toolbar, make the necessary changes in the <b>Footer Settings</b> window, and click the <b>Apply</b> or <b>Apply to All</b> button to save the changes.</p>
<h3>Insert date and time and slide number into the text box</h3>
<p>It's also possible to insert date and time or slide number into the selected text box using the corresponding buttons at the <b>Insert</b> tab of the top toolbar.</p>
<p>It's also possible to insert date and time or slide number into the selected text box using the corresponding buttons on the <b>Insert</b> tab of the top toolbar.</p>
<h5>Insert date and time</h5>
<ol>
<li>put the mouse cursor within the text box where you want to insert the date and time,</li>
<li>click the <img alt="Date and Time icon" src="../images/date_time_icon.png" /> <b>Date &amp; Time</b> button at the <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Date and Time icon" src="../images/date_time_icon.png" /> <b>Date &amp; Time</b> button on the <b>Insert</b> tab of the top toolbar,</li>
<li>select the necessary <b>Language</b> from the list and choose the necessary date and time <b>Format</b> in the <b>Date &amp; Time</b> window,
<p><img alt="Date and Time Settings" src="../images/date_time_settings.png" /></p>
</li>
@ -55,14 +55,14 @@
<p>The date and time will be inserted in the current cursor position. To edit the inserted date and time,</p>
<ol>
<li>select the inserted date and time in the text box,</li>
<li>click the <img alt="Date and Time icon" src="../images/date_time_icon.png" /> <b>Date &amp; Time</b> button at the <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Date and Time icon" src="../images/date_time_icon.png" /> <b>Date &amp; Time</b> button on the <b>Insert</b> tab of the top toolbar,</li>
<li>choose the necessary format in the <b>Date &amp; Time</b> window,</li>
<li>click the <b>OK</b> button.</li>
</ol>
<h5>Insert a slide number</h5>
<ol>
<li>put the mouse cursor within the text box where you want to insert the slide number,</li>
<li>click the <img alt="Slide Number icon" src="../images/slide_number_icon.png" /> <b>Slide Number</b> button at the <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Slide Number icon" src="../images/slide_number_icon.png" /> <b>Slide Number</b> button on the <b>Insert</b> tab of the top toolbar,</li>
<li>check the <b>Slide number</b> box in the <b>Footer Settings</b> window,</li>
<li>click the <b>OK</b> button to apply the changes.</li>
</ol>

26
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertImages.htm
View file

@ -15,19 +15,19 @@
</div>
<h1>Insert and adjust images</h1>
<h3>Insert an image</h3>
<p>In Presentation Editor, you can insert images in the most popular formats into your presentation. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
<p>In the Presentation Editor, you can insert images in the most popular formats into your presentation. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
<p>To <b>add</b> an image on a slide,</p>
<ol>
<li>in the slide list on the left, select the slide you want to add the image to,</li>
<li>click the <img alt="Image icon" src="../images/image.png" /> <b>Image</b> icon at the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Image icon" src="../images/image.png" /> <b>Image</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>select one of the following options to load the image:
<ul>
<li>the <b>Image from File</b> option will open the standard 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>Image 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>
<li>the <b>Image from File</b> option will open the standard dialog window so that you can choose a file. Browse the hard disk drive your computer to select the necessary file and click the <b>Open</b> button</li>
<li>the <b>Image from URL</b> option will open the window where you can enter the web address of the necessary image and click the <b>OK</b> button</li>
<li class="onlineDocumentFeatures"> the <b>Image from Storage</b> option will open the <b>Select data source</b> window. Select an image stored on your portal and click the <b>OK</b> button</li>
</ul>
</li>
<li>once the image is added you can <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>.</li>
<li>once the image is added, you can <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>.</li>
</ol>
<p>You can also add an image into a text placeholder pressing the <img alt="Image from file icon" src="../images/placeholder_imagefromfile.png" /> <b>Image from file</b> in it and selecting the necessary image stored on your PC, or use the <img alt="Image from URL icon" src="../images/placeholder_imagefromurl.png" /> <b>Image from URL</b> button and specify the image URL address:</p>
<p><img alt="Add image to placeholder" src="../images/placeholder_object.png" /></p>
@ -36,9 +36,9 @@
<h3>Adjust image settings</h3>
<p>The right sidebar is activated when you left-click an image and choose the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon on the right. It contains the following sections:</p>
<img alt="Image Settings tab" src="../images/imagesettingstab.png" />
<p><b>Size</b> - is used to view the current image <b>Width</b> and <b>Height</b> or restore the image <b>Actual Size</b> if necessary.</p>
<p><b>Size</b> - is used to view the <b>Width</b> and <b>Height</b> of the current image or restore its <b>Actual Size</b> if necessary.</p>
<p>The <b>Crop</b> button is used to crop the image. Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of each its side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the <img alt="Arrow" src="../images/arrow.png" /> icon and drag the area. </p>
<p>The <b>Crop</b> button is used to crop the image. Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of its each side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the <img alt="Arrow" src="../images/arrow.png" /> icon and drag the area. </p>
<ul>
<li>To crop a single side, drag the handle located in the center of this side.</li>
<li>To simultaneously crop two adjacent sides, drag one of the corner handles.</li>
@ -51,7 +51,7 @@
<li>If you select the <b>Fill</b> option, the central part of the original image will be preserved and used to fill the selected cropping area, while other parts of the image will be removed.</li>
<li>If you select the <b>Fit</b> option, the image will be resized so that it fits the cropping area height or width. No parts of the original image will be removed, but empty spaces may appear within the selected cropping area.</li>
</ul>
<p><b>Replace Image</b> - is used to load another image instead of the current one selecting the desired source. You can select one of the options: <b>From File</b>, <b>From Storage</b>, or <b>From URL</b>. The <b>Replace image</b> option is also available in the right-click menu.</p>
<p><b>Replace Image</b> - is used to load another image instead of the current one from the desired source. You can select one of the options: <b>From File</b>, <b>From Storage</b>, or <b>From URL</b>. The <b>Replace image</b> option is also available in the right-click menu.</p>
<p><b>Rotation</b> is used to rotate the image by 90 degrees clockwise or counterclockwise as well as to flip the image horizontally or vertically. Click one of the buttons:</p>
<ul>
<li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the image by 90 degrees counterclockwise</li>
@ -59,11 +59,11 @@
<li><img alt="Flip horizontally icon" src="../images/fliplefttoright.png" /> to flip the image horizontally (left to right)</li>
<li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the image vertically (upside down)</li>
</ul>
<p>When the image 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. 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_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> type, size and color as well as change the shape type selecting another shape from the <b>Change Autoshape</b> menu. The shape of the image will change correspondingly.</p>
<p>At the <b>Shape Settings</b> tab, you can also use the <b>Show shadow</b> option to add a shadow to the image.</p>
<p>When the image 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. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> type, size and color of the shape as well as change its type by selecting another shape from the <b>Change Autoshape</b> menu. The shape of the image will change correspondingly.</p>
<p>On the <b>Shape Settings</b> tab, you can also use the <b>Show shadow</b> option to add a shadow to the image.</p>
<p><img alt="Shape Settings tab" src="../images/right_image_shape.png" /></p>
<hr />
<p>To change the <b>advanced settings</b> of the image, right-click the image and select the <b>Image Advanced Settings</b> option from the contextual menu or left-click the image and press the <b>Show advanced settings</b> link at the right sidebar. The image properties window will be opened:</p>
<p>To change the <b>advanced settings</b> of the image, right-click the image and select the <b>Image Advanced Settings</b> option from the contextual menu or left-click the image and press the <b>Show advanced settings</b> link on the right sidebar. The image properties window will be opened:</p>
<p><img alt="Image Properties" src="../images/image_properties.png" /></p>
<p>The <b>Placement</b> tab allows you to set the following image properties:</p>
<ul>
@ -77,9 +77,9 @@
<li><b>Flipped</b> - check the <b>Horizontally</b> box to flip the image horizontally (left to right) or check the <b>Vertically</b> box to flip the image vertically (upside down).</li>
</ul>
<p><img alt="Image Properties" src="../images/image_properties1.png" /></p>
<p>The <b>Alternative Text</b> tab allows to specify a <b>Title</b> and <b>Description</b> which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image.</p>
<p>The <b>Alternative Text</b> tab allows specifying the <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand the contents of the image.</p>
<hr />
<p>To <b>delete</b> the inserted image, left-click it and press the <b>Delete</b> key on the keyboard.</p>
<p>To <b>delete</b> the inserted image, left-click it and press the <b>Delete</b> key.</p>
<p>To learn how to <b>align</b> an image on the slide or <b>arrange</b> several images, refer to the <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Align and arrange objects on a slide</a> section.</p>
</div>
</body>

14
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertSymbols.htm
View file

@ -14,22 +14,22 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert symbols and characters</h1>
<p>During working process you may need to insert a symbol which is not on your keyboard. To insert such symbols into your presentation, use the <img alt="Symbol table icon" src="../images/vector.png" /> <b>Insert symbol</b> option and follow these simple steps:</p>
<p>When working on a presentation, you may need to insert a symbol which is not available on your keyboard. To insert such symbols into your presentation, use the <img alt="Insert symbol icon" src="../images/insert_symbol_icon.png" /> <b>Insert symbol</b> option and follow these simple steps:</p>
<ul>
<li>place the cursor at the location where a special symbol has to be inserted,</li>
<li>place the cursor where a special symbol should be inserted,</li>
<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
<li>
click the <img alt="Symbol table icon" src="../images/vector.png" /> <b>Symbol</b>,
click the <img alt="Insert symbol icon" src="../images/insert_symbol_icon.png" /> <b>Symbol</b>,
<p><img alt="Insert symbol sidebar " src="../images/insert_symbol_window.png" /></p>
</li>
<li>The <b>Symbol</b> dialog box appears from which you can select the appropriate symbol,</li>
<li>The <b>Symbol</b> dialog box will appear, and you will be able to select the required symbol,</li>
<li>
<p>use the <b>Range</b> section to quickly find the necessary symbol. All symbols are divided into specific groups, for example, select 'Currency Symbols' if you want to insert a currency character.</p>
<p>If this character is not in the set, select a different font. Many of them also have characters that differ from the standard set.</p>
<p>Or, enter the Unicode hex value of the symbol you want into the <b>Unicode hex value field</b>. This code can be found in the <b>Character map</b>.</p>
<p>Or, enter the Unicode hex value of the required symbol into the <b>Unicode hex value field</b>. This code can be found in the <b>Character map</b>.</p>
<p>You can also use the <b>Special characters</b> tab to choose a special character from the list.</p>
<p><img alt="Insert symbol sidebar " src="../images/insert_symbol_window2.png" /></p>
<p>Previously used symbols are also displayed in the <b>Recently used symbols</b> field,</p>
<p>The previously used symbols are also displayed in the <b>Recently used symbols</b> field,</p>
</li>
<li>click <b>Insert</b>. The selected character will be added to the presentation.</li>
</ul>
@ -43,7 +43,7 @@
<h2>Insert symbols using Unicode table</h2>
<p>Additional characters and symbols might also be found via Windows symbol table. To open this table, do one of the following:</p>
<ul>
<li>in the Search field write 'Character table' and open it,</li>
<li>in the Search field, write 'Character table' and open it,</li>
<li>
simultaneously press Win + R, and then in the following window type <code>charmap.exe</code> and click OK.
<p><img alt="Insert symbol windpow" src="../images/insert_symbols_windows.png" /></p>

38
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertTables.htm
View file

@ -15,36 +15,36 @@
</div>
<h1>Insert and format tables</h1>
<h3>Insert a table</h3>
<p>To insert a table onto a slide,</p>
<p>To insert a table into a slide,</p>
<ol>
<li>select the slide where a table will be added,</li>
<li>select the slide where a table should be added,</li>
<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
<li>click the <img alt="Table icon" src="../images/inserttable.png" /> <b>Table</b> icon at the top toolbar,</li>
<li>select the option to create a table:
<li>click the <img alt="Table icon" src="../images/inserttable.png" /> <b>Table</b> icon on the top toolbar,</li>
<li>select one of the following options to create a table:
<ul>
<li><p>either a table with predefined number of cells (10 by 8 cells maximum)</p>
<li><p>either a table with a predefined number of cells (10 x 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></li>
<p>In case you need more than a 10 x 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></li>
</ul>
</li>
<li>once the table is added you can change its properties and position.</li>
<li>once the table is added, you can change its properties and position.</li>
</ol>
<p>You can also add a table into a text placeholder pressing the <img alt="Table icon" src="../images/placeholder_table.png" /> <b>Table</b> icon within it and selecting the necessary number of cells or using the <b>Insert Custom Table</b> option:</p>
<p>You can also add a table into a text placeholder by pressing the <img alt="Table icon" src="../images/placeholder_table.png" /> <b>Table</b> icon within it and selecting the necessary number of cells or using the <b>Insert Custom Table</b> option:</p>
<p><img alt="Add table to placeholder" src="../images/placeholder_object.png" /></p>
<p>To resize a table, drag the handles <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges until the table reaches the necessary size.</p>
<p><img alt="Resize table" src="../images/resizetable.png" /></p>
<p>You can also manually change the width of a certain column or the height of a row. Move the mouse cursor over the right border of the column so that the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing column width" src="../images/changecolumnwidth.png" /> and drag the border to the left or right to set the necessary width. To change the height of a single row manually, move the mouse cursor over the bottom border of the row until the cursor turns into the bidirectional arrow <img alt="Mouse Cursor when changing row height" src="../images/changerowheight.png" /> and drag it up or down.</p>
<p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">table position</a> on the slide dragging it vertically or horizontally.</p>
<p>You can specify the <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">table position</a> on the slide by dragging it vertically or horizontally.</p>
<p class="note">
<b>Note</b>: to move around in a table you can use <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithtables" onclick="onhyperlinkclick(this)">keyboard shortcuts</a>.
<b>Note</b>: to move around in a table, you can use <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithtables" onclick="onhyperlinkclick(this)">keyboard shortcuts</a>.
</p>
<p>It's also possible to add a table to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
<hr />
<h3>Adjust table settings</h3>
<img class="floatleft"alt="Table settings tab" src="../images/tablesettingstab.png" />
<p>Most of the table properties as well as its structure can be altered using the right sidebar. To activate it click the table and choose the <b>Table settings</b> <img alt="Table settings icon" src="../images/table_settings_icon.png" /> icon on the right.</p>
<p>The <b>Rows</b> and <b>Columns</b> sections on the top allow you to emphasize certain rows/columns applying a specific formatting to them, or highlight different rows/columns with the different background colors to clearly distinguish them. The following options are available:</p>
<p>Most of the table properties as well as its structure can be altered by using the right sidebar. To activate it, click the table and choose the <b>Table settings</b> <img alt="Table settings icon" src="../images/table_settings_icon.png" /> icon on the right.</p>
<p>The <b>Rows</b> and <b>Columns</b> sections on the top allow you to emphasize certain rows/columns by applying a specific formatting to them, or highlight different rows/columns with different background colors to clearly distinguish them. The following options are available:</p>
<ul style="margin-left: 280px;">
<li><b>Header</b> - emphasizes the topmost row in the table with special formatting.</li>
<li><b>Total</b> - emphasizes the bottommost row in the table with special formatting.</li>
@ -56,9 +56,9 @@
<p>The <b>Select From Template</b> section allows you to choose one of the predefined tables styles. Each template combines certain formatting parameters, such as a background color, border style, row/column banding etc.
Depending on the options checked in the <b>Rows</b> and/or <b>Columns</b> sections above, the templates set will be displayed differently. For example, if you've checked the <b>Header</b> option in the <b>Rows</b> section and the <b>Banded</b> option in the <b>Columns</b> section, the displayed templates list will include only templates with the header row and banded columns enabled:</p>
<p><img alt="Templates list" src="../images/templateslist.png" /></p>
<p>The <b>Borders Style</b> section allows you to change the applied formatting that corresponds to the selected template. You can select the entire table or a certain cells range you want to change the formatting for and set all the parameters manually.</p>
<p>The <b>Borders Style</b> section allows you to change the applied formatting that corresponds to the selected template. You can select the entire table or a certain cell range and set all the parameters manually.</p>
<ul>
<li><b>Border</b> parameters - set the border width using the <img alt="Border Size list" src="../images/bordersize.png" /> list (or choose the <b>No borders</b> option), select its <b>Color</b> in the available palettes and determine the way it will be displayed in the cells clicking on the icons:
<li><b>Border</b> parameters - set the border width using the <img alt="Border Size list" src="../images/bordersize.png" /> list (or choose the <b>No borders</b> option), select its <b>Color</b> in the available palettes and determine the way it will be displayed in the cells when clicking on the icons:
<p><img alt="Border Type icons" src="../images/bordertype.png" /></p>
</li>
<li><b>Background color</b> - select the color for the background within the selected cells.</li>
@ -75,20 +75,20 @@
</li>
</ul>
<p class="note"><b>Note</b>: the options of the <b>Rows & Columns</b> section are also accessible from the <b>right-click menu</b>.</p>
<p>The <b>Cell Size</b> section is used to adjust the width and height of the currently selected cell. In this section, you can also <b>Distribute rows</b> so that all the selected cells have equal height or <b>Distribute columns</b> so that all the selected cells have equal width. The <b>Distribute rows/columns</b> options are also accessible from the <b>right-click menu</b>.</p>
<p>The <b>Cell Size</b> section is used to adjust the width and height of the currently selected cell. In this section, you can also <b>Distribute rows</b> so that all the selected cells are of equal height or <b>Distribute columns</b> so that all the selected cells are of equal width. The <b>Distribute rows/columns</b> options are also accessible from the <b>right-click menu</b>.</p>
<hr />
<h3>Adjust table advanced settings</h3>
<p>To change the advanced table settings, click the table with the right mouse button and select the <b>Table Advanced Settings</b> option from the right-click menu or click the <b>Show advanced settings</b> link at the right sidebar. The table properties window will be opened:</p>
<p>To change the advanced table settings, click the table with the right mouse button and select the <b>Table Advanced Settings</b> option from the right-click menu or click the <b>Show advanced settings</b> link on the right sidebar. The table properties window will be opened:</p>
<p><img alt="Table Properties" src="../images/table_properties.png" /></p>
<p>The <b>Margins</b> tab allows to set the space between the text within the cells and the cell border:</p>
<p>The <b>Margins</b> tab allows setting the space between the text within the cells and the cell border:</p>
<ul>
<li>enter necessary <b>Cell Margins</b> values manually, or</li>
<li>check the <b>Use default margins</b> box to apply the predefined values (if necessary, they can also be adjusted).</li>
</ul>
<p><img alt="Table Properties" src="../images/table_properties1.png" /></p>
<p>The <b>Alternative Text</b> tab allows to specify a <b>Title</b> and <b>Description</b> which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the table.</p>
<p>The <b>Alternative Text</b> tab allows specifying the <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand the contents of the table.</p>
<hr />
<p>To <b>format the entered text</b> within the table cells, you can use <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">icons at the <b>Home</b> tab of the top toolbar</a>. The <b>right-click menu</b> that appears when you click the table with the right mouse button includes two additional options: </p>
<p>To <b>format the entered text</b> within the table cells, you can use <a href="../UsageInstructions/InsertText.htm#formatfont" onclick="onhyperlinkclick(this)">icons on the <b>Home</b> tab of the top toolbar</a>. The <b>right-click menu</b>, which appears when you click the table with the right mouse button, includes two additional options: </p>
<ul>
<li><b>Cell vertical alignment</b> - it allows you to set the preferred type of the text vertical alignment within the selected cells: <b>Align Top</b>, <b>Align Center</b>, or <b>Align Bottom</b>.</li>
<li><b>Hyperlink</b> - it allows you to insert a hyperlink into the selected cell.</li>

94
apps/presentationeditor/main/resources/help/en/UsageInstructions/InsertText.htm
View file

@ -17,14 +17,14 @@
<h3>Insert your text</h3>
<p>You can add a new text in three different ways:</p>
<ul>
<li>Add a text passage within the corresponding text placeholder provided on the slide layout. To do that just put the cursor within the placeholder and type in your text or paste it using the <b>Ctrl+V</b> key combination in place of the according default text.</li>
<li>Add a text passage anywhere on a slide. You can insert a text box (a rectangular frame that allows to enter text within it) or a Text Art object (a text box with a predefined font style and color that allows to apply some text effects). Depending on the necessary text object type you can do the following:
<li>Add a text passage within the corresponding text placeholder on the slide layout. To do that, just put the cursor within the placeholder and type in your text or paste it using the <b>Ctrl+V</b> key combination instead of the default text.</li>
<li>Add a text passage anywhere on a slide. You can insert a text box (a rectangular frame that allows you to enter some text within it) or a Text Art object (a text box with a predefined font style and color that allows you to apply some text effects). Depending on the necessary text object type, you can do the following:
<ul>
<li>
to add a text box, click the <img alt="Text Box icon" src="../images/inserttexticon.png" /> <b>Text Box</b> icon at the <b>Home</b> or <b>Insert</b> tab of the top toolbar, then click where you want to insert the text box, hold the mouse button and drag the text box border to specify its size. When you release the mouse button, the insertion point will appear in the added text box, allowing you to enter your text.
<p class="note"><b>Note</b>: it's also possible to insert a text box by clicking the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon at the top toolbar and selecting the <img alt="Insert Text autoshape" src="../images/text_autoshape.png" /> shape from the <b>Basic Shapes</b> group.</p>
to add a text box, click the <img alt="Text Box icon" src="../images/inserttexticon.png" /> <b>Text Box</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar, then click where you want to insert the text box, hold the mouse button and drag the text box border to specify its size. When you release the mouse button, the insertion point will appear in the added text box, allowing you to enter your text.
<p class="note"><b>Note</b>: it's also possible to insert a text box by clicking the <img alt="Shape icon" src="../images/insertautoshape.png" /> <b>Shape</b> icon on the top toolbar and selecting the <img alt="Insert Text autoshape" src="../images/text_autoshape.png" /> shape from the <b>Basic Shapes</b> group.</p>
</li>
<li>to add a Text Art object, click the <img alt="Text Art icon" src="../images/inserttextarticon.png" /> <b>Text Art</b> icon at the <b>Insert</b> tab of the top toolbar, then click on the desired style template – the Text Art object will be added in the center of the slide. Select the default text within the text box with the mouse and replace it with your own text.</li>
<li>to add a Text Art object, click the <img alt="Text Art icon" src="../images/inserttextarticon.png" /> <b>Text Art</b> icon on the <b>Insert</b> tab of the top toolbar, then click on the desired style template – the Text Art object will be added in the center of the slide. Select the default text within the text box with the mouse and replace it with your own text.</li>
</ul>
</li>
<li>Add a text passage within an autoshape. Select a shape and start typing your text.</li>
@ -32,31 +32,31 @@
<p>Click outside of the text object to apply the changes and return to the slide.</p>
<p>The text within the text object is a part of the latter (when you move or rotate the text object, the text moves or rotates with it).</p>
<p>As an inserted text object represents a rectangular frame (it has invisible text box borders by default) with text in it and this frame is a common autoshape, you can change both the shape and text properties.</p>
<p>To delete the added text object, click on the text box border and press the <b>Delete</b> key on the keyboard. The text within the text box will also be deleted.</p>
<p>To delete the added text object, click on the text box border and press the <b>Delete</b> key. The text within the text box will also be deleted.</p>
<h3>Format a text box</h3>
<p>Select the text box clicking on its border to be able to change its properties. When the text box is selected, its borders are displayed as solid (not dashed) lines.</p>
<p>Select the text box by clicking on its border to change its properties. When the text box is selected, its borders are displayed as solid (not dashed) lines.</p>
<p><img alt="Text box selected" src="../images/textbox_boxselected.png" /></p>
<ul>
<li>to <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">resize, move, rotate</a> the text box use the special handles on the edges of the shape.</li>
<li>to <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">resize, move, rotate</a> the text box, use the special handles on the edges of the shape.</li>
<li>to edit the text box <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">fill</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shapestroke" onclick="onhyperlinkclick(this)">stroke</a>, <b>replace</b> the rectangular box with a different shape, or access the <a href="InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shape advanced settings</a>, click the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> icon on the right sidebar and use the corresponding options.</li>
<li>to <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">align a text box on the slide, rotate or flip it, arrange</a> text boxes as related to other objects, right-click on the text box border and use the contextual menu options.</li>
<li>to create <b>columns of text</b> within the text box, right-click on the text box border, click the <b>Shape Advanced Settings</b> option and switch to the <a href="../UsageInstructions/InsertAutoshapes.htm#columns" onclick="onhyperlinkclick(this)"><b>Columns</b></a> tab in the <b>Shape - Advanced Settings</b> window.</li>
</ul>
<h3 id="formattext">Format the text within the text box</h3>
<p>Click the text within the text box to be able to change its properties. When the text is selected, the text box borders are displayed as dashed lines.</p>
<p>Click the text within the text box to change its properties. When the text is selected, the text box borders are displayed as dashed lines.</p>
<p><img alt="Text selected" src="../images/textbox_textselected.png" /></p>
<p class="note"><b>Note</b>: it's also possible to change text formatting when the text box (not the text itself) is selected. In such a case, any changes will be applied to all the text within the text box. Some font formatting options (font type, size, color and decoration styles) can be applied to a previously selected portion of the text separately.</p>
<p class="note"><b>Note</b>: it's also possible to change text formatting when the text box (not the text itself) is selected. In such a case, any changes will be applied to the whole text within the text box. Some font formatting options (font type, size, color and decoration styles) can be applied to the previously selected part of the text separately.</p>
<p><b>Align your text within the text box</b></p>
<p>The text is aligned horizontally 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>drop-down the <b>Horizontal align</b> <img alt="Horizontal align icon" src="../images/horizontalalign.png" /> list at the <b>Home</b> tab of the top toolbar,</li>
<li>drop-down the <b>Horizontal align</b> <img alt="Horizontal align icon" src="../images/horizontalalign.png" />list on the <b>Home</b> tab of the top toolbar,</li>
<li>select the alignment type you would like to apply:
<ul>
<li>the <b>Align text left</b> option <img alt="Align Left icon" src="../images/alignleft.png" /> allows you to line up your text by the left side of the text box (the right side remains unaligned).</li>
<li>the <b>Align text center</b> option <img alt="Align Center icon" src="../images/aligncenter.png" /> allows you to line up your text by the center of the text box (the right and the left sides remains unaligned).</li>
<li>the <b>Align text right</b> option <img alt="Align Right icon" src="../images/alignright.png" /> allows you to line up your text by the right side of the text box (the left side remains unaligned).</li>
<li>the <b>Justify</b> option <img alt="Justify icon" src="../images/justify.png" /> allows you to line up your text by both the left and the right sides of the text box (additional spacing is added where necessary to keep the alignment).</li>
<li>the <b>Align text left</b> option <img alt="Align Left icon" src="../images/alignleft.png" /> allows you to line up your text on the left side of the text box (the right side remains unaligned).</li>
<li>the <b>Align text center</b> option <img alt="Align Center icon" src="../images/aligncenter.png" /> allows you to line up your text in the center of the text box (the right and the left sides remains unaligned).</li>
<li>the <b>Align text right</b> option <img alt="Align Right icon" src="../images/alignright.png" /> allows you to line up your text on the right side of the text box (the left side remains unaligned).</li>
<li>the <b>Justify</b> option <img alt="Justify icon" src="../images/justify.png" /> allows you to line up your text both on the left and on the right sides of the text box (additional spacing is added where necessary to keep the alignment).</li>
</ul>
</li>
</ol>
@ -64,76 +64,76 @@
<p>The text is aligned vertically in three ways: top, middle or bottom. 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>drop-down the <b>Vertical align</b> <img alt="Vertical align icon" src="../images/verticalalign.png" /> list at the <b>Home</b> tab of the top toolbar,</li>
<li>drop-down the <b>Vertical align</b> <img alt="Vertical align icon" src="../images/verticalalign.png" />list on the <b>Home</b> tab of the top toolbar,</li>
<li>select the alignment type you would like to apply:
<ul>
<li>the <b>Align text to the top</b> option <img alt="Align Top icon" src="../images/aligntop.png" /> allows you to line up your text by the top of the text box.</li>
<li>the <b>Align text to the middle</b> option <img alt="Align Middle icon" src="../images/alignmiddle.png" /> allows you to line up your text by the center of the text box.</li>
<li>the <b>Align text to the bottom</b> option <img alt="Align Bottom icon" src="../images/alignbottom.png" /> allows you to line up your text by the bottom of the text box.</li>
<li>the <b>Align text to the top</b> option <img alt="Align Top icon" src="../images/aligntop.png" /> allows you to line up your text to the top of the text box.</li>
<li>the <b>Align text to the middle</b> option <img alt="Align Middle icon" src="../images/alignmiddle.png" /> allows you to line up your text in the center of the text box.</li>
<li>the <b>Align text to the bottom</b> option <img alt="Align Bottom icon" src="../images/alignbottom.png" /> allows you to line up your text to the bottom of the text box.</li>
</ul>
</li>
</ol>
<hr />
<p><b>Change the text direction</b></p>
<p>To <b>Rotate</b> the text within the text box, right-click the text, select the <b>Text Direction</b> option and then choose one of the available options: <b>Horizontal</b> (is selected by default), <b>Rotate Text Down</b> (sets a vertical direction, from top to bottom) or <b>Rotate Text Up</b> (sets a vertical direction, from bottom to top).</p>
<p>To <b>Rotate</b> the text within the text box, right-click the text, select the <b>Text Direction</b> option and then choose one of the available options: <b>Horizontal</b> (selected by default), <b>Rotate Text Down</b> (used to set a vertical direction, from top to bottom) or <b>Rotate Text Up</b> (used to set a vertical direction, from bottom to top).</p>
<hr />
<p id="formatfont"><b>Adjust font type, size, color and apply decoration styles</b></p>
<p>You can select the font type, its size and color as well as apply various font decoration styles using the corresponding icons situated at the <b>Home</b> tab of the top toolbar.</p>
<p>You can select the font type, its size and color as well as apply various font decoration styles using the corresponding icons situated on the <b>Home</b> tab of 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 presentation, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a> and apply the formatting.</p>
<table>
<tr>
<td width="10%">Font</td>
<td width="15%"><img alt="Font" src="../images/fontfamily.png" /></td>
<td>Is used to select one of the fonts from the list of the available ones. <span class="desktopDocumentFeatures">If a required font is not available in the list, you can download and install it on your operating system, after that the font will be available for use in the <em>desktop version</em>.</span></td>
<td>Used to select one of the fonts from the list of the available ones. <span class="desktopDocumentFeatures">If the required font is not available in the list, you can download and install it on your operating system, and the font will be available for use in the <em>desktop version</em>.</span></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 (the default values are: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 and 96). It's also possible to manually enter a custom value to the font size field and then press <em>Enter</em>.</td>
<td>Used to choose from the preset font size values in the dropdown list (the default values are: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 and 96). It's also possible to manually enter a custom value to the font size field and press <em>Enter</em>.</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 <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">select the color</a>.</td>
<td>Used to change the color of the letters/characters in the text. Click the downward arrow next to the icon to <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">select the color</a>.</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>
<td>Used to make the font bold giving it a heavier appearance.</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>
<td>Used to make the font slightly slanted to the right.</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>
<td>Used to make the text underlined with a 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>
<td>Used to make the text struck out with a 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>
<td>Used to make the text smaller placing it in 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>
<td>Used to make the text smaller placing it in the lower part of the text line, e.g. as in chemical formulas.</td>
</tr>
</table>
<p><b>Set line spacing and change paragraph indents</b></p>
<p>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>You can set the line height for the text lines within the paragraph as well as the margins between the current and the previous or the following paragraph.</p>
<p><img class="floatleft"alt="Text Settings tab" src="../images/textsettingstab.png" /></p>
<p>To do that,</p>
<ol style="margin-left: 280px;">
<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse,</li>
<li>use the corresponding fields of the <img alt="Text settings Icon" src="../images/text_settings_icon.png" /> <b>Text settings</b> tab at the right sidebar to achieve the desired results:
<li>put the cursor within the required paragraph or select several paragraphs with the mouse,</li>
<li>use the corresponding fields of the <img alt="Text settings Icon" src="../images/text_settings_icon.png" /> <b>Text settings</b> tab on 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). You can specify the necessary value in the field on the right.</li>
<li><b>Paragraph Spacing</b> - set the amount of space between paragraphs.
@ -146,12 +146,12 @@
</li>
</ol>
<p class="note"><b>Note</b>: these parameters can also be found in the <a href="../UsageInstructions/InsertText.htm#textadvancedsettings" onclick="onhyperlinkclick(this)"><b>Paragraph - Advanced Settings</b></a> window.</p>
<p>To quickly change the current paragraph line spacing, you can also use the <b>Line spacing</b> <img alt="Line spacing" src="../images/linespacing.png" /> icon at the <b>Home</b> tab of 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>
<p>To change the paragraph offset from the left side of the text box, put the cursor within the paragraph you need, or select several paragraphs with the mouse and use the respective icons at the <b>Home</b> tab of 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>To quickly change the current paragraph line spacing, you can also use the <b>Line spacing</b> <img alt="Line spacing" src="../images/linespacing.png" /> icon on the <b>Home</b> tab of the top toolbar selecting the required value from the list: 1.0, 1.15, 1.5, 2.0, 2.5, or 3.0 lines.</p>
<p>To change the paragraph offset from the left side of the text box, put the cursor within the required paragraph, or select several paragraphs with the mouse and use the respective icons on the <b>Home</b> tab of 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>
<h3 id="textadvancedsettings">Adjust paragraph advanced settings</h3>
<p>To open the <b>Paragraph - Advanced Settings</b> window, right-click the text and choose the <b>Text Advanced Settings</b> option from the menu. It's also possible to put the cursor within the paragraph you need - the <img alt="Text settings Icon" src="../images/text_settings_icon.png" /> <b>Text settings</b> tab will be activated at the right sidebar. Press the <b>Show advanced settings</b> link. The paragraph properties window will be opened:</p>
<p>To open the <b>Paragraph - Advanced Settings</b> window, right-click the text and choose the <b>Text Advanced Settings</b> option from the menu. It's also possible to put the cursor within the required paragraph - the <img alt="Text settings Icon" src="../images/text_settings_icon.png" /> <b>Text settings</b> tab will be activated on the right sidebar. Press the <b>Show advanced settings</b> link. The paragraph properties window will be opened:</p>
<img alt="Paragraph Properties - Indents & Spacing tab" src="../images/textadvancedsettings1.png" />
<p>The <b>Indents & Spacing</b> tab allows to:</p>
<p>The <b>Indents & Spacing</b> tab allows you to:</p>
<ul>
<li>change the <b>alignment</b> type for the paragraph text,</li>
<li>change the paragraph <b>indents</b> as related to <a href="../UsageInstructions/InsertAutoshapes.htm#internalmargins" onclick="onhyperlinkclick(this)">internal margins</a> of the text box,
@ -176,10 +176,10 @@
<img alt="Paragraph Properties - Font tab" src="../images/textadvancedsettings2.png" />
<p>The <b>Font</b> tab contains the following parameters:</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>Strikethrough</b> is used to make the text struck out with a line going through the letters.</li>
<li><b>Double strikethrough</b> is used to make the text struck out with a double line going through the letters.</li>
<li><b>Superscript</b> is used to make the text smaller placing it in the upper part of the text line, e.g. as in fractions.</li>
<li><b>Subscript</b> is used to make the text smaller placing it in 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>Character Spacing</b> is used to set the space between the characters. Increase the default value to apply the <b>Expanded</b> spacing, or decrease the default value to apply the <b>Condensed</b> spacing. Use the arrow buttons or enter the necessary value in the box.
@ -187,23 +187,23 @@
</li>
</ul>
<img alt="Paragraph Properties - Tab tab" src="../images/textadvancedsettings3.png" />
<p>The <b>Tab</b> tab allows to change tab stops i.e. the position the cursor advances to when you press the <b>Tab</b> key on the keyboard.</p>
<p>The <b>Tab</b> tab allows you to change tab stops i.e. the position the cursor advances to when you press the <b>Tab</b> key.</p>
<ul>
<li><b>Default Tab</b> is set at 2.54 cm. You can decrease or increase this value using the arrow buttons or enter the necessary one in the box.</li>
<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.</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> option from the <b>Alignment</b> drop-down list and press the <b>Specify</b> button.
<ul>
<li><b>Left</b> - 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>Left</b> - lines up your text on 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> - centres 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> - 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>
<li><b>Right</b> - lines up your text on 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>
<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>
<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>
<p>To set tab stops you can also use the horizontal ruler:</p>
<p>To set tab stops, you can also use the horizontal ruler:</p>
<ol>
<li>Click the tab selector button <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> in the upper left corner of the working area to choose the necessary tab stop type: <b>Left</b> <img alt="Left Tab Stop button" src="../images/tabstopleft.png" />, <b>Center</b> <img alt="Center Tab Stop button" src="../images/tabstopcenter.png" />, <b>Right</b> <img alt="Right Tab Stop button" src="../images/tabstopright.png" />.</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.
<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>
<p class="note"><b>Note</b>: if you don't see the rulers, switch to the <b>Home</b> tab of the top toolbar, click the <b>View settings</b> <img alt="View settings icon" src="../images/viewsettingsicon.png" /> icon at the upper right corner and uncheck the <b>Hide Rulers</b> option to display them.</p>
</li>

14
apps/presentationeditor/main/resources/help/en/UsageInstructions/ManageSlides.htm
View file

@ -14,19 +14,19 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Manage slides</h1>
<p>By default, a newly created presentation has one blank <em>Title Slide</em>. You can create new slides, copy a slide to be able to paste it to another place in the slide list, duplicate slides, move slides to change their order in the slide list, delete unnecessary slides, mark some slides as hidden. </p>
<p>By default, a newly created presentation has one blank <em>Title Slide</em>. You can create new slides, copy a slide to paste it later to another place in the slide list, duplicate slides, move slides to change their order, delete unnecessary slides and mark some slides as hidden. </p>
<p><b>To create a new <em>Title and Content</em> slide:</b></p>
<ul>
<li>click the <img alt="Add Slide icon" src="../images/addslide.png" /> <b>Add Slide</b> icon at the <b>Home</b> or <b>Insert</b> tab of the top toolbar, or</li>
<li>click the <img alt="Add Slide icon" src="../images/addslide.png" /> <b>Add Slide</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar, or</li>
<li>right-click any slide in the list and select the <b>New Slide</b> option from the contextual menu, or</li>
<li>press the <b>Ctrl+M</b> key combination.</li>
</ul>
<p><b>To create a new slide with a different layout:</b></p>
<ol>
<li>click the arrow next to the <img alt="Add Slide icon" src="../images/addslide.png" /> <b>Add Slide</b> icon at the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>click the arrow next to the <img alt="Add Slide icon" src="../images/addslide.png" /> <b>Add Slide</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>
select a slide with the necessary layout from the menu.
<p class="note"><b>Note</b>: you can change the layout of the added slide anytime. For additional information on how to do that refer to the <a href="../UsageInstructions/SetSlideParameters.htm#changelayout" onclick="onhyperlinkclick(this)">Set slide parameters</a> section.</p>
<p class="note"><b>Note</b>: you can change the layout of the added slide anytime. For additional information on how to do that, please refer to the <a href="../UsageInstructions/SetSlideParameters.htm#changelayout" onclick="onhyperlinkclick(this)">Set slide parameters</a> section.</p>
</li>
</ol>
<p>A new slide will be inserted after the selected one in the list of the existing slides on the left.</p>
@ -40,7 +40,7 @@
<ol>
<li>in the list of the existing slides on the left, select the slide you need to copy,</li>
<li>press the <b>Ctrl+C</b> key combination,</li>
<li>in the slide list, select the slide that the copied one should be pasted after,</li>
<li>in the slide list, select the slide after which the copied slide should be pasted,</li>
<li>press the <b>Ctrl+V</b> key combination.</li>
</ol>
<p><b>To move an existing slide:</b></p>
@ -69,9 +69,9 @@
<p><b>To select several slides:</b></p>
<ol>
<li>hold down the <b>Ctrl</b> key,</li>
<li>select the necessary slides left-clicking them in the list of the existing slides on the left.</li>
<li>select the necessary slides by left-clicking them in the list of the existing slides on the left.</li>
</ol>
<p class="note"><b>Note</b>: all the key combinations that can be used to manage slides are listed at the <a href="../HelpfulHints/KeyboardShortcuts.htm#manageslides" onclick="onhyperlinkclick(this)">Keyboard Shortcuts</a> page.</p>
<p class="note"><b>Note</b>: all the key combinations that can be used to manage slides are listed on the <a href="../HelpfulHints/KeyboardShortcuts.htm#manageslides" onclick="onhyperlinkclick(this)">Keyboard Shortcuts</a> page.</p>
</div>
</body>
</html>

6
apps/presentationeditor/main/resources/help/en/UsageInstructions/ManipulateObjects.htm
View file

@ -24,7 +24,7 @@
<p>To specify the precise width and height of a <b>chart</b>, select it on a slide and use the <b>Size</b> section of the right sidebar that will be activated.</p>
<p>To specify the precise dimensions of an <b>image</b> or <b>autoshape</b>, right-click the necessary object on the slide and select the <b>Image/Shape Advanced Settings</b> option from the menu. Specify necessary values on the <b>Size</b> tab of the <b>Advanced Settings</b> window and press <b>OK</b>.</p>
<h3>Reshape autoshapes</h3>
<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 to adjust some aspects of the shape, for example, the length of the head of an arrow.</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 adjusting some aspects of the shape, for example, the length of the head of an arrow.</p>
<p><img alt="Reshaping autoshape" src="../images/reshaping.png" /></p>
<h3>Move objects</h3>
<p>To alter the <b>autoshape/image/chart/table/text box</b> position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the object. Drag the object to the necessary position without releasing the mouse button.
@ -33,7 +33,7 @@
<p>To specify the precise position of an <b>image</b>, right-click it on a slide and select the <b>Image Advanced Settings</b> option from the menu. Specify necessary values in the <b>Position</b> section of the <b>Advanced Settings</b> window and press <b>OK</b>.</p>
<h3>Rotate objects</h3>
<p>To manually rotate an <b>autoshape/image/text box</b>, 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>
<p>To rotate the object by 90 degrees counterclockwise/clockwise or flip the object horizontally/vertically you can use the <b>Rotation</b> section of the right sidebar that will be activated once you select the necessary object. To open it, click the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> or the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon to the right. Click one of the buttons:</p>
<p>To rotate the object by 90 degrees counterclockwise/clockwise or flip the object horizontally/vertically, you can use the <b>Rotation</b> section of the right sidebar that will be activated once you select the necessary object. To open it, click the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> or the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon to the right. Click one of the buttons:</p>
<ul>
<li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the object by 90 degrees counterclockwise</li>
<li><img alt="Rotate clockwise icon" src="../images/rotateclockwise.png" /> to rotate the object by 90 degrees clockwise</li>
@ -41,7 +41,7 @@
<li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the object vertically (upside down)</li>
</ul>
<p>It's also possible to right-click the object, choose the <b>Rotate</b> option from the contextual menu and then use one of the available rotation options.</p>
<p>To rotate the object by an exactly specified angle, click the <b>Show advanced settings</b> link at the right sidebar and use the <b>Rotation</b> tab of the <b>Advanced Settings</b> window. Specify the necessary value measured in degrees in the <b>Angle</b> field and click <b>OK</b>.</p>
<p>To rotate the object by an exactly specified angle, click the <b>Show advanced settings</b> link on the right sidebar and use the <b>Rotation</b> tab of the <b>Advanced Settings</b> window. Specify the necessary value measured in degrees in the <b>Angle</b> field and click <b>OK</b>.</p>
</div>
</body>

5026
apps/presentationeditor/main/resources/help/en/UsageInstructions/MathAutoCorrect.htm
View file

File diff suppressed because it is too large Load diff

Some files were not shown because too many files have changed in this diff Show more