web-apps/apps/presentationeditor/main/resources/help/en/UsageInstructions/AlignArrangeObjects.htm

<!DOCTYPE html>
<html>
	<head>
		<title>Align and arrange objects on a slide</title>
		<meta charset="utf-8" />
		<meta name="description" content="Align and arrange text boxes, autoshapes, images and charts on a slide." />
		<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>Align and arrange objects on a slide</h1>
			<p>In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, 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 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>                    
                </ul>
            </li>
            <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 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>
        <p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available alignment options.</p>
        <p>If you want to align a single object, it can be aligned relative to the edges of the slide. The <b>Align to Slide</b> option is selected by default in this case.</p>
        <h3>Distribute objects</h3>
        <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</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>
                </ul>
            </li>
            <li>
                Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon once again and select the necessary distribution type from the list:
                <ul>
                    <li><b>Distribute Horizontally</b> <img alt="Distribute Horizontally icon" src="../images/distributehorizontally.png" /> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the slide<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
                    <li><b>Distribute Vertically</b> <img alt="Distribute Vertically icon" src="../images/distributevertically.png" /> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the slide<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
                </ul>
            </li>
        </ol>
        <p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available distribution options.</p>
        <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 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 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 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) 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>
	</body>
</html>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+								<!DOCTYPE html>
 								<html>
 									<head>
 										<title>Align and arrange objects on a slide</title>
 										<meta charset="utf-8" />
 										<meta name="description" content="Align and arrange text boxes, autoshapes, images and charts on a slide." />
 										<link type="text/css" rel="stylesheet" href="../editor.css" />
-												Added search to the documentation for all editors

											
										
										
											2018-01-12 14:52:45 +00:00
+								        <script type="text/javascript" src="../callback.js"></script>
 								        <script type="text/javascript" src="../search/js/page-search.js"></script>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+									</head>
 									<body>
 										<div class="mainpart">
-												Added search to the documentation for all editors

											
										
										
											2018-01-12 14:52:45 +00:00
+								        <div class="search-field">
-												[DE][PE][SSE] replaced type="search" with type="text" for all the pages of documentation (Chrome search field cross bug)

											
										
										
											2018-03-07 08:47:00 +00:00
+								            <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
-												Added search to the documentation for all editors

											
										
										
											2018-01-12 14:52:45 +00:00
+								        </div>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+											<h1>Align and arrange objects on a slide</h1>
-												[PE] Update help

											
										
										
											2021-04-30 14:19:11 +00:00
+											<p>In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, 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>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
 								        <h3>Align objects</h3>
 								        <p>To <b>align</b> <em>two or more</em> selected objects, </p>
 								        <ol>
 								            <li>
-												Update help

											
										
										
											2020-11-13 13:35:26 +00:00
+								                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:
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								                <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>
 								                </ul>
 								            </li>
 								            <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>
-												Update help

											
										
										
											2020-11-13 13:35:26 +00:00
+								                    <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>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								                </ul>
 								            </li>
 								        </ol>
 								        <p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available alignment options.</p>
 								        <p>If you want to align a single object, it can be aligned relative to the edges of the slide. The <b>Align to Slide</b> option is selected by default in this case.</p>
 								        <h3>Distribute objects</h3>
 								        <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>
-												Update help

											
										
										
											2020-11-13 13:35:26 +00:00
+								                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:
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								                <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>
 								                </ul>
 								            </li>
 								            <li>
 								                Click the <b>Align shape</b> <img alt="Align shape icon" src="../images/alignshape.png" /> icon once again and select the necessary distribution type from the list:
 								                <ul>
 								                    <li><b>Distribute Horizontally</b> <img alt="Distribute Horizontally icon" src="../images/distributehorizontally.png" /> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the slide<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
 								                    <li><b>Distribute Vertically</b> <img alt="Distribute Vertically icon" src="../images/distributevertically.png" /> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the slide<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
 								                </ul>
 								            </li>
 								        </ol>
 								        <p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available distribution options.</p>
 								        <p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
 								        <h3>Group objects</h3>
-												Update help

											
										
										
											2020-11-13 13:35:26 +00:00
+								        <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>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								        <ul>
-												Update help

											
										
										
											2020-11-13 13:35:26 +00:00
+								            <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>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								        </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>
-												Update help

											
										
										
											2020-11-13 13:35:26 +00:00
+								        <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>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								        <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>
-												Update help

											
										
										
											2020-11-13 13:35:26 +00:00
+								            <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>
-												[DE][PE][SSE] Updates to the documentation for version 5.3 release

											
										
										
											2019-05-15 11:40:18 +00:00
+								        </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>
-												webapps added

											
										
										
											2016-03-11 00:48:53 +00:00
+									</body>
 								</html>