logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 1.14 - Text Spacing

A developer created a caption that is positioned on the bottom center of an image. What they failed to account for is that some people prefer to use custom letter and word spacing to improve their reading experience.

Try to set the following css to see the failure:

.caption { letter-spacing: 0.12rem; word-spacing: 0.16rem; }

Requirements

Pending requirement:

The text must not be clipped or overlapped. The text must stay positioned inside and at the bottom of the image. Using text-overflow: ellipsis should be avoided for labels!

Pending requirement:

The look must not change on the default letter/word spacing. Make sure that the height starts from 24 pixels and that you have removed the letter-spacing and word-spacing css that you used to see the issue.

Need help?

Show me the solution

Learning Material

logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 1.14 - Text Spacing

A developer created a caption that is positioned on the bottom center of an image. What they failed to account for is that some people prefer to use custom letter and word spacing to improve their reading experience.

Try to set the following css to see the failure:

.caption { letter-spacing: 0.12rem; word-spacing: 0.16rem; }

Requirements

Pending requirement:

The text must not be clipped or overlapped. The text must stay positioned inside and at the bottom of the image. Using text-overflow: ellipsis should be avoided for labels!

Pending requirement:

The look must not change on the default letter/word spacing. Make sure that the height starts from 24 pixels and that you have removed the letter-spacing and word-spacing css that you used to see the issue.

Need help?

Show me the solution

Learning Material

Editor

Preview Page