19 февраля 2016 в 17:00

Памятка по базовой верстке статьи для Хабра без использования Markdown-разметки tutorial

На Хабре, по меркам старожилов, я совсем недавно, всего два года, но пишу активно, по возможности каждый день. Так вот, читая статьи, да и просто прокручивая ленту свежих публикаций как на Хабре, так и на GT, я понял, что многие просто не могут совладать с версткой текста и, как следствие, достаточно часто годные публикации хоронятся их же авторами из-за нечитабельности текста. Или отпугивает кривая КДПВ, или еще что произойдет.

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

Картинка Для Привлечения Внимания и выравнивание по левому краю


Так уж сложилось, что вся лента Хабрахабра выровнена по левому краю. По этой причине опытные авторы небольшие изображения оставляют слева или используют картинки шириной в 800-1000 px. Отдельно хочется заметить, что чуть ли не лучшим является соотношение КДПВ 2 к 1, т.е. изображения 800х400 px. Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.

Даже если ваше изображение имеет меньшее соотношение сторон, например, 800х700, то постарайтесь уменьшить его высоту. Критическим порогом является 500-600px кроме исключительных случаев, когда КДПВ и в правду «тащит» или содержит полезную информацию (скриншоты интерфейса, например). Тут все достаточно прозаично: не у всех есть мониторы с разрешением 1920х1080 и, например, пользователь ноута с максимальным разрешением экрана в 1366х768 просто не оценит всех этих красот КДПВ размером 1000х1000. Но даже в случае, когда картинка несет полезную нагрузку в виде текста, например, можно сделать ее кликабельной, так всем будет проще.

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

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

Приведу пример опираясь на мою старую статью.

Правильное расположение КДПВ:
image

Неправильное расположение КДПВ:
image

Очень неправильное расположение КДПВ:
image

Обтекание текстом


Окей, с картинкой мы разобрались. 2 к 1, не шире 1000 px, выравнивание по левому краю. Но если картинка узкая, но подходящая к тексту? Что делать? Использовать обтекание, вестимо. Вот тут-то и было сломано уйма копий (таких, острых, с наконечниками) не одной сотней авторов. Совсем неопытные господа просто пытаются не переходить на другую строку и продолжать текст после кода вставки изображения, вот так:

image

Закономерно получая вот это:

image

Окей, нам нужно обтекание. Задается оно в классической хабра-верстке через align="side" внутри кода вставки:

<img src="https://habrastorage.org/getpro/habr/post_images/832/8d3/0bd/8328d30bda5b014e848437e1eea3a654.jpg" alt="image" align="left"/>

Используя такой код мы получаем:

image

Так, СТОП! А почему засосало еще один абзац, который у нас раньше был под катом? Он нам здесь не нужен, мы хотим только первое предложение! Для этого нам необходимо использовать <br> <br clear="side"/>, который очистит форму от применения align="left" там, где мы пожелаем. В форме редактирования текста код будет выглядеть вот так:

image

А после публикации мы получим вот это:

image

Если вы хотите, чтобы кнопка «ката» была не под картинкой, а сразу после текста, для которого вы прописали обтекание, сдвигайте <br clear="side"/> под </cut>:

image

Не практикуйте обтекание текстом слева, а картинку справа. Как я уже говорил, лента выровнена по левому краю. Если поставить картинку справа, вы, опять таки, используете раздражающий многих ход «не такие как все».

Установка Хабра-ката


Да, я выделил этот пункт отдельно, потому что очень многие не уделяют этому достаточно внимания. Где ставить кат — дело ваше. Вопрос в том, как именно вы это делаете.

Суть в том, что после публикации статьи cut отображается как пустая строка. Таким образом, код <cut/> должен быть зажат между абзацами текста, чтобы его цельность не была нарушена:

Правильно:

image

image

Неправильно:

image

image

Как видно на скриншоте выше, при пустой строке до или после <cut/> в итоговом варианте мы получаем двойную пустую строку, что не есть красиво и визуально «разрывает» текст.

Заголовки, списки, текст и все-все-все, что ищут методом проб и ошибок


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

Например, после текста заголовка, который вы вписали в <h4> </h4> пустая строка не нужна, т.к. она проставляется автоматом:

image

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

image

image

