Подрисуночная подпись. Как поставить описание к изображению

Оформление подрисуночной подписи

Как правило, иллюстрации (изображения) должны иметь подписи. Подпись, или подрисуночная подпись, — текст под иллюстрацией, который определяет ее тематическое содержание, поясняет изображение или сообщает об источнике. Словесная надпись делает изображение понятным. Наглядность его возрастает.

В наиболее полном виде в состав подписи входят:

• 1) условное обозначение иллюстрации — слово Рис.;
• 2) номер иллюстрации: Рис. 5;
• 3) словесное определение темы иллюстрации;
• 4) легенда — сведения о месте хранения оригинала иллюстрации, его худож. и техн. особенностях, дате создания и т. д.;
• 5) экспликация — расшифровка условных обозначений на иллюстрации.

Состав подписи может быть сокращен или дополнен: характер сокращений и дополнений зависит от вида и особенностей иллюстраций.

Иллюстрации нумеруют прежде всего для того, чтобы на них удобно было кратко ссылаться в тексте. Если на иллюстрацию не требуется ссылаться в основном тексте, как, например, на портрет автора перед его произведением, или на портрет лица, которому посвящено издание, или на любые иллюстрации в литературно-художественном издании, нумеровать их нет никакой нужды, и подпись состоит в этом случае только из словесного определения темы иллюстрации.

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

Перед порядковым номером изображения знак номера (№) не ставится.

После порядкового номера иллюстрации, если он вместе с условным названием иллюстрации или без этого названия выключен отдельной строкой, знак препинания (точку) не ставят.
Например, Рис. 1

Если основная подпись следует непосредственно за порядковым номером, продолжая начатую им строку, то порядковый номер завершается точкой.
Например, Рис. 2. Описание изображения

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

После основной подписи, если далее следует экспликация, принято ставить двоеточие.

Подпись всегда начинают с прописной буквы, независимо от того, какой элемент идет первым, экспликацию — со строчной буквы.

Подписи к иллюстрациям рекомендуется набирать шрифтом меньшего кегля по сравнению со шрифтом основного текста.

Условное обозначение и номер выделяются шрифтом.

Вёрстка подрисуночной подписи

Если ширина изображения равна ширине блока основного текста, добавить подпись можно с помощью обычного абзаца (<p></p>). Однако, этот способ не работает, как только изображение имеет небольшой размер и его необходимо расположить по краю веб-страницы.

Чтобы связать изображение и подпись к нему, их следует поместить в один блок, присвоить ему имя и применить к нему различные стилевые параметры.

Вариант №1

Подходит при условиях: а) одно изображение; б) несколько изображений одной ширины; в) длина подрисуночной подписи меньше ширины изображения.

#images_description
{
  display: block;
  float: left;
  margin: 0 1em 2em 0;
  padding: 0;
  position: relative;
}
#images_description img
{
  border: medium none;
  display: block;
  margin: 0 0 1em;
  padding: 0;
}
.description
{
  font-size:15px; /* размер шрифта меньше основного */
  line-height: 1.3;
  margin: 0;
  padding: 0;
  position: inherit;
  text-align: left;
}

Размещение изображения и подрисуночной подписи на странице.

<div id="images_description">
  <img src="путь к изображению" width="" height=""
alt="описание изображения" />
  <span class="description">Подрисуночная подпись</span>
</div>

Если ширина блока с изображением не задается, то она будет определяться автоматически, исходя из размера изображения. Если подрисуночная подпись будет длинной — блок растянется. Исправляется это добавлением к стилям блока свойства width с фиксированным значением, равным ширине изображения.

Вариант №2

Условия: а) одно/несколько изображений различной ширины; б) подрисуночная подпись длиннее ширины изображения.

Можно воспользоваться свойством display: table-cell

#images_description
{
  display: block;
  float: left;
  margin: 0 1em 2em 0;
  padding: 0;
  position: relative;
}
.images_description
{
  display: table-cell;
  width: 1px;
  padding: 0;
}
.images_description .description
{
  display: block;
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

Размещение изображения и подрисуночной подписи на странице.

<div id="images_description">
  <div class="images_description">
     <img src="путь к изображению" alt="описание изображения" />
     <span class="description">Подрисуночная подпись, которая переносится
на другую строчку</span>
  </div>
</div>

Пример использования