---
description: All about text formatting, links and anchors.
---

# Text editing

## Working with text in Setka Editor

In Setka Editor, the text is divided into paragraphs. Rather than working with single lines of text, formatting is applied to the whole paragraph. To change several paragraphs at the same time, hold CMD or CTRL and click on desired paragraphs to select multiple. Changes made will be applied to these paragraphs.

### Adding a paragraph

SHIFT+ENTER shortcut creates a new line in the same paragraph. It can be convenient when you are typing content in the Setka Editor rather than copying it from other sources. When inserting large pieces of text, the Editor will break it up into paragraphs.

#### Quick add

If you need to add a paragraph above or below the [grid](grid-modules), the **Quick add** menu can be used. To open it, hover the mouse above the grid and click the **+** button. The purple line above or below the grid will demonstrate where the new paragraph would be placed:

![Adding a paragraph via Quick add menu](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MLOEPbfEK4119w2ROYc%2Fuploads%2FRVt94apvLqTq0pPYuJIU%2FSetka-Editor-Interface-Quick-Add-Paragraph.png?alt=media\&token=716d4f1c-aaa4-486c-9995-0355badf49aa)

Please learn more about working with text in Setka Editor in this short video:

{% embed url="https://drive.google.com/file/d/1-jX8swlkg75aq8Qruhvy7yh_XpU82BHe/view?usp=sharing" %}
Video tutorial on how to work with text in Setka Editor
{% endembed %}

## Text formatting <a href="#h_8c5eb313-9a8a-43d3-b629-36bda13e50be" id="h_8c5eb313-9a8a-43d3-b629-36bda13e50be"></a>

In Setka Editor, you apply formatting and all keyboard shortcuts to the whole paragraph. However, you can also edit words and lines of text in the paragraph separately. For example, you can set words or lines as italic or bold and add anchors and links. You can see these options in the **Selection** tab in the Upper Toolbar as soon as you highlight a piece of text.

![Selection tab in the Upper Toolbar in Setka Editor](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQPHdmZEqbyS-Rlpofj%2F-MQPIpzIJJbVR9f-1aKr%2FSetka-Selection-Tab-Upper-Toolbar.png?alt=media\&token=b778f57c-82ad-40e7-8a0f-eb3d73d90651)

## How to delete a line? <a href="#h_301016df-a7ba-460e-b02c-871cb6ae8f42" id="h_301016df-a7ba-460e-b02c-871cb6ae8f42"></a>

Select some text or an element and press backspace to delete. Right-click inside the post and select **Delete paragraph** or **Delete grid** to remove larger elements.

## Switching text formats <a href="#h_7c1a4077-732f-46c5-874f-b4a836a5c559" id="h_7c1a4077-732f-46c5-874f-b4a836a5c559"></a>

Click inside a paragraph. You will see the **Format** option in the **Paragraph** tab. These text styles are selected in the [**Content Design System Manager (CDSM**).](../content-design-system-manager)

## Selecting multiple paragraphs <a href="#h_4d9a69a1-9d4c-487b-8a77-1020aa1b293d" id="h_4d9a69a1-9d4c-487b-8a77-1020aa1b293d"></a>

Hold CMD or CTRL and click the desired paragraphs. You can then apply the same changes to multiple paragraphs.&#x20;

If you need to select the whole content of the article, press CMD/CTRL+SHIFT+A.