Также не совсем логично ведут себя и списки. Рассмотрим на примере.

  • Пункт списка №1
  • Пункт списка №2
  • Пункт списка №3
  • Пункт списка №4
  • Пункт списка №5

Как видите, отступ в строку над и под списком в наличии, все красиво, первый пункт списка не сливается с текстом выше. Но при верстке все выглядит не так круто:

image

Многие чисто интуитивно убирают пустую строку сверху и добавляют ее после списка, получая:

image

image

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

Цитаты ведут себя точно по такому же принципу. При цитировании через blockquote создается автоматический отступ снизу, но не сверху:

Крутая цитата.

Комментарий автора к крутой цитате.

image

Это же касается и кода:

Крутой код тут;
код;
еще код;
конец кода.

Комментарий к коду.

А выглядит на самом деле вот так:

image

В конце хотелось бы сказать, что оптимальная для понимания длина абзаца составляет 3-5 строк (проверить можно через предпросмотр статьи). При переводе англоязычных текстов приходится часто объединять несколько абзацев оригинала в один, так как многие зарубежные авторы имеют тягу к тезисному изложению по одному-два предложения, что превращается на Хабре в частокол из одиночных-двойных строк. Ну, а с остальным, я думаю, вы справитесь сами, так как красоты в виде цветного текста и, тем более цветных заголовков я не исповедую и вам не рекомендую.

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

