mirror of
https://github.com/He4eT/oddsquat.git
synced 2026-05-04 20:37:22 +00:00
release: 2026-04-23-191549
This commit is contained in:
parent
22dbe414d1
commit
461c2a920b
80 changed files with 6968 additions and 0 deletions
109
docs/posts/2020/typographic_linter/index.html
Normal file
109
docs/posts/2020/typographic_linter/index.html
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
|
||||
|
||||
<title>
|
||||
typographic linter | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Prettier для текста. Автоматизация рутинной типографики.">
|
||||
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-32.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-27.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-25.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-24.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-17.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="stripesContainer">
|
||||
<div class="stripes">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">oddsquat</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/">
|
||||
posts</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/#2020">
|
||||
2020</a></li>
|
||||
|
||||
|
||||
<li>typographic linter</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="-code-style">Типографика как code style</h1>
|
||||
<h2 id="-">Основы</h2>
|
||||
<p>Для того, чтобы тексты было удобно читать и неудобно писать, человечество придумало разные правила. С орфографией и пунктуацией всё понятно, но про типографические правила говорят редко.</p>
|
||||
<p>Типографика — набор правил вёрстки текста, призванных повысить эстетику и читаемость. Именно в таком порядке, потому что люди сначала замечают текст и только потом начинают читать.</p>
|
||||
<p>Про шрифты, отступы и прочие кернинги в этот раз говорить не будем, потому что мне понравилось крутить ползунки в <a href="https://github.com/KyleAMathews/typography.js">Typography.js</a> и не переживать об эстетике.</p>
|
||||
<p>Разговор пойдёт про висячие предлоги и прочие тире с кавычками.</p>
|
||||
<h2 id="-">Проблематика</h2>
|
||||
<p>Сайты в интернете делятся на два типа: те, кто запаривается за подготовку текстов, и те, кто забивает. <a href="https://meduza.io/">Meduza.io</a> расставляет неразрывные пробелы в текстах новостей, а <a href="https://www.rbc.ru/">rbc.ru</a> — нет. Это не единственное отличие этих новостных порталов, но очень знаковое, как мне кажется.</p>
|
||||
<h3 id="-">Нужно забить!</h3>
|
||||
<p>Я прекрасно понимаю тех, кто не запаривается. Часть не знает, часть забивает (<a href="https://vas3k.ru/">Вастрик</a>, например), а у остальных user-generated content, который довольно рискованно автоматически форматировать. Аргументы для каждой группы:</p>
|
||||
<ul>
|
||||
<li>И так всё понятно.</li>
|
||||
<li>Условный Markdown со спецсимволами теряет половину обаяния.</li>
|
||||
<li>Правильные автоматические кавычки-ёлочки не сделают из комментария в Facebook литературный памятник, зато случайный японский эмотикон может разрушить цивилизацию: <br>
|
||||
<code>Прости ^_^" Забыл купить "Доширак"</code> превращается в <br>
|
||||
<code>Прости ^_^« Мы испортили »Твой текст«</code>.</li>
|
||||
<li>У студентов должен быть отдельный курс по расшифровке смайликов и компилированию C++ из чатов. Бонусный аргумент.</li>
|
||||
</ul>
|
||||
<h3 id="-">Нужно запариться!</h3>
|
||||
<p>Википедия утверждает, что <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0">типографика</a> — это «свод строгих правил», но список не показывает и ссылок не даёт. Стандартом де-факто в рунете являются правила из <a href="https://www.artlebedev.ru/kovodstvo/sections/62/">§ 62 «Ководства»</a>. С ними или соглашаются, или <a href="https://medium.com/@kapanaga/62-6c664105dd30">громко спорят с некоторыми</a>.</p>
|
||||
<p>Пусть мне и не нравится полное отсутствие у Лебедева обоснований или ссылок на источники, но самому погружаться в историю вопроса и читать какой-нибудь авторитетный <a href="https://www.artlebedev.ru/izdal/spravochnik-izdatelya-i-avtora-2017/">«Справочник издателя и автора»</a> страшно: в нём 1010 страниц.</p>
|
||||
<p>Авторы, которые хотят радовать читателей с помощью тире, обычно не пишут в блокноте (мне так кажется) или носят свои тексты из блокнота в <a href="https://www.artlebedev.ru/typograf/">Типограф</a> от Артемия Лебедева, а потом назад. Про первых я ничего не знаю, а ко вторым сам отношусь, когда нужно причесать один или два текста.</p>
|
||||
<p>У Типографа и аналогичных веб-сервисов есть фундаментальные проблемы:</p>
|
||||
<ul>
|
||||
<li>Копировать текст из редактора в браузер, а потом назад — неудобно.</li>
|
||||
<li>Сервис может быть офлайн в неподходящий момент, я тоже.</li>
|
||||
<li>Сервис может читать мои тексты до публикации.</li>
|
||||
<li>Некоторые тексты никому нельзя показывать (по разным причинам).</li>
|
||||
</ul>
|
||||
<p>Признаюсь, что раньше я ни разу не думал об использовании типографа вне браузера, но как только образовалась перспектива заниматься этим на постоянной основе, стало понятно, что копировать текст из редактора в браузер и назад — не самое оптимальное решение и нужно что-то с этим делать.</p>
|
||||
<h2 id="-">Решение</h2>
|
||||
<p>Очевидный вариант — научить текстовый редактор автоматически расставлять неразрывные пробелы, исправлять мелкие опечатки, приводить кавычки к правильному виду, заменять дефисы на тире в нужных местах и многое другое. <br>
|
||||
Вот <a href="https://marketplace.visualstudio.com/items?itemName=rusnasonov.vscode-typograf">плагин для VS Code</a>.</p>
|
||||
<p>Мне больше нравится другой подход. Мы уже давно используем линтеры для языков программирования, давайте использовать их и для контента.</p>
|
||||
<p>Конечно, я не первый, кто так подумал. Плагин выше построен на основе замечательной библиотеки <a href="https://github.com/typograf/typograf">typograf</a> и прямо в README.md файле этого проекта можно найти ссылки на плагины для Babel, Gulp и Grunt.</p>
|
||||
<p>Библиотека очень гибко настраивается, содержит <a href="https://github.com/typograf/typograf/blob/dev/docs/RULES.ru.md">сотню готовых правил</a> и позволяет легко добавлять кастомные.</p>
|
||||
<p>В комплекте есть cli-утилита, которая умеет читать файлы, форматировать их и выводить результат в терминал, но почему-то не умеет файл перезаписывать. Поэтому для своих целей я написал небольшой скрипт, который, получив локаль и имя файла, изменяет его содержимое. С правилами тоже пришлось немного поиграть, потому что дефолтные принимают списки за диалоги и ломают markdown-разметку.</p>
|
||||
<p>Теперь для расстановки всех хитрых значков не нужно ходить в браузер, достаточно просто запустить скрипт, посмотреть с помощью <code>git diff</code> на результат и закоммитить нужные изменения.</p>
|
||||
<p>Красивые тексты лучше некрасивых.</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
2020-11-18
|
||||
</footer>
|
||||
|
||||
<script async
|
||||
data-goatcounter="https://he4et.goatcounter.com/count"
|
||||
src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue