Последовательный выход первой буквы с CSS?
Я пытаюсь реализовать выход за пределы первой буквы первого абзаца основного текста. Я застрял в том, чтобы обеспечить постоянный интервал между первой буквой и остальной частью абзаца.
Например, существует огромная разница в расстоянии между буквами «W» и «I».
У кого-нибудь есть идеи о том, как уменьшить различия? Я бы предпочел решение на чистом CSS, но при необходимости прибегну к JavaScript.
PS: мне не обязательно нужна совместимость в IE или Opera
Ответы 2
Я пробовал использовать шрифт с фиксированной шириной, например «courier new», и поскольку символы более или менее одинаковой ширины, это сделало его намного менее заметным.
Изменить - этот шрифт неплохой, но может работать только для Windows
p.outdent:first-letter {
font-family: ms mincho;
font-size: 8em;
line-height: 1;
font-weight: normal;
float: left;
margin: -0.1em 0 0 -.55em;
letter-spacing: 0.05em;
}
Примените это к p.outdent:first-letter:
margin-left: -800px;
padding-right: 460px;
float: right;
Это поместит первую букву на правый край абзаца, затем сдвинет ее влево на более или менее ширину абзаца, а затем переместит букву и все отступы на большое отрицательное поле поплавка, чтобы абзац поместился в маржа и не пытается обернуть.
fyi, похоже, это не работает в IE7 :( (но работает в ff, safari, opera и chrome ...)
Ах, позор, но не удивительно. Учитывая причудливую и недокументированную загадочную коробочную модель IE7, я бы, вероятно, просто переместил букву, оставленную в IE7, и позволил бы вырезать угол. Альтернатива - потратить два дня на возню, а потом все равно этим заняться.
Я, вероятно, просто сделаю что-то вроде моего оригинального решения для IE7 и 8, когда дойду до их исправления. Еще раз спасибо!
Я в порядке, если Я могу найти моноширинный шрифт, который довольно близко соответствует моему основному шрифту (Джорджия).