CSS и типография: равномерное вертикальное выравнивание по номерам - PullRequest
Новая
       29

CSS и типография: равномерное вертикальное выравнивание по номерам

1 голос
/ 16 июня 2010

Проверьте следующий скриншот: http://www.jesserosenfield.com/beta/descenders.png

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

Спасибо!

код: 

<div class="postDate">
     <span class="postDay"><?php the_time('j'); ?></span><br/>
     <span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->

и CSS 

.postDate {
    width: 99px;
    height: 74px;
    position: relative;
    left: -30px;
    font-family: Georgia, "times new roman", times, serif;
    background: url(images/dateFlag.png) no-repeat;
    text-align: center;
    color: #ffffcc;
    padding-top: 9px;
    }

.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}

Ответы [ 6 ]

4 голосов
/ 16 июня 2010

Используйте другой шрифт. Arial ставит все основания своих чисел на одну базовую линию. Так же как и Microsoft без засечек. Как и Требушет. Так что, если на то пошло, Times New Roman.

Дело в том, что числа имеют разные восходящие и нисходящие в зависимости от шрифта. Типографы делают центрирование «тела» числа на основе того, что, по их мнению, выглядит хорошо, а затем поднимаются или опускаются оттуда. Обычно это изменение на лицах с засечками, но не всегда. Вы не можете контролировать это, в любом случае. Кстати, 3, 4, 5, 7 и 9 - это те, которые обычно имеют спусковые устройства, а 6 и 8 обычно имеют восходящие.

1 голос
/ 06 января 2015

Проблема здесь на самом деле связана с пропорциональными и табличными значениями .

Вы можете фактически предотвратить это поведение, используя правило CSS font-feature-settings со свойством tnum: 

p {
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}
1 голос
/ 10 июля 2010

В Грузии цифры в старинном стиле . Если вам действительно нужны подкладочные фигуры, вам следует проверить, существует ли версия Грузии для OpenType с этой опцией.

Тем не менее, я не вижу проблемы в использовании фигур в старом стиле в контексте, который вы показываете; нет необходимости все время выравнивать везде:)
Просто установите интервал так, чтобы было достаточно места сверху и снизу.

1 голос
/ 16 июня 2010

Я не уверен, что это сработает, но я бы попробовал одну из вещей:

Похоже, у вас есть функция php для вывода дня и месяца.Вместо того, чтобы просто выводить число, почему бы не попробовать обернуть его в диапазон, который позиционирует / стилирует каждое число соответствующим образом.

Грубый набросок CSS и PHP: 

.georgiaFixNum7 {
    position: relative;
    top: 5px;
    font-size: 18px;
}


echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';

Я понимаю необходимостьЧистое решение css / html со шрифтами, но если вы действительно отчаялись, вы можете попробовать использовать отдельные изображения для отображения чисел.Ваша php-функция должна работать аналогичным образом. 

echo '<img src="/img/' . $num . '.png" />';

Опять же, просто некоторые вещи, которые я бы попробовал, не уверен, сработают ли они.

0 голосов
/ 27 августа 2012

Возможно, вы захотите просто использовать числа из более распространенных похожих шрифтов. Например, Times New Roman не слишком отличается, и смешивать цифры из Times с цифрами из Грузии не так уж плохо.

Вот пример: enter image description here

0 голосов
/ 16 июня 2010

Все, что вы можете контролировать, - это вертикальное выравнивание базовой линии текста внутри родительского элемента.Однако вы не можете контролировать конкретную позицию шрифта контуров различных символов в отношении базовой линии текста.

Как сказал @Robusto, одним из решений является изменение используемого шрифта, чтобы все числа заканчивалисьна исходном уровне.Грузия особенно плоха для чисел, потому что некоторые числа (например, 36 или 84) выглядят странно из-за того, что у одной из цифр есть восходящий, а у другой - спусковой.(Конечно, не о 36 мая, а о том, что вам придется беспокоиться: -))

Другое решение - остаться со шрифтом Georgia, но увеличить отступ по вертикали, чтобы спуск по 3, 4, 57 и 9 не так заметны.В вашем случае добавление 4-5px ниже и выше числа должно сделать это.Конечно, это увеличит общий размер флага даты, что может быть нежелательно.

Альтернативой увеличению вертикального отступа может быть настройка пары пикселей размера шрифта, что приведет квосходящие и нисходящие менее выдающиеся.Это работает только в том случае, если масштаб браузера пользователя установлен на 100% и обычный DPI.Если масштабирование составляет 120% или пользователь использует высокое значение DPI, визуальный размер шрифта увеличивается, а возрастающие / уменьшающие элементы становятся более заметными.

...