Summarized test results:
CSS3 Text, text-align, text-align-last, text-justify

Intended audience: users, XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who wants to know whether text-align works as specified.

Updated

These tests check whether user agents correctly apply text-align, text-align-last, and text-justify to various writing systems per the CSS-text-3 spec.

Results

To see the test, click on the link in the left-most column. To see detailed results for a single test, click on the link in the Details column and look just above the table. You need the Ahem font to run many of these tests.

The detailed results show the date(s) the test result was recorded, and the version of the browser tested. Notes below the table will usually provide any additional useful information, including an explanation of why a result was marked as 'partially successful'.

Note that these test results are for released versions of the browsers tested. Versions that are still in development may provide better support for these features. The tests do not use any vendor prefixes.


text-align: start

Test link Assertion Detail
start, direction: rtl
text-align-start-001.html
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
start, direction: ltr
text-align-start-002.html
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
start, dir=rtl
text-align-start-003.html
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
start, dir=ltr
text-align-start-004.html
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
start, direction: rtl
text-align-start-005.html
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
start, direction: ltr
text-align-start-006.html
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
start, dir=rtl
text-align-start-007.html
text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.
start, dir=ltr
text-align-start-008.html
text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.
start, dir=auto, RTL first strong
text-align-start-009.html
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.
start, dir=auto, LTR first strong
text-align-start-010.html
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.
start, pre, dir=rtl inherited
text-align-start-014.html
text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.
start, pre, dir=ltr inherited
text-align-start-015.html
text-align:start aligns inline-level content to the start edge of the line box – ie. left when base direction is ltr.
start, pre, dir=auto
text-align-start-016.html
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.
start, pre, dir=auto on surrounding block
text-align-start-017.html
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.
start, textarea, dir=rtl inherited
text-align-start-018.html
text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.
start, textarea, dir=ltr inherited
text-align-start-019.html
text-align:start aligns inline-level content to the start edge of the line box – ie. left when base direction is ltr.
start, textarea dir=auto on control
text-align-start-020.html
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.
start, textarea, dir=auto on surrounding block
text-align-start-021.html
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.

Notes

  1. text-align-start-009, 010, 016, 017, 020 and 021 rely on UA support of dir=auto and first-strong direction detection in order to establish the start of the line. These are the tests failed by IE.

text-align: end

Test link Assertion Detail
end, direction: rtl
text-align-end-001.html
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
end, direction: ltr
text-align-end-002.html
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
end, dir=rtl
text-align-end-003.html
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
end, dir=ltr
text-align-end-004.html
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
end, direction: rtl
text-align-end-005.html
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
end, direction: ltr
text-align-end-006.html
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
end, dir=rtl
text-align-end-007.html
text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.
end, dir=ltr
text-align-end-008.html
text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.
end, dir=auto, RTL first strong
text-align-end-009.html
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.
end, dir=auto, LTR first strong
text-align-end-010.html
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.
end, pre, dir=rtl inherited
text-align-end-014.html
text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.
end, pre, dir=ltr inherited
text-align-end-015.html
text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.
end, pre, dir=auto
text-align-end-016.html
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.
end, pre, dir=auto on surrounding block
text-align-end-017.html
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.
end, textarea, dir=rtl inherited
text-align-end-018.html
text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.
end, textarea, dir=ltr inherited
text-align-end-019.html
text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.
end, textarea dir=auto on control
text-align-end-020.html
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.
end, textarea, dir=auto on surrounding block
text-align-end-021.html
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.

Notes

  1. text-align-end-009, 010, 016, 017, 020 and 021 rely on UA support of dir=auto and first-strong direction detection in order to establish the start of the line. These are among the tests failed by IE.

text-align: justify

Test link Assertion Detail
justify, direction: rtl
text-align-justify-001.html
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.
justify, direction: ltr
text-align-justify-002.html
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.
justify, dir=rtl
text-align-justify-003.html
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.
justify, dir=ltr
text-align-justify-004.html
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.
justify, dir=auto, RTL first strong
text-align-justify-005.html
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.
justify, dir=auto, LTR first strong
text-align-justify-006.html
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.

Notes

  1. text-align-justify-005 and 006 rely on UA support of dir=auto and first-strong direction detection in order to establish the start of the line. These are the tests failed by IE

text-align: justify-all

Test link Assertion Detail
justify-all, direction: rtl
text-align-justifyall-001.html
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
justify-all, direction: ltr
text-align-justifyall-002.html
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
justify-all, dir=rtl
text-align-justifyall-003.html
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
justify-all, dir=ltr
text-align-justifyall-004.html
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
justify-all, dir=auto, RTL first strong
text-align-justifyall-005.html
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.
justify-all, dir=auto, LTR first strong
text-align-justifyall-006.html
text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.

Notes

  1. text-align-justifyall-005 and 006 rely on UA support of dir=auto and first-strong direction detection in order to establish the start of the line.

text-align-last

Test link Assertion Detail
text-align-last - start (basic)
text-align-last-001.html
The 'text-align-last' property set to 'start' on a block element aligns the last line text to the start edge.
text-align-last - end (basic)
text-align-last-002.html
The 'text-align-last' property set to 'right' on a block element aligns the last line text to the end edge.
text-align-last - left (basic)
text-align-last-003.html
The 'text-align-last' property set to 'left' on a block element aligns the last line text to the left.
text-align-last - right (basic)
text-align-last-004.html
The 'text-align-last' property set to 'right' on a block element aligns the last line text to the right.
text-align-last - center (basic)
text-align-last-005.html
The 'text-align-last' property set to 'center' on a block element aligns the last line text to the center.
text-align-last - justify (basic)
text-align-last-006.html
The 'text-align-last' property set to 'justify' on a block element aligns the last line text to
text-align-last - auto and text-align - right
text-align-last-007.html
The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right
text-align-last - auto and text-align - end
text-align-last-008.html
The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right
text-align-last - auto and text-align - center
text-align-last-009.html
The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the center
text-align-last - right(one line inside block element)
text-align-last-010.html
The 'text-align-last' property set to 'right' on a block element aligns the only one line text to the right.
text-align-last - end(one line inside block element)
text-align-last-011.html
The 'text-align-last' property set to 'end' on a block element aligns the only one line text to the right.
text-align-last - center(one line inside block element)
text-align-last-012.html
The 'text-align-last' property set to 'center' on a block element aligns the only one line text to the center.
text-align-last applied to "display: inline" div element
text-align-last-013.html
Test checks that the 'text-align-last' property is invalid if the container element is not block element.
text-align-last applied to "display: block" span element
text-align-last-014.html
Test checks that the 'text-align-last' property is valid if the span element set 'display: block'.

Notes

  1. These tests were not produced by the i18n WG.

text-justify

Test link Assertion Detail
none
text-justify-001.html
text-justify:none means justification is disabled: there are no justification opportunities within the text.
inter-character
text-justify-002.html
text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units.
distribute
text-justify-003.html
text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.
inter-character, arabic
text-justify-004.html
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.
distribute, arabic
text-justify-005.html
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.