Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 44
Всем было бы намного проще, если бы парсер Хабра просто съедал весь whitespace за пределами тэгов.
Лично меня это свело бы с ума, как сейчас ломает сознание Markdown, хоть в некоторых моментах (при верстке большого кол-ва кода) он намного удобнее.
Всем было бы намного проще, если бы Хабр просто поддерживал Markdown. (И Внезапно, он уже)
Мне — нет. Я считаю что ресурс вроде Хабра просто должен поддерживать HTML.
Так он его все равно не поддерживает же. Можно использовать только ограниченный набор, white list. А с таким же успехом можно и в MD все функции реализовать.
Честно говоря, слабо представляю чего такого может понадобиться сделать, чего не может разрешённый вайтлист, но при этом может маркдаун. Я, наверно, не так часто статьи пишу. Приведите пример, пожалуйста.
Вопрос не в том, что может MD, но не может вайтлист, а в том, что может вайтлист, но не может MD. Потому что, при прочих равных, MD гораздо человечнее HTML-я.
А я вот HTML уже очень давно знаю, и мне он интуитивно удобнее. Зачем я буду запоминать эту дополнительную разметку? Этот MD очень похож на то что было в своё время на форумах, и называлось BBcode. И там оно немного отличалось. Было, кажется раньше ещё, вроде вконтаче или какой-то ещё социалке, только я не помню там MD или тоже был клон очередной…
А завтра изобретут ещё одну супер-человечно-понятный синтаксис и всё сначала? А зачем, если есть HTML и он всё это может и даже больше.
А завтра изобретут ещё одну супер-человечно-понятный синтаксис и всё сначала? А зачем, если есть HTML и он всё это может и даже больше.
Этот MD очень похож на то что было в своё время на форумах, и называлось BBcode.
BBCode гораздо ближе к HTML, чем к MD
А зачем, если есть HTML и он всё это может и даже больше.
Ради эффективности, конечно. Потратить 10 минут на изучение MD проще, чем вводить зубодробительные таги HTML (с переключением раскладки) каждый раз
и даже больше
Где больше-то?
Ну сверстайте-ка мне на MD ресурс вроде хабра, там и обсудим где больше, где меньше…
А давайте.
Кстати, в моем сообщении речь шла об ограниченном наборе html-тегов, доступном на хабре, а не о полноценном HTML+CSS
Кстати, в моем сообщении речь шла об ограниченном наборе html-тегов, доступном на хабре, а не о полноценном HTML+CSS
По вашей ссылке шаблонизатор, который прогоняет текст через простенький парсер и вставлет это в шаблон. Морда у него через HTML свёрстана.
Вы знаете, у меня ощущение что вы не слышите оппонента.
Давайте по другому. Вот вам пара тегов, которые выводятся прям сверху в хелпе при создании поста на Хабре:
<source lang=«Язык»></source>
<slideshow>http://...</slideshow>
<spoiler title=«Заголовок»>Содержимое</spoiler>
И приведите мне, пожалуйста аналоги в MD, которые будут работать сходу на любом стандартном парсере MD.
Вы знаете, у меня ощущение что вы не слышите оппонента.
Давайте по другому. Вот вам пара тегов, которые выводятся прям сверху в хелпе при создании поста на Хабре:
<source lang=«Язык»></source>
<slideshow>http://...</slideshow>
<spoiler title=«Заголовок»>Содержимое</spoiler>
И приведите мне, пожалуйста аналоги в MD, которые будут работать сходу на любом стандартном парсере MD.
Отдельно хочется заметить, что чуть ли не лучшим является соотношение КДПВ 2 к 1, т.е. изображения 800х400 px. Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.
Почему 2 к 1, если не секрет?
Видимо, дело во внешнем виде картинок в ленте новостей в ВК, да и на самом Хабре "прямоугольные" КДПВ выглядят гармоничнее, позволяя уместить как и КДПВ, так и текст до ката в пару абзацев в один экран с запасом.
Что я видел в соцсетях — там квадрат слева, текст справа. Есть какие-то скриншоты как оно "гармоничнее" выглядит 2к1?
В соц. сетях используется короткая ссылка вида https://habr.ru/p/277577/ без превью. Картинка, которая обычно размещена на КДПВ, вставляется отдельно вручную:
Почему ориентир на ВК? Там более полумиллиона подписчиков в группе.
Почему ориентир на ВК? Там более полумиллиона подписчиков в группе.
Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой
seo и smm — это современное название спамеров, а спам — богомерзок по природе, их нужно выжечь каленым железом из наших Интернетов
А я, вот, не могу быстро читать текст, если после каждого абзаца есть пропущенная строка. У меня глаза разбегаются от такого. Стараюсь все скомпоновать, чтобы не было лишних отступов (особенно не люблю отступ после заголовка), а модераторы приходят и меняют. Писал раз 6 в поддержку, чтобы в профиле поставили заметку модераторам, чтобы не меняли мою разметку, а они все равно каждый раз переделывали по-своему. Теперь в начале каждого поста оставляю HTML-комментарий с просьбой — работает!
С точки зрения редактуры и верстки текста (любого, как цифрового, так и печатного) — это экстремально неправильно, серьезно.
P.S. По большому случаю, вам, как автору, достаточно перечитать текст единожды перед публикацией. Тут больше должен работать принцип не "как лучше мне" а "как лучше читателю", т.е. махнуть местами эгоизм на уважение к аудитории.
P.S. По большому случаю, вам, как автору, достаточно перечитать текст единожды перед публикацией. Тут больше должен работать принцип не "как лучше мне" а "как лучше читателю", т.е. махнуть местами эгоизм на уважение к аудитории.
Извините, но писать абзацы слитно, когда нет красной строки, — ужасно.
https://habrahabr.ru/post/276831/ — с вашей точки зрения, верстка выглядит плохо? Вероятно, у меня не очень развито угловое зрение. Дело не только в компоновке текста. Мне еще удобней использовать телефоны и компьютеры с маленьким экраном (сейчас пишу этот текст на телефоне с диагональю 3.5")
А вы обидчивый? Или правду сказать?
Правду говорите, конечно же. И еще в другие посты загляните.
Понимаете, есть нормы верстки текста, которые пришли к нам из классической типографики и книгопечатания. Отсюда все эти межстрочные отступы, шрифты, разрывы и красные строки. Разрыв между абзацами используется не только как визуальная разгрузка текста, не позволяя слиться ему в единое целое, но и как инструмент логического ударения. Новый абзац — новая мысль. Это общепринятый подход в любых изданиях, СМИ и литературе, всеобщий стандарт. Единственное место, где он не соблюдается, если так сразу прикинуть — это словари. Но их можно поставить отдельно, как литературу с высокой плотностью различной информации. Но даже в словарях каждое слово-абзац обозначается болдом для облегчения навигации. У вас даже этого нет.
Вы сказали, что чаще используете телефон или планшет. Я использую экран 1920х1080 с диагональю 21'5. Вы сказали, что используете мобильные девайсы, в основном. Кто-то не использует их вообще. У вас помещается на экран 5-9 строк текста, у меня — 50 (цифра с потолка), причем в хайрезе, без всяких зумов и прочего. Получается, что у вас небольшая емкость текста на экране + физические границы устройства позволяют ориентироваться по тексту. У меня вся ваша публикация почти влазит в один экран и если она без красных строк, то я, с большой долей вероятности, не имея визуальных ориентиров, могу просто строчку при чтении пропустить.
Я для себя выработал правило: всегда верстать текст исходя из Full-HD разрешения экрана (1920х1080), т.к. минимум половина аудитории читает Хабр с экрана, а мобильные пользователи всегда могут одним легким движением пальцев зазумить текст, для них это норма.
Сообщение в начале статей, кстати, прекрасно.
Вы сказали, что чаще используете телефон или планшет. Я использую экран 1920х1080 с диагональю 21'5. Вы сказали, что используете мобильные девайсы, в основном. Кто-то не использует их вообще. У вас помещается на экран 5-9 строк текста, у меня — 50 (цифра с потолка), причем в хайрезе, без всяких зумов и прочего. Получается, что у вас небольшая емкость текста на экране + физические границы устройства позволяют ориентироваться по тексту. У меня вся ваша публикация почти влазит в один экран и если она без красных строк, то я, с большой долей вероятности, не имея визуальных ориентиров, могу просто строчку при чтении пропустить.
Я для себя выработал правило: всегда верстать текст исходя из Full-HD разрешения экрана (1920х1080), т.к. минимум половина аудитории читает Хабр с экрана, а мобильные пользователи всегда могут одним легким движением пальцев зазумить текст, для них это норма.
Сообщение в начале статей, кстати, прекрасно.
Разрыв между абзацами используется не только как визуальная разгрузка текста, не позволяя слиться ему в единое целое, но и как инструмент логического ударения. Новый абзац — новая мысль.Вероятно, я не чувствую того критерия, по которому его следует правильно разрывать. Как вы видите, у меня там есть один единственный разрыв, но перед ним много текста. Мысль-то одна, не вижу смысла ее разрывать.
Вы сказали, что чаще используете телефон или планшет.Да, вроде, нет, как раз таки наоборот.
Я использую экран 1920х1080 с диагональю 21'5.А я — 23.8" 3840×2160. Это что-то меняет? Да ничего.
Как правило, в текстовых процессорах делают отступ от заголовка снизу меньше, чем высота строки. На хабре, увы, так сделать нельзя, но отступ, по моему мнению, и так достаточен, а новая строка после заголовка выглядит ни к селу ни к городу.
Да, вроде, нет, как раз таки наоборот.
Мне еще удобней использовать телефоны и компьютеры с маленьким экраном (сейчас пишу этот текст на телефоне с диагональю 3.5")
Красная строка — есть визуальный ориентир. У вас ярко выраженная привычка читать "стены" текста, правда, не совсем понятно, откуда взявшаяся. Для остальных 95%-99% читателей такая верстка крайне неудобная и утомительная, т.к. даже взгляд в сторону не отвести — потеряешь где читал.
У хабра есть проблема в том, что все отступы у всех элементов идут только снизу. Поэтому код вида:
Превращается в вот такую парашу:
После чего над вставить пустую строку перед h1, и она будет выглядеть более-менее сносно, но всё равно отстойно. И так у всех элементов какой-то гений сделал отступ снизу, а не сверху, как должно быть. Лучше б уж вообще нигде отступов в таком случае не делали и форматировалось бы всё пустыми строками, чем такое ущербанство, имхо.
Текст абзаца длинного, 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.Превращается в вот такую парашу:
После чего над вставить пустую строку перед h1, и она будет выглядеть более-менее сносно, но всё равно отстойно. И так у всех элементов какой-то гений сделал отступ снизу, а не сверху, как должно быть. Лучше б уж вообще нигде отступов в таком случае не делали и форматировалось бы всё пустыми строками, чем такое ущербанство, имхо.
Да, мне так не очень удобно читать. Хорошо, что у вас статьи и так разбиты на части, разделяемые заголовками, картинками, кодом и т.п. Но относительно большой текст я бы так читать не смог.
Знаете, мне кажется вы просто привыкли к такому. У меня был один ученик, который привык не ставить пробелы между операторами, ну то есть как то так int a=5+f(3). Аргументировал он это тем, что так весь код помещается в поле зрения. Я с ним пообщался и понял, что ему действительно так удобнее, более привычно. Но так как мы писали код в команде, все равно пришлось переучивать =)
Знаете, мне кажется вы просто привыкли к такому. У меня был один ученик, который привык не ставить пробелы между операторами, ну то есть как то так int a=5+f(3). Аргументировал он это тем, что так весь код помещается в поле зрения. Я с ним пообщался и понял, что ему действительно так удобнее, более привычно. Но так как мы писали код в команде, все равно пришлось переучивать =)
Плохо.
Это не «плохо». Это отвратительный кошмар.
Размещение картинки под заголовком — слева, весьма спорная штука. Особенно, если она позволяет оставаться некоторому тексту с правой стороны. Взгляд читателя вынужден метаться от заголовка к началу текста, который оказывается где-то сбоку. Наиболее правильный вариант: именно текст расположить с начала строки — слева, а картинку передвинуть вправо. Конечно, при условии, что ваша картинка вспомогательный материал, а не единственная полезная часть в статье.
Для удобства _чтения_ именно текст должен идти по левому краю, при любом другом варианте глаз будет спотыкаться.
Для удобства _чтения_ именно текст должен идти по левому краю, при любом другом варианте глаз будет спотыкаться.
Нет. Если перемещать картинку в право, то это вынуждает пользователя отвлекаться в право, не зря их называют КДПВ. Плюс ко всему, если делать КДПВ по правому краю, то по середине страницы получается "рваная" линия из-за того, что текст выравнивается только по левому краю, а по правому — нет. Картинка же слева создает идеально прямую (край картинки) визуальную границу от которой не устает глаз, а рваный край справа плавно утекает в белую пелену "листа" страницы.
Не знаю по поводу рваных линий справа. Честно сказать, довольно неожиданный поворот, все кого они беспокоят делают выравнивание по двум сторонам, а не двигают картинку к левому краю, чтобы сдвинуть половину текста.
Я довольно долго вынужден был пользоваться одним сайтом с левым положением картинки, и только когда сделал выравнивание по правой стороне понял, что мне не нравилось. К сожалению, там этого сделать было нельзя.
Для наглядности сделал вам два примера, любой может убедится, что читабельность текста намного удобнее, когда глаза не бегают в поиске начала следующей строки.
http://i73.fastpic.ru/big/2016/0219/8c/d7b315adf661d35e748fa7270feec48c.png
http://i75.fastpic.ru/big/2016/0219/f4/6c19d8ca7b614f6f8fa11958a3339bf4.png
Если же вам категорически необходимо сделать картинку слева, то делайте ее на всю ширину, чтобы справа от картинки текста не было. А лучше всего ее поместить выше заголовка, чтобы чтение не нарушалось. Хотя, можно поспорить о применении в разных условиях, но для сайта с множеством текстов, особенно когде в день выходит десяток статей, то чтение должно быть максимально удобным, и картинка это не единственная проблема, которая должна быть решена правильно.
Я довольно долго вынужден был пользоваться одним сайтом с левым положением картинки, и только когда сделал выравнивание по правой стороне понял, что мне не нравилось. К сожалению, там этого сделать было нельзя.
Для наглядности сделал вам два примера, любой может убедится, что читабельность текста намного удобнее, когда глаза не бегают в поиске начала следующей строки.
http://i73.fastpic.ru/big/2016/0219/8c/d7b315adf661d35e748fa7270feec48c.png
http://i75.fastpic.ru/big/2016/0219/f4/6c19d8ca7b614f6f8fa11958a3339bf4.png
Если же вам категорически необходимо сделать картинку слева, то делайте ее на всю ширину, чтобы справа от картинки текста не было. А лучше всего ее поместить выше заголовка, чтобы чтение не нарушалось. Хотя, можно поспорить о применении в разных условиях, но для сайта с множеством текстов, особенно когде в день выходит десяток статей, то чтение должно быть максимально удобным, и картинка это не единственная проблема, которая должна быть решена правильно.
«Вправо», «посередине», чёрт подери! Понабирали редакторов по объявлению…
Если КДПВ прижата к левому краю, то я не ожидаю увидеть текст правее. И если он там вдруг оказывается, то понимаю я это уже тогда, когда начинаю читать статью со второго абзаца, идущего уже после картинки и каждый раз очень раздражаюсь.
Возможно, во вконтактике действительно правильнее прижимать картику к левому краю, но тут хабр, а не вконтактик и попытки нагнать трафик из вконтактика не повод портить жизнь хабрапользователям.
Если КДПВ прижата к левому краю, то я не ожидаю увидеть текст правее. И если он там вдруг оказывается, то понимаю я это уже тогда, когда начинаю читать статью со второго абзаца, идущего уже после картинки и каждый раз очень раздражаюсь.
Возможно, во вконтактике действительно правильнее прижимать картику к левому краю, но тут хабр, а не вконтактик и попытки нагнать трафик из вконтактика не повод портить жизнь хабрапользователям.
Спасибо, некоторые советы действительно ценные. Однако их можно использовать и в Markdown разметке, т.к. он поддерживает вставки html (а выравнивание для картинок, например, вообще непонятно как в нем сделать без html).
Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.
Так вот для чего нынче статьи на хабре пишут. Печально.
В следующий раз расскажите про вёрстку таблиц ;)
Есть привычка читать начало статьи в списке, и дальше уже, если интересно, переходить под кат. В этом случае пустая строка после <cut/> очень помогает, т.к. сразу видно, откуда начинать (продолжать). Имхо.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Памятка по базовой верстке статьи для Хабра без использования Markdown-разметки