{"id":6503,"date":"2024-04-14T18:34:19","date_gmt":"2024-04-14T10:34:19","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6503"},"modified":"2024-04-14T18:34:19","modified_gmt":"2024-04-14T10:34:19","slug":"text-styling","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/text-styling\/","title":{"rendered":"Text Styling"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Options for styling inline text allow you to customize specific parts of the text differently from the rest. By selecting text within a paragraph or heading, you can apply enhancements such as bolding, italicizing, linking, or styling that particular text segment.<\/p>\n<h2>Steps to Apply Text Formats<\/h2>\n<p>To style inline text, simply highlight a portion of text within a text element. A text formatting toolbar will then appear above the selected text, offering various options:<\/p>\n<ul role=\"list\">\n<li>Strong<\/li>\n<li>Emphasize<\/li>\n<li>Superscript<\/li>\n<li>Subscript<\/li>\n<li>Insert hyperlink<\/li>\n<li>Embed within span<\/li>\n<li>Reset format<\/li>\n<\/ul>\n<p>Click on the desired formatting option(s) within the text formatting toolbar to implement them on the highlighted text.<\/p>\n<h6><strong>Note:<\/strong> The rich text feature includes a distinct inline text formatting toolbar.<\/h6>\n<h2>Customizing Inline Text<\/h2>\n<p>When applying any inline text formatting, a nested element is created within the primary text element. You can further style these nested elements using the Style panel.<\/p>\n<p>You have the flexibility to apply multiple text formats to the same selection. For instance, you can simultaneously make a word bold and italic. As you adjust and incorporate these style attributes, the text remains inline within the main text element.<\/p>\n<h3>Styling Bold and Italic Text<\/h3>\n<p>Designating text as <strong>bold<\/strong> applies a default bold font style. While you can customize this nested element by defining a class, you may opt to style the <strong>All Bolds<\/strong> tag to set the default appearance of all bold text throughout your website.<\/p>\n<p>To style the All Bolds tag:<\/p>\n<ol role=\"list\">\n<li>Select the <strong>bold text<\/strong> element<\/li>\n<li>Access the <strong>Style Panel<\/strong><\/li>\n<li>Enter the <strong>Selector field<\/strong><\/li>\n<li>Choose the <strong>All Bolds<\/strong> tag<\/li>\n<li>Fine-tune the styling<\/li>\n<\/ol>\n<p>Assigning text as <strong>italic<\/strong> imparts an italicized style. Similarly, you can style this nested element using a class, or opt to style the <strong>All Italics<\/strong> tag to define the default appearance of all italic text on your site.<\/p>\n<p>To style the All Italics tag:<\/p>\n<ol role=\"list\">\n<li>Select the <strong>italic text<\/strong> element<\/li>\n<li>Access the <strong>Style Panel<\/strong><\/li>\n<li>Enter the <strong>Selector field<\/strong><\/li>\n<li>Choose the <strong>All Italics<\/strong> tag<\/li>\n<li>Adjust the styling<\/li>\n<\/ol>\n<h6><strong>Nice to know:<\/strong> If your font lacks bold or italic versions, the browser generates substitutes which may not render accurately.<\/h6>\n<h3>Implementing Superscript or Subscript Text<\/h3>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-video\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/-mB5buZL_KY\" title=\"Introducing superscript and subscript in the Webflow Designer - Micro lesson #31\"><\/iframe><\/div>\n<\/figure>\n<h6><strong>Important Tip:<\/strong> Screen readers do not explicitly announce superscript or subscript characters. To enhance usability and facilitate screen reader differentiation, include descriptive text visible to screen readers through ARIA attributes. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Attributes\/aria-label\">Explore ARIA attributes further.<\/a><\/h6>\n<p>Designating text as <strong>superscript<\/strong> raises the text half a character above the normal line, portraying it in a smaller font size. You can customize this nested element with a class, or prefer styling the <strong>All Superscripts<\/strong> tag to alter the default appearance of all superscript text on your site.<\/p>\n<p>To style the All Superscripts tag:<\/p>\n<ol role=\"list\">\n<li>Select the <strong>Superscript<\/strong> text element<\/li>\n<li>Access the <strong>Style Panel<\/strong><\/li>\n<li>Enter the <strong>Selector field<\/strong><\/li>\n<li>Choose the <strong>All Superscripts<\/strong> tag<\/li>\n<li>Adjust the styling<\/li>\n<\/ol>\n<p>Designating text as <strong>subscript<\/strong> lowers the text half a character below the normal line, rendering it in a smaller font. You can style this nested element with a class, or choose to style the <strong>All Subscripts<\/strong> tag to customize the default appearance of all subscript text on your site.<\/p>\n<p>To style the All Subscripts tag:<\/p>\n<ol role=\"list\">\n<li>Select the <strong>Subscript<\/strong> text element<\/li>\n<li>Access the <strong>Style Panel<\/strong><\/li>\n<li>Enter the <strong>Selector field<\/strong><\/li>\n<li>Choose the <strong>All Subscripts<\/strong> tag<\/li>\n<li>Adjust the styling<\/li>\n<\/ol>\n<h3>Inserting an Inline Hyperlink<\/h3>\n<p><strong>Insert Link<\/strong> converts the selection into a hyperlink. You can then configure the link settings for this selection from the Element settings panel. By default, the link inherits its styles from the All Links tag. Learn more about styling tags.<\/p>\n<h3>Enclosing Text in Span for Further Styling<\/h3>\n<p>You can utilize inline styles to swiftly apply bold, italic, supscript, or subscript without additional styling. However, for additional text enhancements like underlining or creating a highlighted effect with a background, you can utilize the <strong>Wrap with span<\/strong> feature to wrap the selected text in an element that&#8217;s customizable using Style panel properties. You can also create a class and apply it to multiple span elements.<\/p>\n<h4>Illustrative Example &#8211; Underlined Text<\/h4>\n<p>Typically, you would modify the text decoration property of a chosen word or phrase within a paragraph to underline it:<\/p>\n<ol role=\"list\">\n<li>Double-click the paragraph to edit<\/li>\n<li>Select the desired text to underline<\/li>\n<li>Choose the <strong>Wrap with Span<\/strong> option<\/li>\n<li>Verify the <strong>text span<\/strong> selection<\/li>\n<li>Add the underline text decoration in the Style panel<\/li>\n<\/ol>\n<h3>Clearing Formatting<\/h3>\n<p>To eliminate any custom formats:<\/p>\n<ol role=\"list\">\n<li>Double-click the text element<\/li>\n<li>Select the formatted text<\/li>\n<li>Click <strong>Clear formatting<\/strong><\/li>\n<\/ol>\n<p>You have the flexibility to clear formatting from individual text portions or select the entire paragraph to remove all formatting with a single click. This action removes inline styles, spans, and links.<\/p>\n<h2>Non-Breaking Space<\/h2>\n<p>When working with paragraphs, you may encounter situations where a single word remains on the last line. By utilizing a non-breaking space, you can connect words while preserving the space, preventing word wrap. To insert a non-breaking space, press <strong>Shift<\/strong> + <strong>space<\/strong> between words that you wish to keep together.<\/p>\n<blockquote><p><strong>Important:<\/strong> Exercise caution when using manual line breaks or non-breaking spaces. While they may resolve text layout issues on larger screens, they could create problems on smaller screens.<\/p><\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Style any part of a text differently from the rest of the text with Inline text formatting.","protected":false},"author":2,"featured_media":5178,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6503","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6503"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6503\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5158"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}