Старинная типография на новый лад
Jan. 11th, 2017 02:55 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
spamsinkПредположим, мы хотим аутентично воспроизвести в браузере какой-нибудь машинописный текст, использующий для эффектов наложение произвольных символов. Для этого берем какой-нибудь моноширинный фонт (если очень хочется, то имитирующий пишущую машинку) и, казалось бы, при современном-то развитии экранно-печатного дела на западе, что нам может помешать?
Идея в том, чтобы "поднять" очередную строку до уровня предыдущей. Ну хорошо, пишем себе
и получаем убожество: херы оказываются ниже, чем надо.
А всё потому, что интерлиньяж (line-height) по умолчанию равен не 100% текущего кегля (font-size), а "roughly" 120% (поищите "css default line height" - убедитесь), да еще и зависит от браузера и шрифта, поэтому хоть и выходит похоже на правду, если написать -1.2em или даже -1.25em, но делать так будет браузеро-зависимо, да и попросту хочется один и тот же CSS-элемент использовать для наложения строк независимо от текущего интерлиньяжа, который не обязан быть близок к 1.2.
Вот и вопрос: какую магию надо написать, чтобы атрибутам верхней и нижней границы автоматически присваивалось текущее размерное значение line-height с обратным знаком? "Размерное" важно, потому что line-height, наверное, единственный атрибут, который может принимать не только размерные значения (в случае обозначения в процентах - по отношению к унаследованным в рамках DOM), а и безразмерное, что означает требование использовать это значение как кратность по отношению к [максимальному, насколько я понимаю] кеглю, встретившемуся в данной строке текста, каким бы образом кегль ни был установлен. А если вдруг атрибутам границ присвоится 1.2, для них это будет означать просто пиксели, что бесполезно.
Идея в том, чтобы "поднять" очередную строку до уровня предыдущей. Ну хорошо, пишем себе
<pre> Мой тятя дядя самых честных правил <div style="margin-top: -1em; margin-bottom: -1em;"> xxxx</div> Когда не в шутку занемог... </pre>
и получаем убожество: херы оказываются ниже, чем надо.
А всё потому, что интерлиньяж (line-height) по умолчанию равен не 100% текущего кегля (font-size), а "roughly" 120% (поищите "css default line height" - убедитесь), да еще и зависит от браузера и шрифта, поэтому хоть и выходит похоже на правду, если написать -1.2em или даже -1.25em, но делать так будет браузеро-зависимо, да и попросту хочется один и тот же CSS-элемент использовать для наложения строк независимо от текущего интерлиньяжа, который не обязан быть близок к 1.2.
Вот и вопрос: какую магию надо написать, чтобы атрибутам верхней и нижней границы автоматически присваивалось текущее размерное значение line-height с обратным знаком? "Размерное" важно, потому что line-height, наверное, единственный атрибут, который может принимать не только размерные значения (в случае обозначения в процентах - по отношению к унаследованным в рамках DOM), а и безразмерное, что означает требование использовать это значение как кратность по отношению к [максимальному, насколько я понимаю] кеглю, встретившемуся в данной строке текста, каким бы образом кегль ни был установлен. А если вдруг атрибутам границ присвоится 1.2, для них это будет означать просто пиксели, что бесполезно.
