WeasySuite - 7.1 Text Alignment: the ‘text-align’ property

Chapter 7 - Alignment and Justification - 7.1 Text Alignment: the ‘text-align’ property

Go to the relevant page of the specification.

text-align-end-001: text-align: end, direction: rtl
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-002: text-align: end, direction: ltr
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-003: text-align: end, dir=rtl
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-004: text-align: end, dir=ltr
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-005: text-align: end, direction: rtl
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-006: text-align: end, direction: ltr
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-007: text-align: end, dir=rtl
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
text-align-end-008: text-align: end, dir=ltr
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
text-align-end-009: text-align: end, dir=auto, RTL first strong
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is auto and first strong character is rtl.
text-align-end-010: text-align: end, dir=auto, LTR first strong
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is auto and first strong character is ltr.
text-align-end-014: text-align: end, pre, dir=rtl inherited
text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.
text-align-end-015: text-align: end, pre, dir=ltr inherited
text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.
text-align-end-016: text-align: end, pre, dir=auto
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is auto and first strong character is ltr, and left when first strong is rtl.
text-align-end-017: text-align: end, pre, dir=auto on surrounding block
text-align:end aligns inline-level content to the end edge of the line box – ie. since dir=auto is not inherited by pre, to right in ltr context.
text-align-end-018: text-align: end, textarea, dir=rtl inherited
text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.
text-align-end-019: text-align: end, textarea, dir=ltr inherited
text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.
text-align-end-020: text-align: end, textarea dir=auto on control
text-align:end aligns inline-level content to the end edge of the line box – ie. when dir=auto on textarea, right when first strong is ltr, left when rtl.
text-align-end-021: text-align: end, textarea, dir=auto on surrounding block
text-align:end aligns inline-level content to the end edge of the line box – ie. since dir=auto is not inherited by textarea, to right in ltr context.
text-align-justify-001: text-align: justify, direction: rtl
text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the right.
text-align-justify-002: text-align: justify, direction: ltr
text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the left.
text-align-justify-003: text-align: justify, dir=rtl
text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the right.
text-align-justify-004: text-align: justify, dir=ltr
text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the left.
text-align-justify-005: text-align: justify, dir=auto, RTL first strong
text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the right.
text-align-justify-006: text-align: justify, dir=auto, LTR first strong
text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the left.
text-align-justifyall-001: text-align: justify-all, direction: rtl
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-002: text-align: justify-all, direction: ltr
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-003: text-align: justify-all, dir=rtl
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-004: text-align: justify-all, dir=ltr
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-005: text-align: justify-all, dir=auto, RTL first strong
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-justifyall-006: text-align: justify-all, dir=auto, LTR first strong
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
text-align-match-parent-01: CSS Text: text-align: match-parent
Text checks that an element with text-align: match-parent inherits its parent's value and calculates 'start' and 'end' with respect to its parent's direction
text-align-match-parent-02 (dom): CSS Text: text-align: match-parent
Text checks that an element with text-align: match-parent still aligns correctly if the parent's dir attribute is changed
text-align-match-parent-03 (dom): CSS Text: text-align: match-parent
Text checks that an element whose text-align property is changed to match-parent aligns correctly
text-align-match-parent-04 (dom): CSS Text: text-align: match-parent
Text checks that an element with text-align: match-parent still aligns correctly if the parent's width is changed
text-align-match-parent-root-ltr: CSS Text: text-align: match-parent
Text checks that text-align: match-parent on a root element with dir=ltr is equivalent to text-align: start
text-align-match-parent-root-rtl: CSS Text: text-align: match-parent
Text checks that text-align: match-parent on a root element with dir=rtl is equivalent to text-align: start
text-align-start-001: text-align: start, direction: rtl
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-002: text-align: start, direction: ltr
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-003: text-align: start, dir=rtl
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-004: text-align: start, dir=ltr
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-005: text-align: start, direction: rtl
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-006: text-align: start, direction: ltr
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-007: text-align: start, dir=rtl
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
text-align-start-008: text-align: start, dir=ltr
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
text-align-start-009: text-align: start, dir=auto, RTL first strong
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is auto and first strong character is rtl.
text-align-start-010: text-align: start, dir=auto, LTR first strong
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is auto and first strong character is ltr.
text-align-start-014: text-align: start, pre, dir=rtl inherited
text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.
text-align-start-015: text-align: start, pre, dir=ltr inherited
text-align:start aligns inline-level content to the start edge of the line box – ie. left when base direction is ltr.
text-align-start-016: text-align: start, pre, dir=auto
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is auto and first strong character is ltr, and right when first strong is rtl.
text-align-start-017: text-align: start, pre, dir=auto on surrounding block
text-align:start aligns inline-level content to the start edge of the line box – ie. since dir=auto is not inherited by pre, to left in ltr context.
text-align-start-018: text-align: start, textarea, dir=rtl inherited
text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.
text-align-start-019: text-align: start, textarea, dir=ltr inherited
text-align:start aligns inline-level content to the start edge of the line box – ie. left when base direction is ltr.
text-align-start-020: text-align: start, textarea dir=auto on control
text-align:start aligns inline-level content to the start edge of the line box – ie. when dir=auto on textarea, left when first strong is ltr, right when rtl.
text-align-start-021: text-align: start, textarea, dir=auto on surrounding block
text-align:start aligns inline-level content to the start edge of the line box – ie. since dir=auto is not inherited by textarea, to left in ltr context.
text-justify-001: text-justify: none
text-justify:none means justification is disabled: there are no justification opportunities within the text.
text-justify-002: text-justify: inter-character
text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units.
text-justify-003: text-justify: distribute
text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.
text-justify-004: text-justify: inter-character, arabic
text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units. Justification must not introduce gaps between the joined typographic letter units of cursive scripts such as Arabic.
text-justify-005: text-justify: distribute, arabic
text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units. Justification must not introduce gaps between the joined typographic letter units of cursive scripts such as Arabic.
text-align-006: text-align - start (basic)
The 'text-align' property set to 'start' on a block element aligns the text to the start edge.
text-align-007: text-align - end (basic)
The 'text-align' property set to 'end' on a block element aligns the text to the end edge.
text-align-008: text-align - match-parent (basic)
The 'text-align' property set to 'match-parent' on a block element behaves the same as 'inherit'.