14 января 2016 г.

Сноски при верстке почтовых рассылок

При верстке email-рассылки вставить сноску (<sup> или <sub>) - та еще задача.

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

Но есть один хороший прием — сноску надо оформить кодом

<span style="font-size: 10px; line-height: 0; vertical-align: 14px;">1</span>

Вся суть здесь в задании line-height: 0; - это заставляет сноску не участвовать в расчете высоты строки и не менять межстрочный интервал. Ну а само положение сноски регулируется значением параметра vertical-align.

Работает даже в MS Outlook.

Наглядный пример ниже:

See the Pen YwxOae by borshak (@borshak) on CodePen.



Этот прием подсмотрел в блоге австралийской дизайнера и верстальщика Nicole Merlin.

Комментариев нет :

Отправить комментарий