githubEdit

✏️Inline Text

Style inline text spans within paragraphs in Webstudio.

See MDN: <span>arrow-up-right

Webstudio provides several components for inline text formatting within paragraphs and other text containers.

Overview

Inline formatting components allow you to style specific portions of text without affecting the entire text block. These components are typically used within Paragraph, Text, or Heading components.

Components

Span

The <span> element is a generic inline container for styling text.

Use cases:

  • Apply custom colors to specific words

  • Add backgrounds to highlighted text

  • Apply multiple styles to a text portion

Properties:

Property
Type
Description

id

string

Unique identifier

class

string

CSS class names

Bold

The <strong> element indicates text with strong importance.

Use cases:

  • Important warnings or key terms

  • Emphasize critical information

  • Highlight product names or features

Properties:

Property
Type
Description

id

string

Unique identifier

class

string

CSS class names

Note: Bold has semantic meaning for screen readers. Use it for important content, not just visual styling.

Italic

The <em> element indicates emphasized text.

Use cases:

  • Technical terms on first use

  • Titles of works (books, movies)

  • Foreign words or phrases

  • Emphasis in speech

Properties:

Property
Type
Description

id

string

Unique identifier

class

string

CSS class names

Superscript

The <sup> element displays text slightly above the normal line.

Use cases:

  • Footnote referencesΒΉ

  • Mathematical exponents (xΒ²)

  • Trademark symbols (β„’)

  • Ordinal indicators (1st, 2nd)

Properties:

Property
Type
Description

id

string

Unique identifier

class

string

CSS class names

Subscript

The <sub> element displays text slightly below the normal line.

Use cases:

  • Chemical formulas (Hβ‚‚O)

  • Mathematical subscripts

  • Footnotes (in some styles)

Properties:

Property
Type
Description

id

string

Unique identifier

class

string

CSS class names

Using Rich Text Editing

The easiest way to apply inline formatting is through rich text editing:

  1. Double-click on a text component to enter edit mode

  2. Select the text you want to format

  3. Use the formatting toolbar:

    • B for Bold

    • I for Italic

    • Link icon for hyperlinks

For Superscript and Subscript, you'll need to add the component manually and position it within your text.

Styling Tips

Custom Highlights

Gradient Text

Apply a gradient to text using Span:

  1. Add Span around text

  2. Set background to gradient

  3. Add -webkit-background-clip: text

  4. Set color to transparent

Multiple Styles

Nest formatting components for combined effects:

Accessibility Considerations

  1. Use semantic elements: Bold (<strong>) conveys importance to screen readers

  2. Don't rely on color alone: Add additional indicators for important information

  3. Maintain contrast: Styled text should still be readable

  4. Use sparingly: Too much formatting reduces readability

Last updated

Was this helpful?