CSS Text Align Start and End

Today I learned about two experimental values for the CSS property text-align.

The rules

  • text-align: start;
    The same as left if direction is left-to-right and right if direction is right-to-left.
  • text-align: end;
    The same as right if direction is left-to-right and left if direction is right-to-left.

What makes these rules helpful is that you don’t need to specify left or right alignment which helps with internationalization. Content with adjust automatically to users’ language preferences that are RTL or LTR.

Browser support for these values is pretty high, missing only IE and Opera.

Bonus

Today I also learned that text-align is actually a shorthand property for text-align-all and text-align-last properties.

Sources

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
https://drafts.csswg.org/css-text-3/#text-align-property
https://drafts.csswg.org/css-text-3/#text-align-all-property
https://drafts.csswg.org/css-text-3/#text-align-last-property

posted in: Front End Development, Today I Learned
tagged:

Comments are closed