Customising Text Component Styles

All Canvasflow text components are designed to be fully customised to ensure you can match your exact style requirements. 

To edit a text component

1. Navigate to your chosen style via the Style Manager (Alternatively, select 'Edit' from the style drop down within the Article Manager)

2. Click on any text component you wish to change to view the component properties 

   

• Font Families
  • The Family section provides a way to specify the font family for different text types - Bold, Italic, and BoldItalic.
  • For example, a Subtitle component in ‘Style 1’ can be set to ‘Roboto-Thin’, but if that text is bolded within the Article Editor, you can choose for it to use ‘Roboto-Bold’.
  • The purpose of this functionality is to avoid faux browser styles which can have trouble being displayed on some browsers and devices. Faux Browser Styles are when browsers try to emulate bold and italic from the original font, despite not having access to the Bold or Italic versions of the font family. It’s recommended that whenever possible, text components within styles are fully configured to make use of the Bold, Italic and BoldItalic font family fields.
• Basic Formatting
  • Colour: The colour of the text
  • BG Enabled & Background Colour: Add a background to the text
  • Size: Font size in px
  • Line height: Dictates the vertical padding between lines of text.
  • Letter Spacing: Change spacing between individually letters.
  • Indent: Add an Indent to the text component at the start of each paragraph
  • Alignment: Left, Center, Right, or Justify alignment
  • Case: Default, Capitalise, Uppercase, Lowercase
• Weight & Emphasis
  • Bold: Faux Bold
  • Italic: Faux Italic
  • Underline
• Spacing
  • Margin Top: The size of the margin under each text line
  • Margin Bottom: The size of the margin under each text line
  • Padding Top: The size of the padding above each component
  • Padding Bottom: The size of the padding underneath each component
  • Padding Left: The size of the padding to the left of each component
  • Padding Right: The size of the padding to the right of each component
• Border
  • Style
  • Position
  • Width

When making changes to Styles, sliders can be double-clicked to manually enter numeric values