Text SPAN Formatting 🧪

Add Highlighting, Code and other styles to your Rich Text Elements

Webflow's rich text element does not offer a span styling for text, which severly limits the options for custom text formatting. When you want to be able to highlight text or display a piece of code, you're forced to find other options.

Currently one approach we use often is to repurpose the Superscript & Subscript styling that often are not needed in a typical blog.

Currently this can be done in the designer, but we're considering SA5 features to expand on this;

Under Consideration

Goals;

• Repurpose Webflow's <sup> and <sub> in rich text elements, for other purposes.

• Make the in-designer experience WYSIWYG

OPTION 1

CSS approach;

Normalize sub, still is a <sub> element, but it no longer descends. Same approach for sup.

[wfu-richtext-...] sub {
    font-size: inherit;
    position: inherit;
}

Can target specific RTE's through attributes;

[wfu-richtext-sub]

[wfu-richtext-sup]

color: #ff9cb5; 
background-color: #404047;
border-radius: 2px;
padding-left: 0.2rem;
padding-right: 0.2rem;
font-family: Roboto Mono, sans-serif;
font-size: 16px;
position: static;

OPTION 2

Convert element to <span>.