Language selection

Search

Alignment

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to align text to the left, centre or right. Or, use to align a block of content or an image to the centre.

Design and coding

Basic use

Left aligned text

Use to align text to the left.

Appearance

(Content goes here)

Correct use

Compliance point(s):

  • Apply .text-left to an element to left align the text within it
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use to align non-text information
Code
<p class="text-left">...</p>

Centre aligned text

Use to align text to the centre.

Appearance

(Content goes here)

Correct use

Compliance point(s):

  • Apply .text-center to an element to centre align the text within it
  • Apply, if required, to table data cells to mimic accounting tables
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Avoid unless it adds value to the content.

    Centered and right aligned text both have a “ragged” left edged which has been shown to impede reading speed and comprehension. The straight (or “hard”) left edge and ragged right edge combination of standard left aligned text performs best for readers because it helps the eye find the start of the next line when it leaves the end of the last one.

Code
<p class="text-center">...</p>

Centre content blocks

Use to centre the block as a whole, including the text. Center block takes a fixed width element, and applies an equal left and right margin, thus centering the content.

Appearance
A generic square placeholder image with rounded corners
Correct use

Compliance point(s):

  • Apply .center-block to a fixed width block element to center align it
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Avoid unless it adds value to the content.

    Centered and right aligned text both have a “ragged” left edged which has been shown to impede reading speed and comprehension. The straight (or “hard”) left edge and ragged right edge combination of standard left aligned text performs best for readers because it helps the eye find the start of the next line when it leaves the end of the last one.

Code
<img class="center-block" alt="..." src="x.jpg" />

Use to align text to the right.

Appearance

(Content goes here)

Correct use

Compliance point(s):

  • Apply .text-right to an element to right align the text within it
  • Apply, if required, to table data cells to mimic accounting tables
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Avoid unless it adds value to the content.

    Centered and right aligned text both have a “ragged” left edged which has been shown to impede reading speed and comprehension. The straight (or “hard”) left edge and ragged right edge combination of standard left aligned text performs best for readers because it helps the eye find the start of the next line when it leaves the end of the last one.

Code
<p class="text-right">...</p>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: