Конфликт между буквенным интервалом и выравниванием текста: центр?

Использование letter-spacing кажется действительно винт с text-align: http://jsfiddle.net/NFAzv/

Гуглинг ничего не изменил. Я что-то пропустил?

EDIT # 1: вот что я получаю (Firefox 3.6.8 и Chrome 12.0.742.91 на Vista): ссылка удалена из-за ограничений ссылок для новичков (ее можно найти в комментариях) (обратите внимание, как делают центры не выстраиваются вообще)

EDIT # 2: Здесь IE9, с вертикальной вертикальной линией, чтобы показать, что неправильно: http://i.stack.imgur.com/C0J0n.png

РЕДАКТИРОВАТЬ № 3: у меня есть подтверждение в комментариях ниже, что проблема возникает для Chrome 10 в Windows 7. По крайней мере, я не единственный, кто сходит с ума.

Ответы

Ответ 1

Кажется, что все браузеры сходились в реализации с буквенным интервалом, что явно противоречит тому, что должно сказать css3.

В частности, см. пример XV в http://dev.w3.org/csswg/css3-text/#letter-spacing0

Браузеры просто этого не делают. IE даже изменил свое поведение в последнее время (IE9, я думаю), чтобы быть больше похожим на другие браузеры и меньше похоже на спецификацию CSS3, как она написана в настоящее время.

Спецификация CSS3 все еще находится в рабочем статусе проекта, поэтому, по-видимому, в какой-то момент она будет изменена в соответствии с тем, что делают браузеры.

Возможно, вы сможете перебалансировать строки, добавив значение padding-left для соответствия интервалу между буквами, но это не всегда возможно.

Ответ 2

Поскольку проблема на самом деле не описана, я предполагаю, что текст отлично не центрирован.

Вы можете использовать text-indent в половине размера интервала между буквами, чтобы исправить это.

.centered {
  letter-spacing:12px;
  text-indent:6px;
}

Проверено только на Chrome OSX, но..

Ответ 3

Кажется, что это работает, но ваше требование для этой совершенства пикселя не соответствует работе по умолчанию letter-spacing. Если вы выделите текст, вы увидите, что он центрируется.

Вы можете использовать следующее обходное решение: демонстрационная скрипта

<div style="text-align: center;">           
  <div style="font-size: 130%; letter-spacing: 0.6em; padding-left: 0.6em;">THIS</div>
  <div style="font-size: 350%; letter-spacing: 0.4em; padding-left: 0.4em;">ILLUSTRATES</div>            
  <div style="font-size: 130%; letter-spacing: 0.4em; padding-left: 0.4em;">THE</div>
  <div style="font-size: 200%; letter-spacing: 0.1em; padding-left: 0.1em;">PROBLEM</div>           
</div>

Ответ 4

Я видел подобную проблему со ссылками подчеркивания: ширина последней буквы включает значение расстояния между буквами. Поэтому примените letter-spacing:0;, потому что последние буквы должны решить проблему. Это уродливо, но работает

...
<div style="font-size: 350%; letter-spacing: 0.4em;">
    ILLUSTRATE<span style="letter-spacing:0;">S</span>
</div>
...

Ответ 5

добавьте 50% размера шрифта в виде текстового отступа, например

    <div style="text-align: center;">
        <div style="font-size: 130%; letter-spacing: 0.6em;text-indent:0.3em">THIS</div>
        <div style="font-size: 350%; letter-spacing: 0.4em;text-indent:0.2em">ILLUSTRATES</div>
        <div style="font-size: 130%; letter-spacing: 0.4em;text-indent:0.2em">THE</div>
        <div style="font-size: 200%; letter-spacing: 0.1em;text-indent:0.05em">PROBLEM</div>
    </div>

Ответ 6

Хотя здесь не был точный вопрос, у меня была проблема, что начальная левая точка текста была слишком далеко вправо:

У меня возникла проблема с тем, что мой текст не был ориентирован горизонтально больше после того, как был применен интервал между буквами, но из-за этого я ограничил контейнер для текста шириной, поэтому он переполнил контейнер. Стоит посмотреть.. это может показаться глупым, но на самом деле это легко ошибочно.