Восхотелось мне вчера в очередной раз странного – пожелал иметь на вебстраницах оформление статей, схожее с их полиграфическими аналогами, к примеру, журнальными. Естественно мне восхотелось поиметь толковое описание к картинкам (т.е. «классические» подписи под изображениями) и при этом желательно без использования костылей. Поставленную вчера перед самим собой задачу я решил, но... Впрочем, давайте по-порядку.

Идея

Идея весьма простая: надо каким-то образом содержимое атрибута title – который и выполняет роль пояснения или подписи – изображений помещать под изображения. При этом желательно обойтись средствами только CSS.

С применением JavaScript задача решается проще, но мне хотелось именно «чистого решения» задачи.

Решение

Вначале я попытался поиграть с позиционированием именно title-атрибута элемента img и у меня естественно ничего не вышло. Зато при этом обнаружил одну интересную странность в работе CSS-конструкций вида element [attribut]{ набор свойств }, о которой я расскажу в другой раз.

Этот «обускураживающий» факт меня не остановил и дал толчок к более внимательному ознакомлению со спецификацией CSS 2. В ней я с удивлением обнаружил, что «все уже придумано до нас» – © не помню чей. Есть такое замечательное свойство content, которое как раз и делает то, что мне нужно.

Итак, в теле web-страницы изображаем элементарное подключение картинки без каких-либо костылей и подпорок:
<img src="rover.jpg" width="280" height="209" title="Rover на поверхности Марса. « class=»desc" />

В CSS описываем поведение этой картинки:
img.desc {
display: block;
counter-increment: pic-num;
text-align: justify;
margin: 5px;
padding: 5px;
border: 1px solid #666;
background-color: #dcdcdc;
float: left;
}
img.desc:after {
content: "Рис. " counter (pic-num) ". " attr (title);
display: block;
font-size: 8pt;
font-family: Georgia;
}

В результате мы получили то, что вы видите на рисунке снизу. Непорядок!
Самое интересное, что если у изображения убрать атрибуты width и height, то картина существенно меняется.

Странно... А что будет, если описание будет больше ширины картинки?

Кхм... Добавляем к img.desc:after дополнительное свойство width: 280px; – ширину картинки – и все становится намного симпатичнее.

Вроде бы нужно кричать «ура, мы победили! „, но... вас ждет горькое разочарование – content-свойство поддерживается только браузером Opera. Получается, что все пользователи IE и Gecko-браузеров пролетают как фанерка над Парижем :(.

Делаем костыли

Для того, чтобы у всех зашедших подписи у картинок были необходимы костыли – к сожалению без них обойтись не получилось. В web-страничке изображаем костыль:
<div class=“wrap»><img src="03rover3.gif" width="280" height="209" title="Rover на поверхности Марса. "/><span>Подпись картинки с костылями Теперь проверка на очень длинный комментарий-описание :)</span></div>

В CSS-файле «рисуем» такое:
.wrap {
float: left;
width: 280px;
margin: 5px;
padding: 15px 15px 0 15px;
background: #F5B404 url (top-left.gif) top left no-repeat;
}

.wrap span {
float: left;
display: block;
text-align: justify;
width: 100%;
font-size: 8pt;
font-family: Georgia;
padding-bottom: 15px;
padding-right: 15px;
margin-right: -15px;
background: transparent url (bottom-right.gif) bottom right no-repeat;
}

* html .wrap span {
padding-top: 5px;
}

И в результате получаем в IE6, FF, Opera & Safari такую картинку:

Достаточно симпатично получилось, хотя над внешним видом еще можно поработать...

Выводы

К сожалению подписи к картинкам возможно сделать только при помощи дополнительных манипуляций, т.к. поддержка штатных средств CSS для организации подписей в большинстве браузеров отсутствует.

Кстати, может кто предложит более красивое решение?

Взять PDF-версию этой статьи