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 Family

The 'Font 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.

• Normal: Specify your font family's default typeface.
• Bold: Specify your font family's bold typeface.
• Italic: Specify your font family's italic typeface.
• Bolditalic: Specify your font family's bolditalic typeface.
• Colour

Colours can be selected in several different ways. Either visually by means of the slider and swatch window, using the eyedropper tool to select a colour currently visible anywhere on your display or by entering RBG / HSL values. You may also enter a valid colour hex code.

• Colour: Specify the colour of text.
• Background: Specify a background colour for the text if required.
• Basic Formatting
  • Size: Font size in pt or em.
  • Line Height: Dictates the vertical padding between lines of text in either %, px or pt.
  • Spacing: in either px, pt or %.
  • Letter Spacing: Specify the spacing between individual letters in either em,px, pt or %.
  • Indent: Add an Indent to the text component at the start of each paragraph.
  • Width: Adjust the text width as a %.
  • Text Align: Set Left, Centre, Right, or Justify alignment.
  • Content Align: Set Left orCentrealignment
  • Case: Choose from, Default, Capitalise, UPPERCASE or lowercase.
  • Display: Block, Inline, Inline Blockor Hidden.
• Weight & Emphasis
  • Bold: Faux bold.
  • Italic: Faux italic.
  • Underline: Adds an underline to text components of the selected category.
  • Underline Colour: Specify an underline colour if you require it to be different from that of the associated text.
• Apple News
  • Column Start: Type a numerical value or use the up/down arrows to specify
  • Column Span: Type a numerical value or use the up/down arrows to specify
• Margin
  • Margin Top: The amount of the margin under each text line.
  • Margin Bottom: The amount of the margin under each text line.
• Padding
  • Padding Top: The amount of padding above each component in either px, pt or %.
  • Padding Bottom: The amount of padding underneath each component in either px, pt or %.
  • Padding Left: The amount of padding to the left of each component in either px, pt or %.
  • Padding Right: The amount of padding to the right of each component in either px, pt or %.
• Border
  • Style: Select the style of border, such as Solid, Dashed, Dotted.
  • Position: Specify where the border should appear around the selected component. For example, All, Right, Top & Bottom, etc, etc.
  • Width: Specify the border's width in px or pt.
  • Radius: If you require the border to have a radius at its edges, you can set the required amount in either px or pt .
  • Radius Position: Define which edges of the border have the radius set above applied to them. The default is All , but you may set a particular area as required.
  • Colour: Specify the border colour in several different ways. Either visually by means of the slider and swatch window, using the eyedropper tool to select a colour currently visible anywhere on your display or by entering RBG / HSL values. You may also enter a valid colour hex code.
• Links
  • Text: Specify the colour hyperlinks in this text component will appear in.
  • Bold: Toggle if hyperlinks displayed in this text component should appear in bold.
  • Italic: Toggle if hyperlinks displayed in this text component should appear in italic. If both options are enabled, hyperlinks will appear in bolditalic.
  • Underline: Specify the colour underlined hyperlinks in this text component will appear in.
  • Background: Specify the background colour of hyperlinks in this text component will appear in.
  • Style: Define how hyperlinks displayed in this text component should appear. Choose from Noneor Underline.
• Drop Cap Formatting
  • Normal: Specify the typeface to be used for any drop caps which appear in this text component.
  • Size: Specify the size in em or pt of any drop caps which appear in this text component.
  • Line Height: px, pt or %.
  • Number of Chars: Specify the size of any drop caps in this text component relative to
  • Number of Lines: Specify the size of any drop caps in this text component relative to the number of lines of surrounding text.
  • Number of Raised Lines:
  • Colour: If you require drop cap(s) in this text component to be a different colour than the default, specify it here.
  • Background: Specify the background colour of any drop caps which appear in this text component.
• Drop Cap Margin: Define the size of margins this text component uses when it contains drop caps. Adjust 'Top', 'Bottom', Right', 'Left' padding by px, pt or %.
• Drop Cap Padding: Define the size of padding this text component uses when it contains drop caps. Adjust 'Right' and / or 'Bottom' padding by px, pt or %.
• Text Shadow
  • Text Shadow: Toggle whether text in this text component appears with a shadow. Choose from Noneor Enabled.
  • Colour: If enabled, specify the colour of text shadows in this text component.