WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: text content displayed vertically

for

From: Jukka K. Korpela
Date: Dec 13, 2012 2:49PM

2012-12-13 23:17, Keith Parks wrote:

> Seems like you could accomplish the vertically-stacked display
> through CSS applied to a regular string of text, which would
> read normally through a screen reader.

Yes, that's possible, though perhaps a little kludgy. The code could be
something like this:

<style>
.vertical {
width: 0.9em;
word-break: break-all;
text-transform: uppercase;
text-align: center;
line-height: 1;
}
</style>
<p class=vertical>access</p>

There might be better ways. This way has the problem that the width
needs to be selected well, depending on the font, so that only one
letter fits on one line and, on the other hand, the element is wide
enough to make alignment work.

I'm afraid many authors would use the simpler and more robust way of
just putting a forced line break, <br>, after each letter, and this can
be expected to cause problems to people using screen readers.

Yucca