Надеюсь, я написал хоть что-то полезное. Всем спасибо за внимание, Кэп полетел.
Александр @ragequit
карма
141,7
рейтинг 65,7
Рядовой пользователь
Похожие публикации
Самое читаемое Разное

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

  • 0
    Всем было бы намного проще, если бы парсер Хабра просто съедал весь whitespace за пределами тэгов.
    • +1
      Лично меня это свело бы с ума, как сейчас ломает сознание Markdown, хоть в некоторых моментах (при верстке большого кол-ва кода) он намного удобнее.
    • +3
      Всем было бы намного проще, если бы Хабр просто поддерживал Markdown. (И Внезапно, он уже)
      А картинки?
      • 0
        Мне — нет. Я считаю что ресурс вроде Хабра просто должен поддерживать HTML.
        • +6
          Так он его все равно не поддерживает же. Можно использовать только ограниченный набор, white list. А с таким же успехом можно и в MD все функции реализовать.
          • +2
            Честно говоря, слабо представляю чего такого может понадобиться сделать, чего не может разрешённый вайтлист, но при этом может маркдаун. Я, наверно, не так часто статьи пишу. Приведите пример, пожалуйста.
            • +2
              Вопрос не в том, что может MD, но не может вайтлист, а в том, что может вайтлист, но не может MD. Потому что, при прочих равных, MD гораздо человечнее HTML-я.
              • +3
                А я вот HTML уже очень давно знаю, и мне он интуитивно удобнее. Зачем я буду запоминать эту дополнительную разметку? Этот MD очень похож на то что было в своё время на форумах, и называлось BBcode. И там оно немного отличалось. Было, кажется раньше ещё, вроде вконтаче или какой-то ещё социалке, только я не помню там MD или тоже был клон очередной…

                А завтра изобретут ещё одну супер-человечно-понятный синтаксис и всё сначала? А зачем, если есть HTML и он всё это может и даже больше.
                • –1
                  Этот MD очень похож на то что было в своё время на форумах, и называлось BBcode.

                  BBCode гораздо ближе к HTML, чем к MD

                  А зачем, если есть HTML и он всё это может и даже больше.

                  Ради эффективности, конечно. Потратить 10 минут на изучение MD проще, чем вводить зубодробительные таги HTML (с переключением раскладки) каждый раз

                  и даже больше

                  Где больше-то?
                  • 0
                    Ну сверстайте-ка мне на MD ресурс вроде хабра, там и обсудим где больше, где меньше…
                    • 0
                      А давайте.

                      Кстати, в моем сообщении речь шла об ограниченном наборе html-тегов, доступном на хабре, а не о полноценном HTML+CSS
                      • –2
                        По вашей ссылке шаблонизатор, который прогоняет текст через простенький парсер и вставлет это в шаблон. Морда у него через HTML свёрстана.

                        Вы знаете, у меня ощущение что вы не слышите оппонента.

                        Давайте по другому. Вот вам пара тегов, которые выводятся прям сверху в хелпе при создании поста на Хабре:

                        <source lang=«Язык»></source>
                        <slideshow>http://...</slideshow>
                        <spoiler title=«Заголовок»>Содержимое</spoiler>

                        И приведите мне, пожалуйста аналоги в MD, которые будут работать сходу на любом стандартном парсере MD.
  • 0
    Отдельно хочется заметить, что чуть ли не лучшим является соотношение КДПВ 2 к 1, т.е. изображения 800х400 px. Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.

    Почему 2 к 1, если не секрет?
    • 0
      Видимо, дело во внешнем виде картинок в ленте новостей в ВК, да и на самом Хабре "прямоугольные" КДПВ выглядят гармоничнее, позволяя уместить как и КДПВ, так и текст до ката в пару абзацев в один экран с запасом.
      • 0
        Что я видел в соцсетях — там квадрат слева, текст справа. Есть какие-то скриншоты как оно "гармоничнее" выглядит 2к1?

        image
        • 0
          В соц. сетях используется короткая ссылка вида https://habr.ru/p/277577/ без превью. Картинка, которая обычно размещена на КДПВ, вставляется отдельно вручную:

          image
          Почему ориентир на ВК? Там более полумиллиона подписчиков в группе.
  • –6
    Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой

    seo и smm — это современное название спамеров, а спам — богомерзок по природе, их нужно выжечь каленым железом из наших Интернетов
    • +1
      Спам в собственной группе ресурса в ВК? Вы ошиблись тредом.
  • 0
    А я, вот, не могу быстро читать текст, если после каждого абзаца есть пропущенная строка. У меня глаза разбегаются от такого. Стараюсь все скомпоновать, чтобы не было лишних отступов (особенно не люблю отступ после заголовка), а модераторы приходят и меняют. Писал раз 6 в поддержку, чтобы в профиле поставили заметку модераторам, чтобы не меняли мою разметку, а они все равно каждый раз переделывали по-своему. Теперь в начале каждого поста оставляю HTML-комментарий с просьбой — работает!
    • +4
      С точки зрения редактуры и верстки текста (любого, как цифрового, так и печатного) — это экстремально неправильно, серьезно.

      P.S. По большому случаю, вам, как автору, достаточно перечитать текст единожды перед публикацией. Тут больше должен работать принцип не "как лучше мне" а "как лучше читателю", т.е. махнуть местами эгоизм на уважение к аудитории.
    • +6
      Извините, но писать абзацы слитно, когда нет красной строки, — ужасно.
      • 0
        https://habrahabr.ru/post/276831/ — с вашей точки зрения, верстка выглядит плохо? Вероятно, у меня не очень развито угловое зрение. Дело не только в компоновке текста. Мне еще удобней использовать телефоны и компьютеры с маленьким экраном (сейчас пишу этот текст на телефоне с диагональю 3.5")
        • +4
          А вы обидчивый? Или правду сказать?
          • 0
            Правду говорите, конечно же. И еще в другие посты загляните.
            • +9
              Понимаете, есть нормы верстки текста, которые пришли к нам из классической типографики и книгопечатания. Отсюда все эти межстрочные отступы, шрифты, разрывы и красные строки. Разрыв между абзацами используется не только как визуальная разгрузка текста, не позволяя слиться ему в единое целое, но и как инструмент логического ударения. Новый абзац — новая мысль. Это общепринятый подход в любых изданиях, СМИ и литературе, всеобщий стандарт. Единственное место, где он не соблюдается, если так сразу прикинуть — это словари. Но их можно поставить отдельно, как литературу с высокой плотностью различной информации. Но даже в словарях каждое слово-абзац обозначается болдом для облегчения навигации. У вас даже этого нет.

              Вы сказали, что чаще используете телефон или планшет. Я использую экран 1920х1080 с диагональю 21'5. Вы сказали, что используете мобильные девайсы, в основном. Кто-то не использует их вообще. У вас помещается на экран 5-9 строк текста, у меня — 50 (цифра с потолка), причем в хайрезе, без всяких зумов и прочего. Получается, что у вас небольшая емкость текста на экране + физические границы устройства позволяют ориентироваться по тексту. У меня вся ваша публикация почти влазит в один экран и если она без красных строк, то я, с большой долей вероятности, не имея визуальных ориентиров, могу просто строчку при чтении пропустить.

              Я для себя выработал правило: всегда верстать текст исходя из Full-HD разрешения экрана (1920х1080), т.к. минимум половина аудитории читает Хабр с экрана, а мобильные пользователи всегда могут одним легким движением пальцев зазумить текст, для них это норма.

              Сообщение в начале статей, кстати, прекрасно.
              • 0
                Разрыв между абзацами используется не только как визуальная разгрузка текста, не позволяя слиться ему в единое целое, но и как инструмент логического ударения. Новый абзац — новая мысль.
                Вероятно, я не чувствую того критерия, по которому его следует правильно разрывать. Как вы видите, у меня там есть один единственный разрыв, но перед ним много текста. Мысль-то одна, не вижу смысла ее разрывать.

                Вы сказали, что чаще используете телефон или планшет.
                Да, вроде, нет, как раз таки наоборот.

                Я использую экран 1920х1080 с диагональю 21'5.
                А я — 23.8" 3840×2160. Это что-то меняет? Да ничего.

                Как правило, в текстовых процессорах делают отступ от заголовка снизу меньше, чем высота строки. На хабре, увы, так сделать нельзя, но отступ, по моему мнению, и так достаточен, а новая строка после заголовка выглядит ни к селу ни к городу.
                • +2
                  Да, вроде, нет, как раз таки наоборот.

                  Мне еще удобней использовать телефоны и компьютеры с маленьким экраном (сейчас пишу этот текст на телефоне с диагональю 3.5")

                  Красная строка — есть визуальный ориентир. У вас ярко выраженная привычка читать "стены" текста, правда, не совсем понятно, откуда взявшаяся. Для остальных 95%-99% читателей такая верстка крайне неудобная и утомительная, т.к. даже взгляд в сторону не отвести — потеряешь где читал.
        • 0
          Выглядит плохо. Разрывы, которые вставляет Хабр, тоже выглядят какими-то большими, поэтому они вам наверное и не нравятся. Но персонально мне, так лучше большие разрывы, чем их отсутствие: простыню текста я не могу прочитать практически никогда. Тут вот написано, какими принято их делать: http://practicaltypography.com/space-between-paragraphs.html
          • +5
            У хабра есть проблема в том, что все отступы у всех элементов идут только снизу. Поэтому код вида:

            Текст абзаца длинного, id rutrum sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur id purus vel lorem lacinia rutrum. Aenean sed magna suscipit, tincidunt mi et, eleifend nisl. Mauris consequat condimentum quam eget placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut tincidunt dui.
            <h1>Заголовок</h1>
            Текст абзаца под заголовком. Quisque eget pharetra ligula. Sed a vehicula nulla. Maecenas cursus pulvinar tellus, placerat hendrerit metus tristique ut. Proin venenatis, nisi sit amet blandit facilisis, orci ipsum ullamcorper tellus, eu sollicitudin metus ligula ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec pulvinar fermentum ipsum, quis ullamcorper nulla tempor ut. Proin et ipsum vel erat placerat eleifend vel venenatis mauris. Mauris et ligula sed nunc placerat molestie. Sed suscipit accumsan mi et consectetur. Quisque finibus libero nunc, quis ornare mauris mattis ut. Maecenas tempor ultrices ligula, at lacinia eros.

            Превращается в вот такую парашу:

            image
            После чего над вставить пустую строку перед h1, и она будет выглядеть более-менее сносно, но всё равно отстойно. И так у всех элементов какой-то гений сделал отступ снизу, а не сверху, как должно быть. Лучше б уж вообще нигде отступов в таком случае не делали и форматировалось бы всё пустыми строками, чем такое ущербанство, имхо.
        • 0
          Да, мне так не очень удобно читать. Хорошо, что у вас статьи и так разбиты на части, разделяемые заголовками, картинками, кодом и т.п. Но относительно большой текст я бы так читать не смог.

          Знаете, мне кажется вы просто привыкли к такому. У меня был один ученик, который привык не ставить пробелы между операторами, ну то есть как то так int a=5+f(3). Аргументировал он это тем, что так весь код помещается в поле зрения. Я с ним пообщался и понял, что ему действительно так удобнее, более привычно. Но так как мы писали код в команде, все равно пришлось переучивать =)
        • +1
          Плохо.
        • –1
          Это не «плохо». Это отвратительный кошмар.
  • +5
    Размещение картинки под заголовком — слева, весьма спорная штука. Особенно, если она позволяет оставаться некоторому тексту с правой стороны. Взгляд читателя вынужден метаться от заголовка к началу текста, который оказывается где-то сбоку. Наиболее правильный вариант: именно текст расположить с начала строки — слева, а картинку передвинуть вправо. Конечно, при условии, что ваша картинка вспомогательный материал, а не единственная полезная часть в статье.
    Для удобства _чтения_ именно текст должен идти по левому краю, при любом другом варианте глаз будет спотыкаться.
    • +1
      Нет. Если перемещать картинку в право, то это вынуждает пользователя отвлекаться в право, не зря их называют КДПВ. Плюс ко всему, если делать КДПВ по правому краю, то по середине страницы получается "рваная" линия из-за того, что текст выравнивается только по левому краю, а по правому — нет. Картинка же слева создает идеально прямую (край картинки) визуальную границу от которой не устает глаз, а рваный край справа плавно утекает в белую пелену "листа" страницы.
      • 0
        Не знаю по поводу рваных линий справа. Честно сказать, довольно неожиданный поворот, все кого они беспокоят делают выравнивание по двум сторонам, а не двигают картинку к левому краю, чтобы сдвинуть половину текста.
        Я довольно долго вынужден был пользоваться одним сайтом с левым положением картинки, и только когда сделал выравнивание по правой стороне понял, что мне не нравилось. К сожалению, там этого сделать было нельзя.
        Для наглядности сделал вам два примера, любой может убедится, что читабельность текста намного удобнее, когда глаза не бегают в поиске начала следующей строки.
        http://i73.fastpic.ru/big/2016/0219/8c/d7b315adf661d35e748fa7270feec48c.png
        http://i75.fastpic.ru/big/2016/0219/f4/6c19d8ca7b614f6f8fa11958a3339bf4.png
        Если же вам категорически необходимо сделать картинку слева, то делайте ее на всю ширину, чтобы справа от картинки текста не было. А лучше всего ее поместить выше заголовка, чтобы чтение не нарушалось. Хотя, можно поспорить о применении в разных условиях, но для сайта с множеством текстов, особенно когде в день выходит десяток статей, то чтение должно быть максимально удобным, и картинка это не единственная проблема, которая должна быть решена правильно.
        • 0
          Вы приводите пример в отрыве от ленты. Я же говорю о внешнем виде публикации в ленте статей на Хабре (а не внутри самой статьи).
          • 0
            Согласитесь, что большинство языков читаются слева направо независимо от того в «ленте» они или в виде статьи. Обычное удобство, когда строка всегда начинается с одного места.
      • +5
        «Вправо», «посередине», чёрт подери! Понабирали редакторов по объявлению…

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

        Возможно, во вконтактике действительно правильнее прижимать картику к левому краю, но тут хабр, а не вконтактик и попытки нагнать трафик из вконтактика не повод портить жизнь хабрапользователям.
        • +2
          Это замечательно, что у вас есть свое мнение, но зачем переходить на личности? Мне вот как раз удобно так, как написано в статье (кдпв слева + возможно текст справа)
  • +1
    Спасибо, некоторые советы действительно ценные. Однако их можно использовать и в Markdown разметке, т.к. он поддерживает вставки html (а выравнивание для картинок, например, вообще непонятно как в нем сделать без html).
    • +1
      Смешанная верстка markdown и HTML — отдельная тема для отдельной статьи. Там все не так просто, как кажется. Как разберусь со всем окончательно и найду, например, аналог br clear= — напишу.
  • +6
    Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.

    Так вот для чего нынче статьи на хабре пишут. Печально.
  • 0
    В следующий раз расскажите про вёрстку таблиц ;)
  • +1
    Есть привычка читать начало статьи в списке, и дальше уже, если интересно, переходить под кат. В этом случае пустая строка после <cut/> очень помогает, т.к. сразу видно, откуда начинать (продолжать). Имхо.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.