You can also select elements by dragging a mouse via [multiselect](../drag-and-drop-experience#multiselect).

{% embed url="https://drive.google.com/file/d/1-_tC323Lx7nG71UgagKa2srGMV4TFZz-/view?usp=sharing" %}
Video tutorial on how to select and edit multiple paragraphs
{% endembed %}

## Aligning text <a href="#h_31807ab1-248e-4656-a600-96475fb66f1e" id="h_31807ab1-248e-4656-a600-96475fb66f1e"></a>

Click inside a paragraph. You will see text alignment options in the **Paragraph** tab in the Upper Toolbar: in the center, to the left or right, or by post width.

![Paragraph tab in Upper Toolbar in Setka Editor with Text Alignmnet options](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQPHdmZEqbyS-Rlpofj%2F-MQPM8dJPxFMHAK7sYdd%2FSetka-Editor-Text-Alignment-Options-Upper-Toolbar.png?alt=media\&token=b88451be-d348-4403-af96-9ce6c079ef62)

### Why justified layout is not available?

As you can see, there is no justified alignment option. We've decided not to add this option for the following  reasons:

#### 1. Justified layout might create a visual mess inside  text blocks

There are plenty of text alignment tools in the press: hyphenation, word spacing, wide and narrow font options, etc. Layouts with justified alignment look good only when it is made by hand by a professional typesetter. In the case of web pages, an uncontrolled increase in the width of spaces occurs.

#### 2. Justified layouts are bad for readability

Justified text is harder to read. The eye is constantly forced to seek out the beginning of the next word and rearrange perception from row to row due to different-sized spaces.

#### 3. Incompatibility with mobile devices

Such layout directly contradicts the requirements of mobile devices, for which the shorter the line, the better.

## Adjusting indentations <a href="#h_af79bdfd-d483-416a-9c6b-aa071977a071" id="h_af79bdfd-d483-416a-9c6b-aa071977a071"></a>

Click inside the paragraph and select the bottom indentation in pixels (px) in the **Paragraph** tab. You can also use CMD/CTRL+↑/↓ shortcut. Indent values are divisible by the line-height parameter of the font you are using to maintain the post’s layout.

### Changing internal indentations <a href="#h_3bbc676d-20b9-47cc-a48f-25eaa6496023" id="h_3bbc676d-20b9-47cc-a48f-25eaa6496023"></a>

Internal indentations are margins at the top and bottom of a paragraph. Click inside the paragraph and select inner indent in pixels (px) in the **Paragraph** tab of the Upper Toolbar to alter these margins.

![Bottom and Inner indents settings in the Paragraph tab in the Upper Toolbar in Setka Editor](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQPHdmZEqbyS-Rlpofj%2F-MQPOBzoGfzNNDhBYPmH%2FSetka-Paragraph-Tab-Upper-Toolbar-Indents.png?alt=media\&token=598542f8-01f5-42a6-883c-6750fb64b0c4)

## Text color <a href="#h_ad5421a1-f64e-4e27-bdfe-af058ebb23a3" id="h_ad5421a1-f64e-4e27-bdfe-af058ebb23a3"></a>

To change the color or the text, click inside the paragraph, and select the color in the **Paragraph** tab in the Upper Toolbar. You set these colors in the [Content Design System Manager (CDSM)](../content-design-system-manager).

### Is there a way to set different colors for individual words? <a href="#h_5eb6e681-71ec-46ca-9161-7524e6846a53" id="h_5eb6e681-71ec-46ca-9161-7524e6846a53"></a>

No, you can only select a color for the whole paragraph. This was a conscious decision made by our designers to ensure the readability of your posts.&#x20;

## Icons <a href="#h_45c5c261-347b-4eb0-9aac-ff4c7a7d7876" id="h_45c5c261-347b-4eb0-9aac-ff4c7a7d7876"></a>

To add icons, click <img src="https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQJ9Ty0Vnzc1m8opbO2%2F-MQJXJcDfK0dYnw1IJvg%2FSetka-Editor-Inline-Icons-Icon.png?alt=media&#x26;token=212cdb7f-dd28-4943-be6f-718534b2529c" alt="" data-size="line"> on the Side Toolbar. All icons and emojis added in your Style are displayed here.&#x20;

![Icons & emoji in the Side Toolbar in Setka Editor](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQJ9Ty0Vnzc1m8opbO2%2F-MQJXmAyHI8yKDFtEARH%2FSetka-Editor-Adding-Inline-Icons.png?alt=media\&token=98369150-dee2-4454-8d5b-b0353bad044c)

{% hint style="info" %}
Icons are scaled automatically according to the line height of the text next to which they are inserted.
{% endhint %}

{% content-ref url="icons" %}
[icons](icons)
{% endcontent-ref %}

## Adding anchors <a href="#h_82288425-b81f-4224-8514-34f89832a810" id="h_82288425-b81f-4224-8514-34f89832a810"></a>

An anchor provides an internal link or bookmark to another part of your post. They can be useful when creating tables of content for longer posts.

To create an anchor, click inside the paragraph (the paragraph where the anchor link needs to lead), select the **Anchor** option in the **Paragraph** tab of the Upper Toolbar, and give the anchor a name.

To reach this anchor from another part of your post, highlight the text element to add a link to and select the **Anchor name** in the **Selection** tab of the Upper Toolbar. This will add the link to the anchor. When the content is published, you can click this text or element, and it will take you directly to the part of the post where the anchor was applied.&#x20;

{% embed url="https://drive.google.com/file/d/1-a8QevUV0s5q0yRgZ9TsR7MWY708Hhwu/view?usp=sharing" %}
Video tutorial on how to create an anchor in Setka Editor&#x20;
{% endembed %}

You can always test the anchor link in the **Post preview** mode (you can activate it in the Side Toolbar or by pressing the TAB key).&#x20;

### How to make scrolling to anchors smooth? <a href="#h_663052df-2f53-4a09-9e30-e808b99b8607" id="h_663052df-2f53-4a09-9e30-e808b99b8607"></a>

By default, clicking on an anchor instantly takes you to the dedicated paragraph in the text. It is possible to turn this transition into a smooth scroll. Just add this code in the Custom CSS section on your style settings.

```css
@at-root {
      html, body { scroll-behavior: smooth; }
    }
```

{% hint style="warning" %}
**Please note** that some browsers [do not support](https://caniuse.com/#feat=css-scroll-behavior) smooth scrolling.&#x20;
{% endhint %}

### How to add a table of contents? <a href="#h_f1d2bf2e-4d7b-49c0-b95c-b769bd2ec1bf" id="h_f1d2bf2e-4d7b-49c0-b95c-b769bd2ec1bf"></a>

If you are making a long post with multiple sections, you can add navigation for them. Add a table of contents before your article and assign an anchor for each header as described [above](#h_82288425-b81f-4224-8514-34f89832a810).

## Links <a href="#h_f9124348-eed3-4dcf-b190-d73471bd63ee" id="h_f9124348-eed3-4dcf-b190-d73471bd63ee"></a>

Highlight a word or a text fragment. In the **Selection** tab of the Upper Toolbar, insert the link into the **Link** field.

{% embed url="https://drive.google.com/file/d/1-aKl7SY5pBihRO-IPFt8g0iSBDq49nah/view?usp=sharing" %}
Video tutorial on how to add a link in Setka Editor interface
{% endembed %}

