Просьба о помощи

      Друзья, у кого есть опыт в верстке текстов на сайтах? Кому не жалко подобным опытом поделиться? Я — нуб и жажду советов. Буду благодарен за любую информацию: от «как выделить абзац, не ставя шесть пробелов» (tab при опубликовании текста почему-то аннулируется) до «как использовать на mypage иные шрифты, кроме предложенного по умолчанию».

Обсудить у себя 0
Комментарии (7)

Жизнь — боль, особенно верстальщику на МП. Для начала — а цели верстки? Что требуется получить? Говорим именно о тексте\картинках в нем или о дизайне в целом? Когда с этим определишься, начинается простое изучение html и css и сложная борьба с правилами и ограничениями на МП.

Если хочется совсем красивых извратов и некоторой защиты от копирования — лучше делать заранее текст\пост в формате картинки, а потом его сюда вставлять.

Если просто чуть-чуть читабельней сделать — то достаточно css подправить в настройках блога, это просто. Тут два варианта: можно самостоятельно изучать, наприер на w3school.com что какой тег\команда значит и делать, ну если не очень напряжное, например я могу подсказать, но именно подсказать, т.е. если знаешь что хочешь получить и объяснить это — могу сказать как.

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

— лучше пользоваться стандартными шрифтами, допустимо менять размер, интервалы, но сам шрифт должен быть «системным» и читабельным. Arial, Helvetica, sans-serif ...

Статьи по теме:

https://habrahabr.ru/post/112736/   

(обратить внимание на примечание по поводу поддержки кирилицы)

www.wearymax.ru/webmasters/fonts/

— выделение абзаца в html это целая песня. Здесь следует забыть про табуляцию, её нет, точнее она равна 1 пробелу. Забыть про пробелы — любое количество пробелов — это ОДИН пробел в результате. Это может быть обмануто специальным символом, в коде он выглядит   ими можно донабрать, но это «темная сторона силы» и пользоваться ей не следует. Можно, конечно, обернуть все в тег < pre >, он сохраняет пробелы и переводы строк, но это тоже не совсем правильно. Здесь надо сделать еще одно отступление в сторону идей разметки и оформления. В идеале HTML это именно разметка, т.е. указания где в тексте абзацы, где заголовки, где ссылки. CSS — оформление поверх этой разметки. Поэтому абзац с точки зрения разметки это то, что помещается между тегами < p >  < /p > (без пробелов, я их добавил для обхода фильтров очистки в постах, возможно все равно потеряются угловые скобки тегов). Все, абзац размечен. А дальше стилями (CSS) указывается как он должен отображаться. «Выделить абзац», я так понимаю это «с красной строки» в стилях зовется text-indent — отступ первой строки. Пример и описание можно глянуть тут www.w3schools.com/cssref/pr_text_text-indent.asp

Вот только на МП есть масса скрытых «вырезаний» и ограничений. Например, я так и не смог пересилить шаблон, чтобы он понимал мои id и class элементов, а без них делать нормальное оформление очень морочно. Это надо в каждый элемент вписывать его стили, по сути готовить разметку со стилями в самом коде, т.е. что-то типа < p style=«text-indent:  50px; padding: 0;» > и т.д. для каждого элемента, а это напрягает, требует времени и совершенно бесполезно.

 

Доброго времени, Wanderer!
Очень благодарен вам за ответ. С дизайном страницы изращаться я не собирался — уже подметил, что минимализм приятен для глаза. На самом деле пока заметил только три проблемы:  
1. уже оговоренная «красная строка», или выделение абзаца;
2. использование на этом сайте стандартных шрифтов из тех, что при выделении курсивом выглядят как каллиграфический рукописный текст, а не как печатный с наклоном.  Последний трудно читать — глаза «цепляются» за углы. 
3. Третья проблема уже выходит за рамки темы. Заметил, что долго набирающиеся длинные тексты спокойно отображаются на странице, но не выводятся в эфир. Проблему решил перезалитием текста. Но мне всё ещё интересно, почему так происходит.

по п.1 — Text-indent в помощь. В настройках блогах, в стилях искать или добавлять в конце что-то типа

.post-text p { text-indent: 20px; }

это для всех тегов параграфа (< p> ) в пределах блока выведения текста поста задаст отступ 20px у первой строки. Но понадобится выработать определенную привычку в разметке. Например, ваш следующий пост «зарисовка...» с точки зрения разметки идет одним параграфом. Соответственно в нем только первая строка первого абзаца будет с отступом. В редакторе поста попробуйте повставлять переводы строк («ентерами» разбить) и посмотреть, что получится.

2. В этом дизайне сейчас воткнут шрифт tahoma… мне переключиться на утилиты разработчика надо, поэтому пока небольшой таймаут возьму… В целом же, если следовать рекомендациям и ограничиваться системными, то там же, в стилях задать или поменять параметр font-family и\или font. Я бы предложил добавить переопределение шрифтов для поста и комментариев, не трогая основные, назначенные в стилях. Для этого в css надо будет добавить строки

.post-text, #comments { font-family: Tahoma,Helvetica,Lucida,LucidaTypewriter,sans-serif;  }

Точнее, вот этот код просто пример, на базе шрифтов, что задействованы сейчас. Значит следующее, что для элементов внутри блоков post-text (сам пост) и #comments (все комментарии) должен быть один из указанных шрифтов. Выбираются они браузером путем перебора слева-направо, пока не наткнется на существующий. Т.е. если есть tahoma — отображает её, если её нет — helvetica и т.д. Сюда нужно будет вписать подходящий\понравившийся шрифт из ссылок, что я давал в прошлом комментарии.

3. Тут может быть масса вариантов. Сам не заморачивался этим делом, но полагаю что от одного пользователя в эфире может висеть только один, последний опубликованный, пост. Возможно, за день, но не проверял. А не отображаться при долгом наборе может по причине того, что дата и время берется от создания поста, а не публикации (не проверял) и в итоге он оттесняется более свежими, смещаясь на вторую-третью страницу эфира.

Ну да, там все такие… попробуйте font-family: georgia; поставить… times тоже будет скругленней, но прямой выглядит мелковато. Обратил внимание, что без указания шрифтов, т.е. какой-то из стандартных в firefox тоже нормально смотрится. Повыбирать можно тут:

www.w3schools.com/cssref/playit.asp?filename=playcss_font-family

но все равно надо бы проверить потом здесь и курсив, и русские буквы.

Wanderer, спасибо, всё получилось. Вы удивительны!

Не за что )

Комментарий был удален
Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети:

Лис
Лис
сейчас на сайте
Родилась: 1 Апреля
Читателей: 9 Опыт: 0 Карма: 1