diff --git a/README.md b/README.md index a018025..848d59d 100644 --- a/README.md +++ b/README.md @@ -267,19 +267,20 @@ result = typo.process("100 км/ч") # Останется без Это создаёт идеально ровный край не по формальным границам знаков, а по оптическому краю — по первым буквам строк. Текст выглядит гораздо аккуратнее и профессиональнее. -В современном CSS есть свойство `hanging-punctuation`, которое должно делать всё это автоматически. Но на сегодняшний -день (конец 2025) его поддержка браузерами практически нулевая (кроме Safari), поэтому на него полагаться нельзя.\ -риходится делать "руками" через . +Интернет публикации (да и бумажные издания) практически игнорируют висячую типографику. Но иногда это отличный +инструмент для акцентной типографики: крупные заголовки, цитаты, выносы, подписи к иллюстрациям, оформленные с помощью +висячей типографики, выглядят гораздо эффектнее. В современном CSS есть свойство `hanging-punctuation`, которое должно +делать всё это автоматически. Но на сегодняшний день (конец 2025) его поддержка браузерами практически нулевая (кроме +Safari), поэтому на него полагаться нельзя. Поэтому в типографе etpgrf реализация висячей типографики осуществляется +через оборачивание висячих символов в специальные HTML-теги с CSS-классами. -В вебе это достигается с помощью CSS, оборачивая "висячий" символ или слово в и применяя к нему, например, -отрицательный text-indent или margin-left (`«`). Важный нюанс: степень -"вывешивания" у символов разная. И не только потому, что кавычка, скобка или точка имеют разную ширину, но еще -и потому, что кавычка, например, может "висеть" на 100% своей ширины, а точка или запятая — только на 50-70%, чтобы не -отрываться от слова совсем. +Оборачивая "висячий" символ или слово в `` и применяя к нему, например, отрицательный `text-indent` или +`margin-left` (`«`). Важный нюанс: степень "вывешивания" у символов +разная. И не только потому, что кавычка, скобка или точка имеют разную ширину, но еще и потому, что кавычка, например, +может "висеть" на 100% своей ширины, а точка или запятая — только на 50-70%, чтобы не отрываться от слова совсем. -Типограф `etpgrf` может автоматически оборачивать висячие символы в `` со специальными CSS-классами. -По умолчанию эта функция **отключена**, так как она увеличивает размер HTML. Чтобы её включить, нужно задать -параметр `hanging_punctuation` при конфигурировании типографа (по умолчанию `hanging_punctuation=None`): +По умолчанию эта функция висячей типографики **отключена**. Чтобы её включить, нужно задать параметр +`hanging_punctuation` при конфигурировании типографа (по умолчанию `hanging_punctuation=None`): ```python typo = etpgrf.Typographer(hanging_punctuation='left') @@ -291,10 +292,10 @@ typo = etpgrf.Typographer(hanging_punctuation='left') * `'right'` — включены только правые висячие символы (выравнивание по правому краю); * `'both'` или `True` — включены и левые, и правые висячие символы. -Так же через `hanging_punctuation` можно задать список тегов, внутри которых висячая типографика не будет -применяться. Это нерекомендованный способ (так как предполагает знание об исходном тексте, и не сработает только для -блочных тегов, а поведение "блочных" и "встроенных" может быть переназначено через CSS). Тем не менее он может быть -полезен в некоторых, редких случаях: +Так же через `hanging_punctuation` можно задать список тегов, внутри которых висячая типографика будет применяться +(всегда в режиме `'both'`). Это нерекомендованный способ (так как предполагает знание об исходном тексте, и не сработает +для сточных тегов, а поведение "блочных" и "строчных" может быть переназначено через CSS). Тем не менее управление +висячей пунктуацией на уровне тегов может быть полезно в некоторых, редких случаях: ```python 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-rsquo { right: -0.22em; } /* ’ */ .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; } /* . , : */ ```