Устранение проблемы увеличения межстрочного интервала в тексте при использовании графических смайлов

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

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

Для примера – вот так это выглядит на блоге Михаила Шакина:

shakin.ru

и вот так на блоге Сергея Сосновского:

sosnovskij.ru

Согласитесь, не очень красиво?

А устраняется данная неприятность просто – с помощью CSS. Для этого достаточно в CSS-файл сайта добавить вот такое правило:

img {vertical-align: middle}

И все. Смайлы выровняются относительно текста, и разрывы между строками исчезнут.

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

.post img {vertical-align: middle}

Здесь .post – это класс блока в котором находятся смайлы.

Комментарии (26)

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

  2. благодарю за решение проблемы

  3. Спасибо. С помощью какой программы сделали такие скриншоты записей Шакина и Сосновского, не подскажите?

  4. Хорошее решение – возьму на заметку! FastStone Capture тоже пользую – удобная вешь – рекомендую!!!

  5. С проблемой сталкивался, но над решением не думал — ленился. А теперь есть готовый рецепт. Спасибо :)

  6. собственно высота строки все равно меньше высоты смайлика, даже если последний маленький. Вот скрин с сайта примера

  7. Спасибо, Дим. Стало стало лучше :) Смайлик все равно увеличивает межстрочный интервал, но совсем незначительно. Невооруженным глазом практически не видно.

  8. Этот способ спорный, потому как будут выравниваться по вертикальному центру строки не только смайлы, но и все остальные изображения в посте. Чтобы выравнивались только смайты, нужно в style.css добавить:

    .post img.wp-smiley, .post img.wp-smiley:hover {vertical-align:middle !important}

  9. Димокс, большое спасибо! Теперь тысячи смайликов на моем блоге выровнялись за мгновение благодаря твоему решению! :) Напишу про твой пост в 46 блог-шоу.

  10. Cпасибо за статью. Хотел тебе написать на обратную связь, но получилось только со второго раза! с первого раза какой то ерор показывает. По тести..

  11. Спасибо за подсказку. Взял на вооружение. Сразу полез в css и внёс поправочку ;-)

  12. Супер! Я потому и не любил использовать графические смайлы, что текст разъезжается. А решение такое простое!

  13. Хорошее решение. Для нормального отображения под свой размер смайликов (24×24) поигрался со значениями vertical-align и выставил -0.6em:
    .smilie {vertical-align: -0.6em}
    На статью, кстати попал от Шакина =)

  14. Клево. Да, действительно, несколько напрягало увеличение межстрочного интервала. Опять таки — респект за компактное решение :)

  15. img.wp-smiley,
    img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
    }
    Можно и так сделать. Просто подстраиваем ширину и высоту смайла под размер шрифта.

Ваш комментарий