Text alignment

Text alignment utilities that respect document direction (LTR/RTL).

Quick reference

Class	Styles
`af-text-center`	center align
`af-text-start`	start align (LTR/RTL aware)
`af-text-end`	end align (LTR/RTL aware)

Examples

Start/end alignment

Start aligned

End aligned

<div style="display:grid; gap: var(--af-space-2);">
  <p class="af-text-start">
    Start aligned
  </p>
  <p class="af-text-end">
    End aligned
  </p>
</div>

Available classes

af-text-center – Center alignment
af-text-start – Start alignment (RTL-safe)
af-text-end – End alignment (RTL-safe)

Why `start`/`end`?

Automatically respects [dir="ltr"] and [dir="rtl"]
start = left in LTR, right in RTL
end = right in LTR, left in RTL
No JavaScript needed
Standards-compliant

Responsive variants

All alignment utilities support responsive variants using the @{bp} suffix:

af-text-center@{bp}
af-text-start@{bp}
af-text-end@{bp}

See Responsive Suffix for syntax and breakpoints.

Text style