Customising Text Component Styles

All Canvasflow 'Text Components' are designed to be fully customisable to ensure you can meet 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 dropdown within 'Article Manager')

   

2. Click on any text component you wish to change to view its '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 'Article Editor', instead you can force the use of ‘Roboto-Bold’.

    

  • The purpose of this functionality is to avoid the use of faux browser styles which can have display issues on some browsers and devices, creating problems with readability. Faux browser styles are utilised when the device in question does not have access to the official bold or italic versions of the font family. Instead the browser will attempt to emulate these from the original font. To avoid poor reproduction of fonts in cases such as this it’s recommended that whenever possible, text components within styles are configured to use the font family's official Bold, Italic and BoldItalic.
• Basic Formatting
  • Colour: The colour of 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 individual letters.
  • Indent: Add an Indent to the text component at the start of each paragraph.
  • Alignment: Left, Centre, Right, or Justified alignment.
  • Case: Default, Capitalise, Uppercase or Lowercase.
• Weight & Emphasis
  • Bold: Faux bold.
  • Italic: Faux italic.
  • Underline: Adds an underline to the selected or forthcoming text.
• Spacing
  • Margin Top: The amount of the margin under each text line.
  • Margin Bottom: The amount of the margin under each text line.
  • Padding Top: The amount of the padding above each component.
  • Padding Bottom: The amount of the padding underneath each component.
  • Padding Left: The amount of padding to the left of each component.
  • Padding Right: The amount of padding to the right of each component.
• Border
  • Style: Select the style of border.
  • Position: Reposition the border.
  • Width: Specify the border's width in px.