# Formatting Text

This section explains how to **format and style text elements** in Page Designer.\
You can adjust font appearance, alignment, spacing, and layout for individual text blocks.

> To change text styles **globally across the entire web page**, please refer to\
> **Font Sets and Font Styles**.

***

### Accessing Text Formatting Options

1. **Click the text element** you want to format on the design canvas.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FQvhBQvKXoX9gdntjCTzf%2F0?alt=media" alt=""><figcaption></figcaption></figure>

2. The **Text Style Options** panel opens on the **left‑side menu**.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FjiwVyuqTnQKLXvoY98C1%2Fformattext1.png?alt=media&#x26;token=84007a4e-cdca-4878-8f9b-7c98a285382a" alt=""><figcaption></figcaption></figure>

From this panel, you can modify text appearance using several formatting tools.

***

### Text Formatting Options

#### 1️–3️ Formatting Tools

Used to adjust the **font family**, **font size**, and **font shade (weight)** of the text.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FEuDgAgaUXZYkyIsN6i50%2FFormatting%20Tools.png?alt=media&#x26;token=f87632bb-f2e7-4f5b-8c6a-39194ad6f827" alt=""><figcaption></figcaption></figure>

***

#### 4️–5️ Styling Tools

Used to apply text styling options:

* **Italic**
* **Underline**
* **Strike‑through**
* Text case formats:
  * Uppercase
  * Start Case
  * Lowercase

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F4nrOXcMAlTkQunFjXRm9%2FStyling%20Tool.png?alt=media&#x26;token=89f0795f-d31a-4cc0-839f-3913edaba217" alt=""><figcaption></figcaption></figure>

***

#### 6️–8️ Text Alignment & Layout

Used to control **text alignment and layout behavior** inside the text box.

**6️ Text Indent**

Indent the text content relative to the text box.

Example: Text Indent set to **60%**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FbrldqtaIHseBpLzEtOLf%2Ftextindent.png?alt=media&#x26;token=37594b70-960f-411f-b5e6-9a687952c875" alt=""><figcaption></figcaption></figure>

***

**7️ Text Column**

Split text into multiple columns.

Example: Text Column set to **4 columns**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FbyTXamuuwKSMsxB6i9cx%2Ftextcolumn.png?alt=media&#x26;token=bb96e127-78d4-486e-8572-3a335c765081" alt=""><figcaption></figcaption></figure>

***

**8️ Text Alignment**

Align text content inside the text box.

Example: Text Alignment set to **Center**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FPD3gK6SqZKAfEuHcC2Jz%2Fsetalignment.png?alt=media&#x26;token=de05f0d1-afd8-4c42-8be5-a7cb46a86681" alt=""><figcaption></figcaption></figure>

***

#### 9️ Text Color

Used to change the **color of the text**.

Example: Text color set to **Blue**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F53kEUvjrfFqXIyekzCV2%2Ftextcolor.png?alt=media&#x26;token=a07be422-b69a-4256-a446-a16ca4b1b524" alt=""><figcaption></figcaption></figure>

***

#### 10 Text Style

Choose the semantic style of the text element, such as:

* Header (Level 1–6)
* Paragraph (Normal text)
* Label

***

#### 11 White‑Space

Controls how white space is handled in the text.

* **Normal** – Collapses consecutive white spaces
* **Nowrap** – Collapses white space and disables line wrapping

***

#### 12 Truncate

Controls **line truncation** when text exceeds available space.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FFbGvYPgzdAOXfZyJPXFW%2Fwhite-space.png?alt=media&#x26;token=25e7fe4c-19ea-488d-9c8e-7c9609080f7f" alt=""><figcaption></figcaption></figure>

***

### Text Box Measurement

You can also adjust the **width and height** of the text box containing the text to better control layout and spacing.

***

### Note

The same formatting options apply to all text‑based elements, including:

* Paragraphs
* Headings
* Labels

***

### Summary

Page Designer provides a comprehensive set of tools for formatting text:

* Font, size, color, and style
* Alignment and layout control
* Column and indentation support
* Text overflow and white‑space behavior

These tools allow you to create **visually consistent, readable, and responsive text layouts** across your pages.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/designer-reference/page-designer/page-designer-tools/generic-tools/formatting-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.