Пам'ятка щодо базової верстці статті для Хабра без використання Markdown-розмітки

На Хабре, за мірками старожилів, я зовсім недавно, всього два роки, але пишу активно, по можливості кожен день. Так от, читаючи статті, так і просто прокручуючи стрічку свіжих публікацій як на Хабре, так і на 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 рядків (перевірити можна через попередній перегляд статті). При перекладі англомовних текстів часто доводиться об'єднувати кілька абзаців оригіналу в один, так як багато зарубіжні автори мають тягу до тезисно викладу по одному-два речення, що перетворюється на Хабре в частокіл з одиночних-подвійних рядків. Ну, а з іншим, я думаю, ви впораєтеся самі, так як краси у вигляді кольорового тексту і, тим більше кольорових заголовків я не сповідую і вам не рекомендую.

Дотримання рекомендацій, викладених вище, дозволить без особливих збочень зробити ваш текст приємним для ока і зручним для читання.

Сподіваюся, я написав хоч щось корисне. Всім дякую за увагу, Кеп полетів.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.