erjemin/2025-etpgrf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: описание модуля висячей типографики +

Browse Source
This commit is contained in:
Sergei Erjemin
2025-10-28 23:43:37 +03:00
parent 41f4090439
commit 65a04e6c44
1 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
README.md
View File

@@ -267,19 +267,20 @@ result = typo.process("100 км/ч") # Останется без
Это создаёт идеально ровный край не по формальным границам знаков, а по оптическому краю — по первым буквам строк. Это создаёт идеально ровный край не по формальным границам знаков, а по оптическому краю — по первым буквам строк.
Текст выглядит гораздо аккуратнее и профессиональнее. Текст выглядит гораздо аккуратнее и профессиональнее.
В современном CSS есть свойство `hanging-punctuation`, которое должно делать всё это автоматически. Но на сегодняшний Интернет публикации (да и бумажные издания) практически игнорируют висячую типографику. Но иногда это отличный
день (конец 2025) его поддержка браузерами практически нулевая (кроме Safari), поэтому на него полагаться нельзя.\ инструмент для акцентной типографики: крупные заголовки, цитаты, выносы, подписи к иллюстрациям, оформленные с помощью
риходится делать "руками" через <span>. висячей типографики, выглядят гораздо эффектнее. В современном CSS есть свойство `hanging-punctuation`, которое должно
делать всё это автоматически. Но на сегодняшний день (конец 2025) его поддержка браузерами практически нулевая (кроме
Safari), поэтому на него полагаться нельзя. Поэтому в типографе etpgrf реализация висячей типографики осуществляется
через оборачивание висячих символов в специальные HTML-теги с CSS-классами.
В вебе это достигается с помощью CSS, оборачивая "висячий" символ или слово в <span> и применяя к нему, например, Оборачивая "висячий" символ или слово в `<span>` и применяя к нему, например, отрицательный `text-indent` или
отрицательный text-indent или margin-left (`<span style="margin-left:-0.44em;">&laquo;</span>`). Важный нюанс: степень `margin-left` (`<span style="margin-left:-0.44em;">&laquo;</span>`). Важный нюанс: степень "вывешивания" у символов
"вывешивания" у символов разная. И не только потому, что кавычка, скобка или точка имеют разную ширину, но еще разная. И не только потому, что кавычка, скобка или точка имеют разную ширину, но еще и потому, что кавычка, например,
и потому, что кавычка, например, может "висеть" на 100% своей ширины, а точка или запятая — только на 50-70%, чтобы не может "висеть" на 100% своей ширины, а точка или запятая — только на 50-70%, чтобы не отрываться от слова совсем.
отрываться от слова совсем.
Типограф `etpgrf` может автоматически оборачивать висячие символы в `<span>` со специальными CSS-классами. По умолчанию эта функция висячей типографики **отключена**. Чтобы её включить, нужно задать параметр
По умолчанию эта функция **отключена**, так как она увеличивает размер HTML. Чтобы её включить, нужно задать `hanging_punctuation` при конфигурировании типографа (по умолчанию `hanging_punctuation=None`):
параметр `hanging_punctuation` при конфигурировании типографа (по умолчанию `hanging_punctuation=None`):
```python ```python
typo = etpgrf.Typographer(hanging_punctuation='left') typo = etpgrf.Typographer(hanging_punctuation='left')
@@ -291,10 +292,10 @@ typo = etpgrf.Typographer(hanging_punctuation='left')
* `'right'` — включены только правые висячие символы (выравнивание по правому краю); * `'right'` — включены только правые висячие символы (выравнивание по правому краю);
* `'both'` или `True` — включены и левые, и правые висячие символы. * `'both'` или `True` — включены и левые, и правые висячие символы.
Так же через `hanging_punctuation` можно задать список тегов, внутри которых висячая типографика не будет Так же через `hanging_punctuation` можно задать список тегов, внутри которых висячая типографика будет применяться
применяться. Это нерекомендованный способ (так как предполагает знание об исходном тексте, и не сработает только для (всегда в режиме `'both'`). Это нерекомендованный способ (так как предполагает знание об исходном тексте, и не сработает
блочных тегов, а поведение "блочных" и "встроенных" может быть переназначено через CSS). Тем не менее он может быть для сточных тегов, а поведение "блочных" и "строчных" может быть переназначено через CSS). Тем не менее управление
полезен в некоторых, редких случаях: висячей пунктуацией на уровне тегов может быть полезно в некоторых, редких случаях:
```python ```python
typo = etpgrf.Typographer(hanging_punctuation=['blockquote', 'h2', 'h3']) typo = etpgrf.Typographer(hanging_punctuation=['blockquote', 'h2', 'h3'])
``` ```
@@ -317,7 +318,7 @@ typo = etpgrf.Typographer(hanging_punctuation=['blockquote', 'h2', 'h3'])
.etp-rdquo { right: -0.4em; } /* ” */ .etp-rdquo { right: -0.4em; } /* ” */
.etp-rsquo { right: -0.22em; } /* ’ */ .etp-rsquo { right: -0.22em; } /* ’ */
.etp-rpar, .etp-rsqb, .etp-rcub { right: -0.25em; } /* ) ] } */ .etp-rpar, .etp-rsqb, .etp-rcub { right: -0.25em; } /* ) ] } */
.etp-period, .etp-comma, .etp-colon { right: -0.15em; } /* . , : */ .etp-r-dot, .etp-r-comma, .etp-r-colon { right: -0.15em; } /* . , : */
``` ```