Text Align

Designing for readability across infinite screen-sizes often times requires setting elements to have different text-alignments across breakpoints.

These are simple utilities for setting text-alignment to the left, right, or center of an element.

Examples

<p class="tl">Aligned Left</p>

Aligned Left

<p class="tr">Aligned Right</p>

Aligned Right

<p class="tc">Aligned Center</p>

Aligned to the center

<p class="tj">Justified Alignment</p>

justified—text is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as fully justified or full justification;

Reference

MDN - Text Align

tachyons-text-align

v3.0.4 145 B
Declarations
12
Selectors
12
Max. Specificity Score
10
Size of Avg. Rule
1
src/_text-align.css

/*

  TEXT ALIGN
  Docs: http://tachyons.io/docs/typography/text-align/

  Base
    t = text-align

  Modifiers
    l = left
    r = right
    c = center
    j = justify

  Media Query Extensions:
    -ns = not-small
    -m  = medium
    -l  = large

*/

.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }
.tj  { text-align: justify; }

@media (--breakpoint-not-small) {
  .tl-ns  { text-align: left; }
  .tr-ns  { text-align: right; }
  .tc-ns  { text-align: center; }
  .tj-ns  { text-align: justify; }
}

@media (--breakpoint-medium) {
  .tl-m  { text-align: left; }
  .tr-m  { text-align: right; }
  .tc-m  { text-align: center; }
  .tj-m  { text-align: justify; }
}

@media (--breakpoint-large) {
  .tl-l  { text-align: left; }
  .tr-l  { text-align: right; }
  .tc-l  { text-align: center; }
  .tj-l  { text-align: justify; }
}