<p>To add an autoshape in the <ahref="https://www.onlyoffice.com/document-editor.aspx"target="_blank"onclick="onhyperlinkclick(this)"><b>Document Editor</b></a>,</p>
<li>select one of the available autoshape groups: basic shapes, figured arrows, math, charts, stars & ribbons, callouts, buttons, rectangles, lines,</li>
<li>click the necessary autoshape within the selected group,</li>
<li>place the mouse cursor where the shape should be added,</li>
<li>once the autoshape is added, you can change its size, position and properties.
<pclass="note"><b>Note</b>: to add a caption to an autoshape, make sure the required shape is selected on the page and start typing your text. The added text becomes a part of the autoshape (when you move or rotate the shape, the text moves or rotates with it).</p>
<p>It's also possible to add a caption to the autoshape. To learn more on how to work with captions for autoshapes, you can refer to <ahref="../UsageInstructions/AddCaption.htm"onclick="onhyperlinkclick(this)">this article</a>.</p>
<pid ="shape_resize"><imgclass="floatleft"alt="Reshaping autoshape"src="../images/reshaping.png"/>To change the autoshape size, drag small squares <imgalt="Square icon"src="../images/resize_square.png"/> situated on the shape edges. To maintain the original proportions of the selected autoshape while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
<p>When modifying some shapes, for example figured arrows or callouts, the yellow diamond-shaped <imgalt="Yellow diamond icon"src="../images/yellowdiamond.png"/> icon is also available. It allows you to adjust some aspects of the shape, for example, the length of the head of an arrow.</p>
To alter the autoshape position, use the <imgalt="Arrow"src="../images/arrow.png"/> icon that appears after hovering your mouse cursor over the autoshape. Drag the autoshape to the required position without releasing the mouse button.
When you move the autoshape, the guide lines are displayed to help you precisely position the object on the page (if the selected wrapping style is not inline).
To move the autoshape by one-pixel increments, hold down the <b>Ctrl</b> key and use the keybord arrows.
To move the autoshape strictly horizontally/vertically and prevent it from moving in a perpendicular direction, hold down the <b>Shift</b> key when dragging.
<p>To rotate the autoshape, hover the mouse cursor over the rotation handle <imgalt="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>
<b>Note</b>: the list of keyboard shortcuts that can be used when working with objects is available <ahref="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects"onclick="onhyperlinkclick(this)">here</a>.
<li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy the selected text/object and paste the previously cut/copied text passage or object to the current cursor position.</li>
<li><b>Arrange</b> is used to bring the selected autoshape to foreground, send it to background, move forward or backward as well as group or ungroup shapes to perform operations with several of them at once. To learn more on how to arrange objects, please refer to <ahref="../UsageInstructions/AlignArrangeObjects.htm"onclick="onhyperlinkclick(this)">this page</a>.</li>
<li><b>Align</b> is used to align the shape to the left, in the center, to the right, at the top, in the middle, at the bottom. To learn more on how to align objects, please refer to <ahref="../UsageInstructions/AlignArrangeObjects.htm"onclick="onhyperlinkclick(this)">this page</a>.</li>
<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <imgalt="Editing Wrap Boundary"src="../images/wrap_boundary.png"/></li>
<li><b>Rotate</b> is used to rotate the shape by 90 degrees clockwise or counterclockwise as well as to flip the shape horizontally or vertically.</li>
<li><b>Shape Advanced Settings</b> is used to open the 'Shape - Advanced Settings' window.</li>
<p>Some of the autoshape settings can be altered using the <b>Shape settings</b> tab of the right sidebar. To activate it click the shape and choose the <b>Shape settings</b><imgalt="Shape settings icon"src="../images/shape_settings_icon.png"/> icon on the right. Here you can change the following properties:</p>
<pid="color">Click the colored box below and select the necessary color from the available <ahref="../UsageInstructions/ChangeColorScheme.htm"onclick="onhyperlinkclick(this)">color sets</a> or specify any color you like:</p>
<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><imgalt="Shape settings icon"src="../images/shape_settings_icon.png"/> icon to open the <b>Fill</b> menu on the right sidebar:
<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 <imgalt="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 <imgalt="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 theslider bar, and then click<b>Color</b>to choose the color you want.</li>
<li>If you wish to use an image as a background for the shape, you can add an image <b>From File</b> by selecting it on your computer hard disc drive, <b>From URL</b> by inserting the appropriate URL address into the opened window, or <b>From Storage</b> by selecting the required image stored on your portal.</li>
<li>If you wish to use a texture as a background for the shape, open the <b>From Texture</b> menu and select the necessary texture preset.
<p>Currently, the following textures are available: canvas, carton, dark fabric, grain, granite, grey paper, knit, leather, brown paper, papyrus, wood.</p>
</li>
</ul>
<ul>
<li>In case the selected <b>Picture</b> has less or more dimensions than the autoshape has, you can choose the <b>Stretch</b> or <b>Tile</b> setting from the dropdown list.
<p>The <b>Stretch</b> option allows you to adjust the image size to fit the autoshape size so that it could fill the space completely.</p>
<p>The <b>Tile</b> option allows you to display only a part of the bigger image keeping its original dimensions or repeat the smaller image keeping its original dimensions over the autoshape surface so that it could fill the space completely.</p>
<pclass="note"><b>Note</b>: any selected <b>Texture</b> preset fills the space completely, but you can apply the <b>Stretch</b> effect if necessary.</p>
</li>
</ul>
</li>
<li><b>Pattern</b> - select this option to fill the shape with a two-colored design composed of regularly repeated elements.
<li><b>Opacity</b> - use this section to set an <b>Opacity</b> level dragging the slider or entering the percent value manually. The default value is <b>100%</b>. It corresponds to the full opacity. The <b>0%</b> value corresponds to the full transparency.</li>
<li>To change the line width, select one of the available options from the <b>Size</b> dropdown list. The available options are: 0.5 pt, 1 pt, 1.5 pt, 2.25 pt, 3 pt, 4.5 pt, 6 pt. Alternatively, select the <b>No Line</b> option if you don't want to use any line.</li>
<li>To change the line <b>color</b>, click on the colored box below and <ahref="../UsageInstructions/ChangeColorScheme.htm"onclick="onhyperlinkclick(this)">select the necessary color</a>.</li>
<li>To change the line <b>type</b>, select the necessary option from the corresponding dropdown list (a solid line is applied by default, you can change it to one of the available dashed lines).</li>
<li><b>Rotation</b> is used to rotate the shape by 90 degrees clockwise or counterclockwise as well as to flip the shape horizontally or vertically. Click one of the buttons:
<ul>
<li><imgalt="Rotate counterclockwise icon"src="../images/rotatecounterclockwise.png"/> to rotate the shape by 90 degrees counterclockwise</li>
<li><imgalt="Rotate clockwise icon"src="../images/rotateclockwise.png"/> to rotate the shape by 90 degrees clockwise</li>
<li><imgalt="Flip horizontally icon"src="../images/fliplefttoright.png"/> to flip the shape horizontally (left to right)</li>
<li><imgalt="Flip vertically icon"src="../images/flipupsidedown.png"/> to flip the shape vertically (upside down)</li>
<li><b>Wrapping Style</b> - use this section to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
<li><b>Change Autoshape</b> - use this section to replace the current autoshape with another one selected from the dropdown list.</li>
<p>To change the <b>advanced settings</b> of the autoshape, right-click it and select the <b>Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link on the right sidebar. The 'Shape - Advanced Settings' window will open:</p>
<li><b>Absolute</b> - specify an exact value measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified on the <b>File</b> -> <b>Advanced Settings...</b> tab).</li>
<li><b>Relative</b> - specify a percentage <b>relative to</b> the <em>left margin</em> width, the <em>margin</em> (i.e. the distance between the left and right margins), the <em>page</em> width, or the <em>right margin</em> width.</li>
</ul>
</li>
<li><b>Height</b> - use one of these options to change the autoshape height.
<li><b>Absolute</b> - specify an exact value measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified on the <b>File</b> -> <b>Advanced Settings...</b> tab).</li>
<li><b>Relative</b> - specify a percentage <b>relative to</b> the <em>margin</em> (i.e. the distance between the top and bottom margins), the <em>bottom margin</em> height, the <em>page</em> height, or the <em>top margin</em> height.</li>
</ul>
</li>
<li>If the <b>Lock aspect ratio</b> option is checked, the width and height will be changed together preserving the original shape aspect ratio.</li>
<p>The <b>Rotation</b> tab contains the following parameters:</p>
<ul>
<li><b>Angle</b> - use this option to rotate the shape by an exactly specified angle. Enter the necessary value measured in degrees into the field or adjust it using the arrows on the right. </li>
<li><b>Flipped</b> - check the <b>Horizontally</b> box to flip the shape horizontally (left to right) or check the <b>Vertically</b> box to flip the shape vertically (upside down).</li>
<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
<ul>
<li><b>Wrapping Style</b> - use this option to change the way the shape is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
<ul>
<li><p><imgalt="Wrapping Style - Inline"src="../images/wrappingstyle_inline.png"/><b>Inline</b> - the shape is considered to be a part of the text, like a character, so when the text moves, the shape moves as well. In this case the positioning options are inaccessible.</p>
<p>If one of the following styles is selected, the shape can be moved independently of the text and positioned on the page exactly:</p>
</li>
<li><p><imgalt="Wrapping Style - Square"src="../images/wrappingstyle_square.png"/><b>Square</b> - the text wraps the rectangular box that bounds the shape.</p></li>
<li><p><imgalt="Wrapping Style - Tight"src="../images/wrappingstyle_tight.png"/><b>Tight</b> - the text wraps the actual shape edges.</p></li>
<li><p><imgalt="Wrapping Style - Through"src="../images/wrappingstyle_through.png"/><b>Through</b> - the text wraps around the shape edges and fills in the open white space within the shape. So that the effect can appear, use the <b>Edit Wrap Boundary</b> option from the right-click menu.</p></li>
<li><p><imgalt="Wrapping Style - Top and bottom"src="../images/wrappingstyle_topandbottom.png"/><b>Top and bottom</b> - the text is only above and below the shape.</p></li>
<li><p><imgalt="Wrapping Style - In front"src="../images/wrappingstyle_infront.png"/><b>In front</b> - the shape overlaps the text.</p></li>
<p>If you select the square, tight, through, or top and bottom styles, you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
<p>The <b>Position</b> tab is available only if the selected wrapping style is not inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
<li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified on the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>to the right of</b> character, column, left margin, margin, page or right margin,</li>
<li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified on the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>below</b> line, margin, bottom margin, paragraph, page or top margin,</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 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>
<li><b>Miter</b> - the corner will be pointed. It goes well to shapes with sharp angles.</li>
</ul>
<pclass="note"><b>Note</b>: the effect will be more noticeable if you use a large outline width.</p>
<li><b>Arrows</b> - this option group is available if a shape from the <b>Lines</b> shape group is selected. It allows setting the arrow <b>Start</b> and <b>End Style</b> and <b>Size</b> by selecting the appropriate option from the dropdown lists.</li>
<p>The <b>Text Padding</b> tab allows changing the <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> internal margins of the autoshape (i.e. the distance between the text within the shape and the autoshape borders).</p>
<p>The <b>Alternative Text</b> tab allows specifying a <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand what information the shape contains.</p>
