Новая строка в альтернативном тексте

Question

Могу ли я использовать какой-либо разрыв строки в альтернативном тексте для изображения, все еще придерживаясь стандарта XHTML 1.0 Strict?

Примерно так ...

<img src="foo.jpg" alt="Line 1\nLine 2" />

IЯ спрашиваю, потому что я хочу опубликовать следующий скриншот на своем сайте, но я хочу включить текстовую версию в альтернативный текст по причинам SEO и для слабовидящих.

Я предпочитаю скриншот, а не текстовую версию, потому что он выглядит более привлекательным.

Answer 1

Просто используйте обычный разрыв строки.

<img src="foo.jpg" alt="Line 1
Line 2" />

Переполнение стека делает это в своих заголовках:)

Затем добавьте этот CSS:

img{white-space:pre}

Демонстрация:http://jsfiddle.net/Madmartigan/S8SXP/

Answer 2

Лучший способ - просто добавить код символа HTML для перевода строки или возврата каретки.

 line feed is &#10
 carriage return &#13

Answer 3

Я думаю, вы, возможно, слишком стараетесь.
Предполагается, что альтернативный текст является заменой изображения, а не каким-то его буквальным представлением.

Правильно размеченная и т. Д. Это будет, скажем, неупорядоченный список с подсписками, а программа чтения с экрана получит информацию об отношениях из этого вложения элементов HTML.Заменить это на некоторые разрывы строк, чтобы получить грубое визуальное приближение, - это не то же самое, например.Как вы планируете также «показать» программе чтения с экрана, что фрагмент после первого разрыва строки находится «внутри» ошибок?
И я сомневаюсь, что поисковые системы будут делать что-либо с разрывами строк в альтернативном тексте, кроме как отбрасывать их.(Предположительно умозрительно.)

То, что вы на самом деле после, каким-то образом включает в себя информацию о вложенности / взаимосвязи, которую имеет изображение, но с текстом вместо этого.Начните с чего-то вроде «Снимок экрана уведомлений от [приложения], показывающий две ошибки [подробно здесь, если хотите] и два информационных элемента [подробно]» и т. Д.

Или вы можете стать действительно педантичным и действительно создатьсписок в HTML, а затем использовать метод замены изображения, чтобы вставить изображение.

Answer 4

@ Ответ Мерча был чем-то, чего я не знал.Однако становится все труднее разбивать пробелы на BR во всем приложении.

Как самое простое решение, вы можете просто предоставить

img.class { overflow:hidden }

и покончить с этим быстро и грязно.