Типографический CSS фреймворк/шаблон, с учетом кириллицы
Подскажите, существуют ли готовые CSS шаблоны или фреймворки (если так можно сказать) которые служат скорее не для правильной семантической верстки, а для наиболее правильного и «красивого» отображения технических статей(!) на русском языке. С учетом всех современных типографических правил и дизайнерских приемов. Отлично подобранные отступы для заголовков, абзацев, списков, словарей, шрифты, размеры. Желательно чтобы человек, который не занимается профессионально версткой мог легко разобраться и использовать.
Пожалуй немного уточню. Есть много людей которые публикуют статьи на своих небольших сайтах. Например посвященных какой-либо программе. Такие сайты как правило не используют никакие CMS и созданы на бесплатном вирт. хостинге. Так вот, почти все они — неуклюжи, не красивы и однотипны, если это не страничка дизайнера или верстальщика. Но кроме последних очень много людей других специальностей, технарей например, среди которых был бы востребован такой шаблон. Вот я и подумал, возможно кто-то создал подобное.
Верстальщику платят за верстку конкретного дизайна, я же говорю о чем-то общем, что изменило бы вид тысяч простых (часто вообще без CSS) страничек.
Всё что вам нужно знать о типографике и читабельности:
1. Как можно больше контраста между текстом и фоном
2. Высота строки 1.4em-1.6em (свойство CSS: line-height: значение)
3. Шрифт заголовков — без засечек(sans-serif), шрифт текста — с засечками(serif) — удобней читать и навигироваться
4. Ширина блока с тестом — примерно 2 алфавита
5. Добавьте отступы между параграфами
6. Отступ между заголовком и параграфом надо сделать чуть меньше чем чем между обычными параграфами
7. Выравнивание по ширине (justify) — плохо, ад и ппц, выравнивать лутше просто по левому карю
дополните если что забыл
про 3 — гдето было в докладах непомню) это пришло из бумажной типографики, что текст с засечками, особенно небольшого размера читать легче
про 7 — например кратко тут, в Text Align articles.sitepoint.com/article/principles-beautiful-typography/4 — браузеры несовершенны, и при выравнивании по ширине небольшой колонки в тексте появляются реки и каньёны.
3. Засечки более явно выделяют полосу строки, уменьшают разрывы между буквами и отслеживать при чтении такую строку проще. Заголовкам это ненужно — там буквы крупные, легко распознаются.
7. Браузеры не умеют делать переносы по слогам, поэтому выравнивание по ширине влечет перенос по словам. Из-за этого в каждой строке помещается разное число слов и символов. Чтобы не растягивать буквы в словах, увеличиваются интервалы между ними. Эти интервалы получаются разной ширины, что херит весь такт текста, глазу все время приходится приспосабливаться под разной величины пробелы, текст выглядит рваным.
При выравнивании по левому краю интервалы между словами одинаковые, читать такой текст легче. Из-за разной длины строк правфй край получается рваным и благодаря этому легче отслеживать строки при чтении.
Ну если бы такой шаблон уже был, то почему бы и не воспользоваться? Можно надеятся на браузер и сверстать «серую» страничку, а можно придать современный и удобный вид на основе CSS. Например статьи с www.w3.org/standards/techs/html все же используют не встроенный в браузеры вид.
Да и я не понимаю что вы подразумеваете под «доскональностью»? Ну например «легкие» таблицы (по-моему встречал где-то здесь artgorbunov.ru ), далее нашел у пользователя cherenkevich интересные мне статьи о модульной сетке. На сайте студии Лебедева много советов. Но все это неподвластно не специалистам. В инете на том же народе куча статей любителей и специалистов по самым разным темам. Но вся верстка таких страничек «серая». Подумал, неужели никто еще не создал шаблон для публикации статей :) который мог бы использоваться на тысячах страничек, не сайтов, а страничек, где есть только заголовок, подзаголовок, абзац, список и т.д.
Имхо, такой CSS пишется, как вы сказали, «неспециалистом» за час максимум. Всего-то проставить понравившиеся отступы и размеры шрифтов. Всё остальное — шелуха, которая может и не понадобиться, либо подгон дизайна под существующий сайт.
Уже готовую типографику (набор стилей CSS), можете взять и подключить с существующих CSS-фреймворков.
Например, возьмем Blueprint CSS framework — в нем есть всё для построения готовых и семантичных шаблонов с готовыми наборами стилей для типографики, форм, и соответственно с корректным отображением под все браузеры.
P.S.: данный CSS-фреймворк можно быстро и легко разжевать даже человеку, не имеющему предстваления о верстке в целом. Все есть на примерах и с документацией, правда зачастую на английском языке.
Когда у меня появилась цель сверстать не «серую» страничку для статьи(!) — я все-таки собрался и ознакомился с азами. Но чем дальше я изучал, тем больше понимал что мне далеко до идеального мульти-браузерного CSS шаблона:
— Красивый заголовок латинскими буквами из какого либо опубликованного шаблона — смотрелся совсем плохо кириллицей;
— Рассчитав верхние/нижние отступы для списков, я вдруг спотыкался когда требуются вложенные списки (особено если он у последнего элемента), или списки в которых каждый пунт состоит из большого текста, что по сути превращает его в абзац, а значит хочется и верхние/нижние отступы увеличить;
— Вся эта модульная сетка и «верхний отступ больше нижнего» у заголовков — для меня проблема;
— Идеально подобрать размеры подзаголовков разных уровней;
— А все эти pt, em, px;
— И т.д.
Вообщем я сделал вывод: либо я становлюсь верстальщиком :), либо ищу готовое решение. Верстальщиком я врядли стану, но изучая и экспериментируя я пришел к выводу, что все эти западные CSS фреймворки не обеспечивают приемлемой «красоты» для публикации статей на русском языке. В примерах blueprintcss вообще используется тахома, а по мне для чтения больших текстов лучше вердана :)
«Красота» — это уже из сферы дизайна, особенно если говорить о шрифтах заголовков.
CSS-фреймворки дают заготовки, уже готовые для работы. Модификация — это уже работа желаемого дизайна+доработка верстки под свои нужды.
Другое дело поиск шрифта с кириллицей — но тут рунет уступает по кол-ву красивых шрифтов.
Для упрощения порога входа для желающих использовать красивые разноязычные шрифты — есть сервис Google Font
Я не думаю, что есть универсальные и красивые шаблоны, для использования «из коробки», даже если и есть, не факт, что они подходят под «вкус и цвет».
Ведь доработать тот же BlueprintCSS — дело за малым, и даже вам не придется изучать всё азы верстки. Тот же гугл/яндекс, или разжеваный до немогу справочник htmlbook.ru, вам помогут быстро изменить вид и стиль заголовка, а вам только останется понять, что существуют всего 6 (h1-h6) заголовков в верстке.
1. Это совсем несложно — выучить основные теги и css-правила для оформления текста. За два дня. Ну за неделю (в самом крайнем случае). Зато вы точно оформите так, как нужно вам.
2. Просто прицепить css к тексту не выйдет, если текст не размечен семантически. То есть заголовки должны быть как h*, цитаты — как blockquote, параграфы — как p и т. д. То есть без верстки в любом случае не обойтись. Если же у где-то параграфы отделяются br-ми, а заголовки описываются тегом font, то никакой css-фреймворк тут не поможет.
3. Хороший текст — это не только css. Это правильные кавычки и тире для данного языка. Это привязанные неразрывными пробелами короткие служебные слова. Это правильные номера телефонов. Css всего это не сделает.
4. Ясно выраженная мысль и грамотный язык в любом случае в сто раз важнее всякой верстки.
Средний
Простой
