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

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

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

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

shakin.ru

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

sosnovskij.ru

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

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

img {vertical-align: middle}

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

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

.post img {vertical-align: middle}

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

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

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

  2. 4

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

  3. 5

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

  4. 9

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

  5. 10
    Xtray

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

  6. 11
    mdss

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

  7. 13

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

  8. 17

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

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

  9. 19

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

  10. 21

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

  11. 22

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

  12. 23

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

  13. 24

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

  14. 25

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

  15. 26

    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;
    }
    Можно и так сделать. Просто подстраиваем ширину и высоту смайла под размер шрифта.