На Хабре, по меркам старожилов, я совсем недавно, всего два года, но пишу активно, по возможности каждый день. Так вот, читая статьи, да и просто прокручивая ленту свежих публикаций как на Хабре, так и на GT, я понял, что многие просто не могут совладать с версткой текста и, как следствие, достаточно часто годные публикации хоронятся их же авторами из-за нечитабельности текста. Или отпугивает кривая КДПВ, или еще что произойдет.
Возможно, для опытных авторов пост покажется капитанским, мелочным, или еще каким, ведь главное содержание, но тем, кто хочет пройти песочницу и влиться в Хабра-сообщество, я уверен, он поможет не только написать что-то полезное, но и красиво свой труд преподнести.
Так уж сложилось, что вся лента Хабрахабра выровнена по левому краю. По этой причине опытные авторы небольшие изображения оставляют слева или используют картинки шириной в 800-1000 px. Отдельно хочется заметить, что чуть ли не лучшим является соотношение КДПВ 2 к 1, т.е. изображения 800х400 px. Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.
Даже если ваше изображение имеет меньшее соотношение сторон, например, 800х700, то постарайтесь уменьшить его высоту. Критическим порогом является 500-600px кроме исключительных случаев, когда КДПВ и в правду «тащит» или содержит полезную информацию (скриншоты интерфейса, например). Тут все достаточно прозаично: не у всех есть мониторы с разрешением 1920х1080 и, например, пользователь ноута с максимальным разрешением экрана в 1366х768 просто не оценит всех этих красот КДПВ размером 1000х1000. Но даже в случае, когда картинка несет полезную нагрузку в виде текста, например, можно сделать ее кликабельной, так всем будет проще.
Из-за того, что изображения редко бывают больше 500-800 пикселей в ширину, все стараются использовать выравнивание по левому краю. И вы старайтесь, сейчас объясню почему.
Когда пользователь скроллит ленту статей, его фокус внимания смещен в левую часть ленты, на начало заголовков, список хабов и кнопки для голосования. Если вы выносите картинку небольшого размера в центр, или, боже упаси, вправо, вы совершаете дешевый маркетинговый трюк «мы не такие как все и привлекаем внимание читателя через раздражающие факторы». На самом деле, такие приемы обычно заканчиваются для авторов печально.
Приведу пример опираясь на мою старую статью.
Правильное расположение КДПВ:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/b3b/712/e7a/b3b712e7af4d9519653d3cf40e99bc83.png)
Неправильное расположение КДПВ:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/0be/0b5/1db/0be0b51dbd913f21615683dbf0197788.png)
Очень неправильное расположение КДПВ:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/44a/474/227/44a474227351c102f5797d6e5b4178a1.png)
Окей, с картинкой мы разобрались. 2 к 1, не шире 1000 px, выравнивание по левому краю. Но если картинка узкая, но подходящая к тексту? Что делать? Использовать обтекание, вестимо. Вот тут-то и было сломано уйма копий (таких, острых, с наконечниками) не одной сотней авторов. Совсем неопытные господа просто пытаются не переходить на другую строку и продолжать текст после кода вставки изображения, вот так:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/7f7/8be/960/7f78be960cdd370ea13bdf64fdb40f43.png)
Закономерно получая вот это:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/8ea/fa1/0dd/8eafa10dd9e97a54ff6cdaffb018ec6a.png)
Окей, нам нужно обтекание. Задается оно в классической хабра-верстке через
Используя такой код мы получаем:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/ee7/0c0/f2b/ee70c0f2b971920434e750a9df002e5e.png)
Так, СТОП! А почему засосало еще один абзац, который у нас раньше был под катом? Он нам здесь не нужен, мы хотим только первое предложение! Для этого нам необходимо использовать
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/230/133/2df/2301332df9b01c3fd8fea8fda5664fd6.png)
А после публикации мы получим вот это:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/39a/fba/89a/39afba89a52d1d7aee83114e18ef7e74.png)
Если вы хотите, чтобы кнопка «ката» была не под картинкой, а сразу после текста, для которого вы прописали обтекание, сдвигайте
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/cf4/de7/4ed/cf4de74ed9085bdc84ebd7900b6b9620.png)
Не практикуйте обтекание текстом слева, а картинку справа. Как я уже говорил, лента выровнена по левому краю. Если поставить картинку справа, вы, опять таки, используете раздражающий многих ход «не такие как все».
Да, я выделил этот пункт отдельно, потому что очень многие не уделяют этому достаточно внимания. Где ставить кат — дело ваше. Вопрос в том, как именно вы это делаете.
Суть в том, что после публикации статьи cut отображается как пустая строка. Таким образом, код
Правильно:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/42e/8e6/b25/42e8e6b25b3065e5504f9a967364e76e.png)
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/926/553/ab9/926553ab99cc00e2fe9a16bb579d4d41.png)
Неправильно:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/4d2/c45/8ac/4d2c458ac138e55d942d9cbaed93a2fb.png)
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/24a/47f/ea8/24a47fea8162a544fa33db5006f737df.png)
Как видно на скриншоте выше, при пустой строке до или после
Отдельно стоит обозначить верстку заголовков, списков и кода. Суть тут, опять же, в повышении читабельности текста за счет правильной расстановки пустых строк. К сожалению, для многих верстка статей ведет себя не очевидно.
Например, после текста заголовка, который вы вписали в
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/6b5/b1f/056/6b5b1f05677cb320187d1326050c36fe.png)
Если же вы поставите пустую строку в форме написания текста после заголовка, то у вас получится двойная пустая строка и у читателя будет создаваться впечатление, что заголовок больше относится к тексту над ним, чем под:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/88c/59e/fbc/88c59efbc2c87561fe98da98bc74bed0.png)
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/1fa/dd1/929/1fadd1929b1f6c175650d212cef37d67.png)
Также не совсем логично ведут себя и списки. Рассмотрим на примере.
Как видите, отступ в строку над и под списком в наличии, все красиво, первый пункт списка не сливается с текстом выше. Но при верстке все выглядит не так круто:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/d77/75e/233/d7775e233b57b79048b9fa71b1ebf1d4.png)
Многие чисто интуитивно убирают пустую строку сверху и добавляют ее после списка, получая:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/c5c/734/905/c5c734905183e1ca097004a2c0c833cc.png)
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/488/6d3/0b0/4886d30b0d3386bfe5c9be165af21241.png)
В некоторых случаях сверстанный список «зажимают» между абзацами, но тогда пункты «подпирают» текст над собой, сливаясь с ним, что значительно снижает читабельность и восприятие написанного как перечисление чего-либо (а ведь в списках по пунктам перечислением обычно и занимаются).
Цитаты ведут себя точно по такому же принципу. При цитировании через blockquote создается автоматический отступ снизу, но не сверху:
Комментарий автора к крутой цитате.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/d4e/c3e/d8c/d4ec3ed8cb92d654efd0b7071c6b33a0.png)
Это же касается и кода:
Комментарий к коду.
А выглядит на самом деле вот так:
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/403/eb8/e53/403eb8e53016087c5a4c6e719d75c20d.png)
В конце хотелось бы сказать, что оптимальная для понимания длина абзаца составляет 3-5 строк (проверить можно через предпросмотр статьи). При переводе англоязычных текстов приходится часто объединять несколько абзацев оригинала в один, так как многие зарубежные авторы имеют тягу к тезисному изложению по одному-два предложения, что превращается на Хабре в частокол из одиночных-двойных строк. Ну, а с остальным, я думаю, вы справитесь сами, так как красоты в виде цветного текста и, тем более цветных заголовков я не исповедую и вам не рекомендую.
Соблюдение рекомендаций, изложенных выше, позволит без особых извращений сделать ваш текст приятным для глаза и удобным для чтения.
Надеюсь, я написал хоть что-то полезное. Всем спасибо за внимание, Кэп полетел.
Возможно, для опытных авторов пост покажется капитанским, мелочным, или еще каким, ведь главное содержание, но тем, кто хочет пройти песочницу и влиться в Хабра-сообщество, я уверен, он поможет не только написать что-то полезное, но и красиво свой труд преподнести.
Картинка Для Привлечения Внимания и выравнивание по левому краю
Так уж сложилось, что вся лента Хабрахабра выровнена по левому краю. По этой причине опытные авторы небольшие изображения оставляют слева или используют картинки шириной в 800-1000 px. Отдельно хочется заметить, что чуть ли не лучшим является соотношение КДПВ 2 к 1, т.е. изображения 800х400 px. Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.
Даже если ваше изображение имеет меньшее соотношение сторон, например, 800х700, то постарайтесь уменьшить его высоту. Критическим порогом является 500-600px кроме исключительных случаев, когда КДПВ и в правду «тащит» или содержит полезную информацию (скриншоты интерфейса, например). Тут все достаточно прозаично: не у всех есть мониторы с разрешением 1920х1080 и, например, пользователь ноута с максимальным разрешением экрана в 1366х768 просто не оценит всех этих красот КДПВ размером 1000х1000. Но даже в случае, когда картинка несет полезную нагрузку в виде текста, например, можно сделать ее кликабельной, так всем будет проще.
Из-за того, что изображения редко бывают больше 500-800 пикселей в ширину, все стараются использовать выравнивание по левому краю. И вы старайтесь, сейчас объясню почему.
Когда пользователь скроллит ленту статей, его фокус внимания смещен в левую часть ленты, на начало заголовков, список хабов и кнопки для голосования. Если вы выносите картинку небольшого размера в центр, или, боже упаси, вправо, вы совершаете дешевый маркетинговый трюк «мы не такие как все и привлекаем внимание читателя через раздражающие факторы». На самом деле, такие приемы обычно заканчиваются для авторов печально.
Приведу пример опираясь на мою старую статью.
Правильное расположение КДПВ:
![image](https://habrastorage.org/getpro/habr/post_images/b3b/712/e7a/b3b712e7af4d9519653d3cf40e99bc83.png)
Неправильное расположение КДПВ:
![image](https://habrastorage.org/getpro/habr/post_images/0be/0b5/1db/0be0b51dbd913f21615683dbf0197788.png)
Очень неправильное расположение КДПВ:
![image](https://habrastorage.org/getpro/habr/post_images/44a/474/227/44a474227351c102f5797d6e5b4178a1.png)
Обтекание текстом
Окей, с картинкой мы разобрались. 2 к 1, не шире 1000 px, выравнивание по левому краю. Но если картинка узкая, но подходящая к тексту? Что делать? Использовать обтекание, вестимо. Вот тут-то и было сломано уйма копий (таких, острых, с наконечниками) не одной сотней авторов. Совсем неопытные господа просто пытаются не переходить на другую строку и продолжать текст после кода вставки изображения, вот так:
![image](https://habrastorage.org/getpro/habr/post_images/7f7/8be/960/7f78be960cdd370ea13bdf64fdb40f43.png)
Закономерно получая вот это:
![image](https://habrastorage.org/getpro/habr/post_images/8ea/fa1/0dd/8eafa10dd9e97a54ff6cdaffb018ec6a.png)
Окей, нам нужно обтекание. Задается оно в классической хабра-верстке через
align="side"
внутри кода вставки:<img src="https://habrastorage.org/getpro/habr/post_images/832/8d3/0bd/8328d30bda5b014e848437e1eea3a654.jpg" alt="image" align="left"/>
Используя такой код мы получаем:
![image](https://habrastorage.org/getpro/habr/post_images/ee7/0c0/f2b/ee70c0f2b971920434e750a9df002e5e.png)
Так, СТОП! А почему засосало еще один абзац, который у нас раньше был под катом? Он нам здесь не нужен, мы хотим только первое предложение! Для этого нам необходимо использовать
<br> <br clear="side"/>
, который очистит форму от применения align="left"
там, где мы пожелаем. В форме редактирования текста код будет выглядеть вот так:![image](https://habrastorage.org/getpro/habr/post_images/230/133/2df/2301332df9b01c3fd8fea8fda5664fd6.png)
А после публикации мы получим вот это:
![image](https://habrastorage.org/getpro/habr/post_images/39a/fba/89a/39afba89a52d1d7aee83114e18ef7e74.png)
Если вы хотите, чтобы кнопка «ката» была не под картинкой, а сразу после текста, для которого вы прописали обтекание, сдвигайте
<br clear="side"/>
под </cut>
:![image](https://habrastorage.org/getpro/habr/post_images/cf4/de7/4ed/cf4de74ed9085bdc84ebd7900b6b9620.png)
Не практикуйте обтекание текстом слева, а картинку справа. Как я уже говорил, лента выровнена по левому краю. Если поставить картинку справа, вы, опять таки, используете раздражающий многих ход «не такие как все».
Установка Хабра-ката
Да, я выделил этот пункт отдельно, потому что очень многие не уделяют этому достаточно внимания. Где ставить кат — дело ваше. Вопрос в том, как именно вы это делаете.
Суть в том, что после публикации статьи cut отображается как пустая строка. Таким образом, код
<cut/>
должен быть зажат между абзацами текста, чтобы его цельность не была нарушена:Правильно:
![image](https://habrastorage.org/getpro/habr/post_images/42e/8e6/b25/42e8e6b25b3065e5504f9a967364e76e.png)
![image](https://habrastorage.org/getpro/habr/post_images/926/553/ab9/926553ab99cc00e2fe9a16bb579d4d41.png)
Неправильно:
![image](https://habrastorage.org/getpro/habr/post_images/4d2/c45/8ac/4d2c458ac138e55d942d9cbaed93a2fb.png)
![image](https://habrastorage.org/getpro/habr/post_images/24a/47f/ea8/24a47fea8162a544fa33db5006f737df.png)
Как видно на скриншоте выше, при пустой строке до или после
<cut/>
в итоговом варианте мы получаем двойную пустую строку, что не есть красиво и визуально «разрывает» текст. Заголовки, списки, текст и все-все-все, что ищут методом проб и ошибок
Отдельно стоит обозначить верстку заголовков, списков и кода. Суть тут, опять же, в повышении читабельности текста за счет правильной расстановки пустых строк. К сожалению, для многих верстка статей ведет себя не очевидно.
Например, после текста заголовка, который вы вписали в
<h4> </h4>
пустая строка не нужна, т.к. она проставляется автоматом:![image](https://habrastorage.org/getpro/habr/post_images/6b5/b1f/056/6b5b1f05677cb320187d1326050c36fe.png)
Если же вы поставите пустую строку в форме написания текста после заголовка, то у вас получится двойная пустая строка и у читателя будет создаваться впечатление, что заголовок больше относится к тексту над ним, чем под:
![image](https://habrastorage.org/getpro/habr/post_images/88c/59e/fbc/88c59efbc2c87561fe98da98bc74bed0.png)
![image](https://habrastorage.org/getpro/habr/post_images/1fa/dd1/929/1fadd1929b1f6c175650d212cef37d67.png)
Также не совсем логично ведут себя и списки. Рассмотрим на примере.
- Пункт списка №1
- Пункт списка №2
- Пункт списка №3
- Пункт списка №4
- Пункт списка №5
Как видите, отступ в строку над и под списком в наличии, все красиво, первый пункт списка не сливается с текстом выше. Но при верстке все выглядит не так круто:
![image](https://habrastorage.org/getpro/habr/post_images/d77/75e/233/d7775e233b57b79048b9fa71b1ebf1d4.png)
Многие чисто интуитивно убирают пустую строку сверху и добавляют ее после списка, получая:
![image](https://habrastorage.org/getpro/habr/post_images/c5c/734/905/c5c734905183e1ca097004a2c0c833cc.png)
![image](https://habrastorage.org/getpro/habr/post_images/488/6d3/0b0/4886d30b0d3386bfe5c9be165af21241.png)
В некоторых случаях сверстанный список «зажимают» между абзацами, но тогда пункты «подпирают» текст над собой, сливаясь с ним, что значительно снижает читабельность и восприятие написанного как перечисление чего-либо (а ведь в списках по пунктам перечислением обычно и занимаются).
Цитаты ведут себя точно по такому же принципу. При цитировании через blockquote создается автоматический отступ снизу, но не сверху:
Крутая цитата.
Комментарий автора к крутой цитате.
![image](https://habrastorage.org/getpro/habr/post_images/d4e/c3e/d8c/d4ec3ed8cb92d654efd0b7071c6b33a0.png)
Это же касается и кода:
Крутой код тут;
код;
еще код;
конец кода.
Комментарий к коду.
А выглядит на самом деле вот так:
![image](https://habrastorage.org/getpro/habr/post_images/403/eb8/e53/403eb8e53016087c5a4c6e719d75c20d.png)
В конце хотелось бы сказать, что оптимальная для понимания длина абзаца составляет 3-5 строк (проверить можно через предпросмотр статьи). При переводе англоязычных текстов приходится часто объединять несколько абзацев оригинала в один, так как многие зарубежные авторы имеют тягу к тезисному изложению по одному-два предложения, что превращается на Хабре в частокол из одиночных-двойных строк. Ну, а с остальным, я думаю, вы справитесь сами, так как красоты в виде цветного текста и, тем более цветных заголовков я не исповедую и вам не рекомендую.
Соблюдение рекомендаций, изложенных выше, позволит без особых извращений сделать ваш текст приятным для глаза и удобным для чтения.
Надеюсь, я написал хоть что-то полезное. Всем спасибо за внимание, Кэп полетел.