Семантическая разметка против последовательной типографии - PullRequest
Новая
       6

Семантическая разметка против последовательной типографии

1 голос
/ 16 ноября 2011

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

Что касается семантики страницы, вы должны упорядочить страницу в иерархии, основанной на значениях h1, h2, h3, h4 и т. Д. Отличным примером этого будет http://zeldman.com.

Но мне было трудно поддерживать это, если вы хотите использовать последовательную типографику.В конечном итоге вам приходится повторять типографские правила и выполнять сложную математику, поскольку наследование вступает в игру в вашей таблице стилей.Поэтому другой подход заключается в том, чтобы не беспокоиться о порядке тегов заголовка и просто выбрать их для размера шрифта.Вы можете увидеть этот подход здесь: http://fluidbaselinegrid.com/ или на сайте Эрика Мейера здесь http://meyerweb.com/. Сайт Эрика вообще пропускает тег h2.

Итак, какой подход лучше?Есть ли способ сделать то, чего мне не хватает?

Ответы [ 3 ]

1 голос
/ 17 ноября 2011

Семантика и стиль ортогональны. Html-теги, такие как <h1>, используются в семантических целях. CSS используется для стилизации и типографики.

Вы можете изменить внешний вид вашего документа независимо от семантической разметки.

Посмотрите на CSS Zen Garden , если вам интересно, что можно сделать с помощью одного конкретного HTML-документа при правильном использовании CSS.

0 голосов
/ 18 ноября 2011

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

Что касается адресации по вертикальному ритму, первое, что нужно иметь в виду, это всегда использовать [em] в качестве единицы измерения. Это позволит установить относительные измерения между всеми вашими элементами. Оттуда, не становясь полностью сложным, я установил всю свою типографику относительно друг друга, используя:

http://drewish.com/tools/vertical-rhythm

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

/****** TYPOGRAPHY ******/
body {font:15px/1.5em HelveticaNeueRoman, "Helvetica Neue", Arial, Helvetica, sans-serif; /* baseline */
-webkit-font-smoothing: antialiased;*font-size:small;
}
    p {font-size: 1em; line-height: 1.4667em; margin:0 0 1.4667em 0;}
    p.intro {font:1.2667em/1.375em Cambria, Georgia, Times, serif;margin:0 0 1.1579em 0;font-style:italic;}
    a, a:link {color:#24518f;text-decoration:none; -webkit-tap-highlight-color:#FF5E99;}
        a:hover {color:#b20000;}
        a:active {position:relative;top:1px;}
        a:focus {outline: thin dotted;}
        a:hover, a:active {outline: 0;}
        a {-webkit-transition: color .25s ease-out, text-shadow .25s ease-out;  -moz-transition: color .25s ease-out, text-shadow .25s ease-out;
    -o-transition: color .25s ease-out, text-shadow .25s ease-out; transition: color .25s ease-out, text-shadow .25s ease-out;}

/* headers */
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color: #414141;}
    h1 {font:1.9333em/1.5172em HelveticaNeueHeavy;margin-bottom: 0.7586em;letter-spacing:-1px;}
    h2 {font:1.6em/1.8333em HelveticaNeueBold;margin-bottom:0.7586em;letter-spacing:-1px;}
    h3 {font:1.2667em/1.1579em HelveticaNeueBold;margin-bottom: 1.1579em;}
    h4 {font:1.0667em/1.375em HelveticaNeueBold;margin-bottom: 1.375em;}
    h5 {font:0.9333em/1.5714em HelveticaNeueBold;margin-bottom: 1.5714em;}
    h6 {font:0.8667em/1.6923em HelveticaNeueBold;margin-bottom: 1.6923em;}

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

http://thesquaregrid.com/
http://fluid.newgoldleaf.com/
http://lessframework.com/

Надеюсь, это поможет!

0 голосов
/ 17 ноября 2011

Используйте классы для стиля.

Идите вперед и установите базовые стили для h1-h6, для заголовков, которые стилистически отличаются от этих базовых стилей, используйте класс для переопределения базового стиля.1004 * Таким образом, вы можете использовать соответствующий тег и поддерживать контур страницы, одновременно стилизуя их.

...