Руководство по оформлению Markdown файлов · GitHub
Markdown — это облегчённый язык разметки, который преобразует текст в структурированный HTML. Следующее руководство поможет вам разобраться, как использовать Markdown.
Заголовки
# Заголовок первого уровня ## Заголовок второго уровня ### Заголовок третьего уровня #### Заголовок четвёртого уровня ##### Заголовок пятого уровня ###### Заголовок шестого уровня
Пример:
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Параграфы и переносы строк
Это параграф. Чтобы создать новый параграф, оставьте пустую строку между двумя строками текста. Это первая строка И это вторая строка, но они находятся в одном параграфе. Для переноса строки используйте два пробела в конце предыдущей строки.
Пример:
Это параграф. Чтобы создать новый параграф, оставьте пустую строку между двумя строками текста.
Это первая строка
И это вторая строка, но они находятся в одном параграфе. Для переноса строки используйте два пробела в конце предыдущей строки.
Выделение текста
*курсив* _курсив_ **жирный** __жирный__ ***жирный курсив*** ___жирный курсив___ ~~зачеркнутый~~
Пример:
курсив
курсив
жирный
жирный
жирный курсив
жирный курсив
зачеркнутый
Списки
Нумерованный список
1. Пункт первый 2. Пункт второй 3. Пункт третий
Пример:
- Пункт первый
- Пункт второй
- Пункт третий
Маркированный список
- Пункт первый - Пункт второй - Пункт третий
Пример:
- Пункт первый
- Пункт второй
- Пункт третий
Вложенные списки
Также можно делать вложенные списки, добавляя 4 пробела перед пунктом:
1.Пункт первый - Подпункт первый - Подпункт второй 2. Пункт второй
Пункт первый
- Подпункт первый
- Подпункт второй
2. Пункт второй
Пример:
- Пункт первый
- Подпункт первый
- Подпункт второй
- Пункт второй
Ссылки
[Текст ссылки](https://www.example.com)
Пример:
Текст ссылки
Изображения
Пример:
Блоки кода
Строка кода
`строка кода`
Пример:
строка кода
Блок кода
Удалите символы \
\``` Блок кода \```
Пример:
Блок кода
Подсветка кода
Для блоков кода можно указывать язык программирования.
Используется подсветка синтаксиса из библиотеки linguist, которая включает множество различных языков.
Удалите символы \
\```python
print("Привет, мир!")
\```
Пример:
print("Привет, мир!")Цитаты
> Первый уровень цитирования >> Второй уровень цитирования >>> Третий уровень цитирования
Пример:
Первый уровень цитирования
Второй уровень цитирования
Третий уровень цитирования
Горизонтальная линия
---
Пример:
Таблицы
| Заголовок 1 | Заголовок 2 | | ----------- | ----------- | | Ячейка 1 | Ячейка 2 | | Ячейка 3 | Ячейка 4 |
Пример:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Таблица как HTML
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Ячейка 1. 1</td>
<td>Ячейка 2.1</td>
</tr>
<tr>
<td>Ячейка 1.2</td>
<td>Ячейка 2.2</td>
</tr>
</table>
1</td>
<td>Ячейка 2.1</td>
</tr>
<tr>
<td>Ячейка 1.2</td>
<td>Ячейка 2.2</td>
</tr>
</table>
Пример:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Ячейка 1.1 | Ячейка 2.1 |
| Ячейка 1.2 | Ячейка 2.2 |
Чек-листы
- [x] Задача 1 - [ ] Задача 2 - [ ] Задача 3
Пример:
- Задача 1
- Задача 2
- Задача 3
Внутренние ссылки
[Перейти к Заголовку 1](#title1) ## <a>Заголовок 1</a> Какой-то контент
Пример:
Перейти к Заголовку 1
Какой-то контент
Ссылка на заголовок на английском
[Some title 1](#some-title-1) ## Some Title 1 Some content
Пример:
Some title 1
Some Title 1
Some content
Автоматические ссылки
<http://example.
com/>
<Пример
http://example.com/
HTML
<kbd>CTRL</kbd> + <kbd>P</kbd>
Пример:
CTRL + P
HTML-коды
Например, вы можете использовать HTML-код ¯ для добавления черты над буквой:
A¯
Пример:
A¯
Комментарии
Вы можете вставить комментарии в свой markdown-файл, которые не будут отображаться в окончательном отформатированном виде:
[//]: # (Это комментарий, он не будет отображаться)
Пример:
Эмодзи (Github)
Вы можете использовать эмодзи в своих Markdown-файлах.
:smile: :laughing: :blush:
Пример:
😄😆😊
Форматирование текста в Дискорде: зачеркнутый, выделение, курсив
Пользователи, которые пользуются Дискордом на постоянной основе, замечают фишки оттуда, наблюдают за работами серверов, состоят в них, могли заметить, как некоторые администраторы, модераторы, иногда — обычные пользователи, отмечают слова жирным, ставят сообщения в рамку, могут подчеркнуть, перечеркнуть текст, делать его кликабельным. Делать это помогает форматирование текста в Дискорде. Форматирование позволяет сделать выделение текста в Дискорде, сделать зачёркнутый текст в Дискорде, писать курсивом в Дискорде с помощью простых команд, настроек.
Какое форматирование можно применять
Можно применять большинство базовых способов форматирования. Можно сделать жирный текст в Дискорде, применив стандартные виды редактирования — напрямую через набор сообщения, без применения сторонних программ.
Форматирование можно комбинировать, например, курсив с жирным текстом, подчёркивание с изменением цвета, что даёт пользователю большой простор для творчества.
Отправляемые отформатированные сообщения можно набирать через любые устройства. Это связано с использованием определённого синтаксиса, поддерживающегося на многих платформах и Операционных Системах, в том числе — Android, Mac, Windows (начиная с версии 10), IOS, при скачивании официального мессенджера Дискорд, без использования веб-версии.
Варианты форматирования текста
Для того, чтобы сделать красивый текст, существует немало вариантов форматирования. В их числе:
- Подчёркивание текста, добавление курсива, зачёркиваний, жирных букв — все эти возможности относятся к одной категории, поскольку схожи по структуре набора;
- Выделение текста в отдельную рамку;
- Изменение цвета текста на любой понравившийся из цветового круга;
- Выделить ссылку;
- Целенаправленно добавить кусок написанного кода, полезно для программистов, пользователей, которые хотят программировать, чтобы видеть пример написания кода;
- Выделение текста, изображений в отдельную вкладку “Спойлер”.
- Выделение предложения, написанного другим пользователем, в отдельное окошко цитирования, которое подчёркивает, что фраза взята из стороннего источника;
- Экранирование.
Все эти режимы форматирования отличаются своими уникальными символами. Стоит разобрать каждую по отдельности, чтобы иметь возможность разбираться в каждом виде.
Жирным, курсив, подчеркнутый, зачеркнутый
Эта категория форматирования использует сочетание простых символов для придания тексту нужного вида. Так, чтобы сделать сообщение или его часть курсивным, нужно поставить “*” в начале и конце нужного отрывка. Сообщение должно выглядеть так: “* текст выделен курсивом *” и отправится в виде: “текст выделен курсивом”.
Для того, чтобы сделать сообщение жирным, нужно набрать “**”. Текст должен выглядеть следующим образом: “** жирный текст **”. Пользователям он отправится в виде: “жирный текст”.
Подчёркивание происходит соответствующим символом — “_” — перед и после предложения, фразы, которую планируется подчеркнуть. Выглядит это следующим образом: “_ подчёркнутый текст _”. А для других участников выглядит: “подчёркнутый текст”.
Зачеркнуть текст можно, введя символ “~~”. Выглядит набранное сообщение следующим образом “~~ зачёркнутое сообщение ~~, а отправленное — “зачёркнутое сообщение”.
Как писать в рамке
Сообщение в рамке — важный способ выделения объявлений, необходимой информации, сообщений, которые нужно обозначить среди прочих в чате. Чаще всего таким методом форматирования пользуется администрация сервера, поскольку хочет проинформировать игроков, участников о событиях, происходящих на сервере. Если хорошо освоить команду написания в рамке, можно научиться менять её цвет, что выделит рамку среди прочих, покажет её важность для чата. Для того, чтобы сделать стандартное сообщение в чёрной рамке:
«`
Пробный текст
«`
Таким образом получается чёрная рамка, содержащая в себе простой белый текст.
Таким же образом можно сделать цветной текст в рамке, используя видоизменённые строчки кода. Изменить код нужно незначительно — поменять одно слово в необходимом месте.
Как сделать цветной текст
Преображение текста в цветной происходит похожим образом, как помещение его в рамку. Выполняется форматирование в несколько простых шагов. Для редактирования необходимо использовать возможности программистов, включая указывание языка, на котором пишется текст для изменения. Однако даже тем, кому совсем плохо даётся программирование, можно набрать цветной текст. Например, жёлтый:
«`HTTP
Пробный текст
«`
Для каждого цвета существует отдельная команда. Жёлтый — HTTP, Зелёный — CSS, Синий — Elm, оранжевый — ARM. Можно поэкспериментировать с командами, посмотреть, какой цвет смотрится приятнее.
Если пользователь выбирает написание кода, возникает вопрос: “Как проверить, что код напечатан неверно?”. Дискорд не подсветит сообщение цветным в строчке набора.
Учитывая этот факт, можно с лёгкостью проверить правильность написания кода, в случае неверного набора нужно найти ошибку, которая может содержаться в самых маленьких строчках.
Как сделать текст со ссылкой
Пользователю нужно поделиться важной информацией, не теряя целостность текста, но появляется ссылка, которую нужно “замаскировать” командой, строкой. Ссылка сильно мешает восприятию текста, выделяется, занимает немало места, просто мешает своим присутствием. Лучшее решение — скрыть ссылку простой строчкой, изменяющей восприятие сообщения.
Строчка, которую нужно набрать, выглядит следующим образом: [“пример текста, видный пользователям”](“ссылка, нуждающаяся в скрытии”).
Так, пользователи увидят только часть “пример текста, видный пользователям”. Текст, отмеченный скобками [], станет кликабельным, пользователи смогут нажать на него. После клика текст автоматически перенесёт участников к браузеру, открывающему указанную в () ссылку.
Блоки кода
Показывать блоки кода — полезная функция, помогающая пользователям показать написанный код, чтобы убедиться в правильности, согласовать, при необходимости — изменить. Хорошая функция форматирования для программистов, работников, создающих проект. Блоки кода помогают пользователям, желающим отправить символ звёздочки без выделения текста жирным.
Выделить текст в отдельный блок кода возможно благодаря акцентам, помещающимся в начало, конец необходимого текста, размещающегося в блок. Если блок содержит одну строчку — указывается (`), две и более — три копии обратного символа («`).
Спойлеры для текста и картинок
Спойлеры — необходимый инструмент, использующийся для пометки моментов, нежелательных для пользователей.
Используются при обозначении моментов из комиксов, сериалов, фильмов, манги, аниме. Могут применяться разработчиками для обозначения кусочков будущих обновлений для игры, программы, прочих продуктов, за нововведениями которых следят пользователи.
Для отметки важного момента “Спойлером” выполняются простые шаги. Да, есть несколько способов преобразования текста в спойлер:
- Набрать || перед, после момента в тексте, на котором необходимо поставить отметку спойлера. Выглядит следующим образом: “||спойлер||”;
- Набрать специальную команду /spoiler;
- Для отметки спойлером картинки нужно нажать “+” под окном для написания сообщений, активировать галочку “Пометить как спойлер”.
Цитирование
Цитирование можно использовать для одной, нескольких строчек. Цитата отмечается в отдельную строчку, её выделяет символ |, отмечающийся перед началом цитаты, фраза слегка выпирает вперёд, чтобы не сливаться с остальным текстом.
Для одноуровневого (одного слова, строчки) цитирования необходимо набрать простое “>” от одного до трёх штук. После набора нажать пробел, необходимый отрывок отметится другим цветом. Если требуется отметить несколько строчек, одну, после текста набрать Shift + Enter для выхода из блока цитирования. Далее можно набрать цитату вновь (для многоуровневого цитирования), продолжить печатать текст (для одноуровневого цитирования).
Экранирование
Частая проблема — когда хочется написать сообщение с символами “*”, “_”, “**”, “>”, но мессенджер автоматически помещает их как выделение жирным, курсивом, спойлером, подчёркнутым, прочими командами, использующимися для форматирования. Решение у этой проблемы простое — достаточно применить экранирование, чтобы исправить положение.
Решением являются символы \\. Их необходимо поставить два раза перед необходимым текстом. Выглядит строчка следующим образом: “\*\*это не текст, выделенный курсивом*”. Отправленное сообщение придёт участником в таком виде: “*это не текст, выделенный курсивом*”. То есть, текст перестал помечаться курсивом, выглядит как простое сообщение.
Форматирование — полезный инструмент для пользователей, желающих выделить свой текст, показать людям идею, экспериментировать. Если использовать возможность правильным способом, можно не только похвастаться перед участниками беседы умениями, также выделить свой сервер среди остальных интересным оформлением сообщений.
Генератор подчеркивания текста (C͟o͟p͟y͟ ͟&͟ ͟P͟a͟s͟t͟e͟) – Glyphy
Ун͟д͟е͟р͟и͟l͟
ʅ͟ʅ͟ᴉ͟ɥ͟ɹ͟ǝ͟p͟u͟ꓵ͟ ʇ͟u͟n͟o͟ꓛ͟
D̲a̲s̲h̲i̲n̲g̲
900 03𝐷̲𝑎̲𝑝̲𝑝̲𝑒̲
𝚂̲𝚒̲𝚕̲𝚒̲𝚌̲𝚘̲𝚗̲ 𝙳̲ ̲𝚜̲𝚑̲
L̳a̳n̳e̳s̳
s̳ǝ̳u̳ɐ̳ꓶ ̳ ɹ̳ǝ̳ʇ̳u̳n̳o̳ꓛ̳
⦋𝚕̳⦌⦋𝚕̳⦌
J꙱a꙱w꙱s꙱
S͞y͞l͞i͞n͞e͞
90 003Т͟͞r͟a͟͟i͟͞n͟͞ T͟͞r͟͞a͟͞c͟͞k͟͞s͟͟
G͢ u͢ i͢ d͢ а͢ н ͢ c͢ e͢
5
𝑽⃨𝒊⃨𝒏⃨𝒕⃨𝒂⃨𝒈⃨𝒆⃨ 𝑬⃨𝒍⃨𝒍⃨𝒊⃨𝒑⃨𝒔⃨𝒆⃨𝒔⃨
9000 6𝙎⃨𝙬⃨𝙖⃨𝙣⃨𝙠⃨𝙮⃨ 𝙀⃨𝙡⃨𝙡⃨𝙞⃨𝙥⃨𝙨⃨𝙚⃨𝙨⃨
900 06𝚂⃨𝚒⃨𝚕⃨𝚒⃨𝚌⃨𝚘⃨𝚗⃨ 𝙴⃨𝚕⃨𝚕⃨𝚒⃨𝚙⃨𝚜⃨𝚎⃨𝚜⃨ 9 0005
Ṵn̰d̰ḛr̰h̰a̰n̰d̰
𝘜̰𝘯̰𝘥̰𝘦̰𝘳̰𝘩̰𝘢̰𝘯̰
𝙎̰𝙬̰𝙖̰𝙣̰𝙠̰𝙮̰ 𝙐̰𝙣̰𝙙̰𝙚̰𝙧̰ 𝙝̰𝙖̰𝙣̰𝙙̰
G̼u̼l̼l̼s̼
𝐷̼𝑎̼𝑝̼𝑝̼𝑒̼𝑟 ̼ 𝐺̼𝑢̼𝑙̼𝑙̼𝑠̼
0005
𝙎̼𝙬̼𝙖̼𝙣̼𝙠̼𝙮̼ 𝙂̼𝙪̼𝙡̼𝙡̼𝙨̼
𝘊̼
𝚂̼𝚒̼𝚕̼𝚒̼𝚌̼𝚘̼𝚗̼ 𝙶̼ 𝚞̼𝚕̼𝚕̼𝚜̼
M͜e͜o͜w͜
𝗠͜𝗼͜𝗱͜𝗲͜𝗿͜𝗻͜
𝘊͜𝘩͜𝘪͜𝘤͜ 𝘔͜𝘦͜𝘰͜𝘸͜
𝚂͜𝚒͜𝚕͜𝚒͜𝚌͜𝚘͜ 𝚗͜ 𝙼͜𝚎͜𝚘͜𝚠͜
ᵷ̲u̲ᴉ̲ɥ̲s̲ɐ̲ꓷ̲ ɹ̲ǝ̲ʇ̲u̲n̲o̲ꓛ̲
ǝ͞u͞ᴉ͞ʅ͞ʎ͞ʞ͞S͞ ɐ͞ɹ͞ʇ͞u͞o͞ꓛ͞
🆃Ⓤ🆇Ⓔ🅳Ⓞ
𝚂⃫𝚒⃫𝚕⃫𝚒⃫𝚌⃫𝚘⃫𝚖⃫𝚖⃫ 𝚎⃫𝚗⃫𝚝⃫𝚜⃫
𝗘⃫⃥⃞ 𝘅⃫⃥⃞ -⃫⃥⃞ 𝗯⃫⃥⃞ 𝗼⃫⃥⃞ 𝘅⃫⃥⃞
- 9000 4 T͓̊i͓̊c͓̊ T͓̊å͓c͓̊
███ ███████
『V』『o』『g』『u』『e』
𝚂̰𝚒̰𝚕̰𝚒̰𝚌̰𝚘̰𝚗̰ 𝚄̰𝚗̰
𝚂̴𝚕̴𝚒̴𝚙̴𝚙̴𝚢̴ 𝚂̴𝚒̴ 𝚕̴𝚒̴𝚌̴𝚘̴𝚗̴
s̼ʅ̼ʅ̼n̼ꓨ̼ ɐ̼ɹ̼ʇ̼u̼o̼ꓛ̼
F꙲l꙲a꙲t꙲ P꙲a꙲c꙲k꙲
███████ O███
- 9000 4 ▀█▀ █▬█ █ ▄█▀
⃣
𝘛̰̾𝘪̰̾𝘭̰̾𝘥̰̾𝘦̰̾𝘥̰̾
🄼🄾🄽🄾
ɿɘʜƚi|Ꙅ
sǝpoɔ ʇǝɹɔǝs
⦏𝙳⦎⦏𝚘⦎⦏𝚠⦎⦏𝚗⦎ ⦏𝙻⦎⦏𝚘⦎⦏𝚠⦎
ɘ҉༙྇ ƨ҉༙྇ ɿ҉༙྇ υ҉༙྇ Ɔ҉༙྇ ɘ҉༙྇ ƨ҉༙྇ ɿ҉༙྇ ɘ ༙྇ v҉༙྇ ɘ҉༙྇ Я҉༙྇
𝙎⃥𝙬⃥𝙖⃥𝙣⃥𝙠⃥𝙮⃥ 𝙒⃥ 𝙝⃥𝙖⃥𝙘⃥𝙠⃥𝙨⃥
Ⓑⓤⓑⓑⓛⓔⓢ
C͓̽r͓̽o͓̽s͓̽s͓̽ E͓̽y͓̽e͓̽d͓̽
9 0006Rིoིbིiིnི Hིoིoིdི
𝑊̮̑𝑒̮̑𝑙̮̑𝑙̮̑ 𝑅̮̑𝑜̑ ̮𝑢̮̑𝑛̮̑𝑑̮̑𝑒̮̑𝑑̮̑
ꜛʏ͎ꜜꜛs͎ꜜ
░Ｂ░ ░ｒ░ ░ｉ░ ░ｃ ░ ░ｋ░ ░ｓ░
T̽i̽c̽s̽
𝕿𝓌𝖔 𝕱𝒶𝖓𝒸𝖞 900 05
𝐷̸𝑎̸𝑝̸𝑝̸𝑒̸𝑟̸ 𝑆̸𝑙̸𝑎̸𝑠̸ℎ̸𝑒̸𝑠̸
Ꭾꭵꮆ Ꮦꮧꭵꮭꮥ
꒐ꏳꐔ
ꖾᚣᚳ𝓯 ᛢᛊᎤᏌᛜᚴᚣꖾ
𝑆̴𝑙̴𝑖̴𝑝 ̴𝑝̴𝑦̴ 𝐷̴𝑎̴𝑝̴𝑝̴𝑒̴𝑟̴
𝔐𝔢𝔡𝔦𝔢𝔳𝔞𝔩 𝔗𝔦𝔪 𝔢𝔰
ɹ͜ɹ͜n͜ꓒ͜
𝗠̶𝗼̶𝗱̶𝗲̶𝗿̶𝗻̶ 𝗦̶𝘁̶ 𝗿̶𝗶̶𝗸̶𝗲̶𝘀̶
ⓒ⦑i⦒ⓡ⦑c⦒ⓛ⦑e⦒ ⦑b⦒ ⓐ⦑c⦒ⓚ
⃪
𝚁༽𝚎༽𝚒༽𝚌༽𝚑༽𝚎༽𝚗༽𝚋༽𝚊༽𝚌༽𝚑༽
𝓕𝓪𝓷𝓬𝔂 𝓪𝓷𝓭 𝓛𝓸𝓾𝓭
༼𝙴 ༼𝚟༼𝚎༼𝚛༼𝚎༼𝚜༼𝚝
Αят Гяєċσ
𝐷𝜀𝜄𝜇𝜒𝜀 𝑆𝜍𝜆𝜃𝜄𝛼𝛾
ᖇⓐ几ѕ𝕆𝐌
þïñk¥ Öµ†
⦍𝚄⦐⦍𝚙⦐ ⦍𝙷⦐⦍𝚒⦐⦍𝚐⦐⦍𝚑 ⦐
A⃝l⃝l⃝ C⃝i⃝r⃝c⃝l⃝e⃝s⃝
⌌🅖⌌⌏⌌🅛⌌⌏⌌🅘⌌⌏⌌🅣⌌⌏⌌🅒⌌⌏⌌🅗⌌⌏⌌🅨⌌⌏ ⌌🅒⌌⌏⌌ 🅘⌌⌏⌌🅡⌌⌏ ⌌🅒⌌⌏⌌🅤⌌⌏⌌🅘⌌⌏⌌🅣⌌⌏⌌🅢⌌⌏
〖𝔼⃦〗〖𝕩⃦〗〖 𝕥⃦〗〖𝕣⃦〗〖𝕒⃦〗 〖𝕃⃦〗〖𝕚⃦〗〖𝕟⃦〗〖𝕖⃦ 〗〖𝕤⃦〗
𝚎⃪𝚛⃪
⃤ 𝖘⃤
𝐔̰𝐧̰𝐝̰𝐞̰𝐫̰𝐡̰𝐚̰𝐧̰𝐝̰
Тѳгϛтѳѱ
𝐋⃯⃖𝐞⃯⃖𝐟⃯⃖𝐭⃯⃖ 𝐨⃯⃖𝐫⃯⃖ 𝐑⃯⃖𝐢⃯⃖𝐠⃯⃖𝐡⃯⃖𝐭⃯⃖
⃝ 𝐵̥̊⃝𝑢̥̊⃝𝑏̥̊⃝𝑏̥̊⃝𝑙̥̊⃝𝑒̥̊⃝
𝐷⃪𝑎⃪𝑝⃪𝑝 ⃪𝑒⃪𝑟⃪ 𝑄⃪𝑢⃪𝑖⃪𝑣⃪𝑒⃪𝑟⃪
Mini Me
𝑼̰𝒏̰
🇸 🇹 🇷 🇦
s̸ǝ̸ɥ̸s̸ɐ̸ʅ̸S̸ ɹ̸ǝ̸ʇ̸u̸n̸o̸ ꓛ̸
Wཽiཽnཽgཽsཽ
⃟ 𝖑⃟ 𝕴⃟ 𝖓⃟ 𝖎⃟ 𝖙⃟ 𝖎⃟ 𝖆⃟ 𝖑⃟ 𝖘⃟
𝗖⃥𝘩̸𝗼⃥𝘱̸𝘀⃥𝘵̸𝗶⃥𝘹̸
ՇԾՐƙՏՇՐȝա
🅓 🅐🅡🅚 🅑🅤🅑🅑🅛🅔🅢
𝘛⃒̅𝘰⃒̅ 𝘢⃒̅ 𝘛⃒̅
𝙎͜͜͠𝙡͜͜͠𝙚͜͠ 𝙚͜͠𝙥͜͠𝙮͜͠
0005
𝐂⃨𝐥⃨𝐚⃨𝐬⃨𝐬⃨𝐢⃨𝐜⃨ 𝐄⃨𝐥⃨𝐥⃨𝐢⃨𝐩⃨𝐬⃨𝐞⃨𝐬⃨ 9000 5
⦏Ŝ⦎⦏â⦎⦏m̂⦎⦏ŝ⦎⦏ô⦎⦏n̂⦎
𐌐ዐ𐌔ቹ𐌕ፕ𐌀 𐌔ፕꝊክ𐌄
Ꞩħᵾɍīҟēꞥ
Λпгц ᄂλя
Люг͛г͛н͛юн͛г͛
𝐷𝑎𝑝𝑝𝑒𝑟
900 03𝑽⃪𝒊⃪𝒏⃪𝒕⃪𝒂⃪𝒈⃪𝒆⃪ 𝑸 ⃪𝒖⃪𝒊⃪𝒗⃪𝒆⃪𝒓⃪
⦍ʏ⦎⦏ᴀ⦐⦍ᴊ⦎⦏ɪ⦐⦍ʀ⦎⦏ᴜ⦐⦍s⦎ ⦏ ʜ⦐⦍ɪ⦎
⦏ʙ⦐⦏ᴏ⦐⦏ᴛ⦐⦏ᴛ⦐⦏ᴏ⦐⦏ᴍ⦐⦏s⦐ ⦏ᴜ⦐⦏ᴘ⦐
𝑽⃫𝒊⃫𝒏⃫𝒕⃫𝒂⃫𝒈⃫𝒆⃫ 𝑪⃫𝒐⃫𝒎⃫𝒎⃫𝒆⃫𝒏⃫𝒕⃫𝒔⃫
9000 6♥Н♥ ♥е♥ ♥а♥ ♥r♥ ♥t♥ ♥K♥ ♥i♥ ♥n♥ ♥g♥
≋H≋ ≋o≋ ≋k≋ ≋u≋ ≋s≋ ≋a≋ ≋i≋
ﾉ刀ひ丂ﾑ刀
𝑶̥̈𝒉̥̈
ℍ𝕠𝕠𝕜𝕪
█▬█ █ ▀█▀
𝔪i҉𝔩l҉𝔦 𝔠y҉𝔯i҉𝔩l҉𝔦
𝐷⃥ 𝑎⃥𝑝⃥𝑝⃥𝑒⃥𝑟⃥ 𝑊⃥ℎ⃥𝑎⃥𝑐⃥𝑘⃥𝑠⃥
ｉｃ
ɹ̰ǝ̰ʇ̰ṵn̰o̰ꓛ̰ p̰ṵɐ̰ɥ̰ɹ̰ǝ̰p̰ṵꓵ̰
𝙎𝙬𝙖 𝙣𝙠𝙮
005
A⃞l⃞l⃞ B⃞o⃞x⃞e⃞s⃞
ℱ𝒶𝓃𝒸𝓎
𝔹̼𝕖̼𝕒̼𝕔̼𝕙̼ 𝔹̼𝕚̼𝕣̼𝕕̼𝕤̼
И҉н҉в҉и҉с҉и҉б҉л҉е҉ И҉н҉к҉
𝗠⃥𝗼⃥𝗱⃥𝗲⃥𝗿⃥𝗻⃥ 𝗪⃥𝗵⃥𝗮⃥𝗰⃥𝗸⃥𝘀⃥
E͛⦚l͛⦚e͛⦚c͛⦚t͛⦚r͛⦚i͛⦚c͛⦚
ɘiƨqooʜW
𝐂⃥ 𝐥⃥𝐚⃥𝐬⃥𝐬⃥𝐢⃥𝐜⃥ 𝐖⃥𝐡⃥𝐚⃥𝐜⃥𝐤⃥𝐬⃥
𝐴̡𝑙̡𝑙̡ 𝐽̡’̡𝑠̡
𝚂⃥𝚒⃥𝚕⃥𝚒⃥𝚌⃥𝚘 ⃥𝚗⃥ 𝚆⃥𝚑⃥𝚊⃥𝚌⃥𝚔⃥𝚜⃥
𝘊⃪𝘩⃪𝘪⃪𝘤⃪ 𝘘⃪𝘶⃪ 𝘪⃪𝘷⃪𝘦⃪𝘳⃪
͢𝑐͢𝑒͢
🄴🅥🄴🅝🄸🅝🄶 🄳🅡🄴🅢🅂
⦍ᴛ⦎⦍ᴏ⦎⦍ᴘ⦎ ⦍ᴅ⦎⦍ᴏ⦎⦍ᴡ⦎⦍ɴ⦎
𝘊𝘩𝘪𝘤 9000 5
ᙎᥲƙƙᥲ ᙎᥲƙƙᥲ
𝐃̲𝐚̲𝐬̲𝐡̲𝐢̲𝐧̲𝐠̲𝐥̲ 𝐲̲ 𝐂̲𝐥̲𝐚̲𝐬̲𝐬̲𝐢̲𝐜̲
Нет █wea█i█ г
ꐟꁄꁄꇞ
𝗠𝗼𝗱𝗲𝗿𝗻
𝑽⃥𝒊 ⃥𝒏⃥𝒕⃥𝒂⃥𝒈⃥𝒆⃥ 𝑾⃥𝒉⃥𝒂⃥𝒄⃥𝒌⃥𝒔⃥
☠𝚂☠ ☠𝚔 ☠ ☠𝚞☠ ☠𝚕☠ ☠𝚕☠ ☠𝚒☠ ☠𝚎☠ ☠𝚜☠
𝗠̼𝗼̼𝗱̼𝗲̼𝗿 ̼𝗻̼ 𝗚̼𝘂̼𝗹̼𝗹̼𝘀̼
S̶t̶r̶i̶k̶e̶
𝗠̸𝗼̸𝗱̸𝗲̸𝗿̸𝗻̸ 𝗦̸𝗹̸𝗮̸
𝚂̸𝚒̸𝚕̸𝚒̸𝚌̸𝚘̸𝚗̸ 𝚂̸𝚕̸𝚊̸𝚜̸𝚑̸ 𝚎̸𝚜̸
𝝜𝝴𝝰𝞁𝝸𝝴𝘀
🄢⒣⒣⒣⒣⒣⒣
9 00060005
0006
𝗠̴𝗼̴𝗱̴𝗲̴𝗿̴𝗻̴ 𝗦̴𝗹̴𝗶̴𝗽̴𝗽̴𝘆̴
𝐂͜
🅲🅷🆁🅾🅼🅰
𝑺̴𝒍̴𝒊̴𝒑̴𝒑̴𝒚̴ 𝑽̴𝒊̴𝒏̴𝒕̴𝒂̴𝒈̴𝒆̴
ᕼＴ ＳᛕＹ
ꕷꞆᎽԸĬᙁ’
ℚ⌰⟟⍧⏧ ⍓⍲⍑ℍ⎎
T꙰ h꙰ o꙰ r꙰ n꙰ s꙰
𝚂̶𝚒̶𝚕̶𝚒̶𝚌̶𝚘̶𝚗̶ 𝚂̶𝚝̶𝚛̶𝚒̶𝚔̶𝚎̶𝚜̶
ᵂᴱₑᴱₑᴱ
爪卂几Ꮆ卂
ⒷⒾⒼ ⒹⓄⓉⓈ
9000 6𝘊͢𝘩͢𝘪͢𝘤͢ 𝘎͢𝘶͢𝘪͢𝘥͢𝘢͢𝘯͢𝘤͢𝘦͢
Базовый
9000 6𝐂⃪𝐥⃪𝐚⃪𝐬⃪𝐬⃪𝐢⃪𝐜⃪ 𝐐⃪𝐮⃪𝐢⃪𝐯⃪𝐞⃪𝐫⃪
9000 3𝗠⃨𝗼⃨𝗱⃨𝗲⃨𝗿⃨𝗻⃨ 𝗘⃨𝗹⃨𝗹⃨𝗶⃨ 𝗽⃨𝘀⃨𝗲⃨𝘀⃨
𝞗𝞭𝟁𝙨𝙨𝞮𝞵𝙨
𝓈̰͠
0005
s̶ǝ̶ʞ̶ᴉ̶ɹ̶ʇ̶S̶ ɹ̶ǝ̶ʇ̶u̶n̶o̶ꓛ̶
𝐂̶𝐥̶𝐚̶ 𝐬̶𝐬̶𝐢̶𝐜̶ 𝐒̶𝐭̶𝐫̶𝐢̶𝐤̶𝐞̶𝐬̶
𝚂̳𝚒̳𝚕̳𝚒̳𝚌̳𝚘̳𝚗̳ 𝙻̳𝚊̳𝚗̳
ℜ💀𝚎🩸𝔡💀 ℜ💀𝚞🩸𝔪💀
廾丹工片凵
⌌Ⓐ̙⌏⌌Ⓒ̙⌏⌌Ⓡ̙⌏⌌Ⓞ̙⌏⌌Ⓢ̙⌏⌌Ⓢ̙⌏ ⌌Ⓣ̙⌏⌌Ⓗ̙⌏⌌Ⓔ̙⌏ ⌌Ⓑ̙⌏⌌Ⓞ̙⌏⌌Ⓐ̙ ⌏⌌Ⓡ̙⌏⌌Ⓓ̙⌏
𝙎̴𝙬̴𝙖̴𝙣̴𝙠̴𝙮̴ 𝙎̴𝙡̴𝙞̴𝙥̴𝙨̴ 900 05
𝘊̲𝘩̲𝘪̲𝘤̲ 𝘋̲𝘢̲𝘴̲𝘩̲𝘦̲𝘴̲
𝙎⃪𝙬⃪ 𝙖⃪𝙣⃪𝙠⃪𝙮⃪ 𝙌⃪𝙪⃪𝙞⃪𝙫⃪𝙚⃪𝙧⃪
P̻⃰r̻⃰e̻⃰s̻⃰e̻⃰n̻⃰t̻⃰s̻⃰
∿S∿ ∿i∿ ∿n∿ ∿e∿ ∿s∿
F࿆ྃl࿆ྃo࿆ྃw࿆ྃe࿆ྃr࿆ྃ C࿆ྃr࿆ྃo࿆ྃw࿆ྃn࿆ྃ
90 006ⒷⒾⒼ ⒷⓊⒷⒷⓁⒺⓈ
𝑽𝒊𝒏𝒕𝒂𝒈𝒆
1337 1337
9 0006𝚂𝚒𝚕𝚒𝚌𝚘𝚗
𝑴̫𝒖̫𝒔̫𝒕̫𝒂̫𝒄̫𝒉̫𝒊̫𝒐 ̫𝒆̫𝒅̫
Т͍h͍i͍s͍ ͍r͍ T͍h͍a͍t͍
S̴l̴i̴p̴p̴y̴
Ě༙v༙̌ǐ༙ľ ༙ Ǐ༙ň༙ť༙ě༙ň༙ť༙
🅑🄻🅐🄲🅚 🅣🄸🅔
T̥̽ḁ̽c̥̽ T̥̽i̥̽c̥̽s̥̽
Ωιίγє Ψθμ
ʄʀɨʐʐʟɛ
𝐷⃨𝑎⃨𝑝⃨𝑝 ⃨𝑒⃨𝑟⃨ 𝐸⃨𝑙⃨𝑙⃨𝑖⃨𝑝⃨𝑠⃨𝑒⃨𝑠⃨
͢ n͢ ꓨ͢ ɹ͢ ǝ͢ ʇ͢ u͢ n͢ o͢ ꓛ͢
doʅꓞ dᴉʅꓞ
𝑽̲𝒊̲𝒏̲𝒕̲𝒂̲𝒈̲
ᴥʟᴥ ᴥɪᴥ ᴥʟᴥ ᴥᴄᴥ ᴥᴛᴥ ᴥʜᴥ ᴥᴜᴥ ᴥʟᴥ ᴥᴜᴥ
̶𝒆̶𝒔̶
Ꙇ ᔑ乇ᙓ ᙓ山
𝐷̳𝑎̳𝑝̳𝑝̳𝑒̳𝑟̳ 𝐿̳𝑎̳𝑛 ̳𝑒̳𝑠̳
Ⲥⲟⳏ Ⲟⳙⲧ
【K】【o】【d】【a】【k】 9000 5
꜍D꜉꜍i ꜉꜍c꜉꜍e꜉꜍y꜉
₵.
Ɽ.Ɇ.₳.₥.⃫𝐬⃫
ƈυɾʅʂ
ꚠ𖣠𖢉𖤢𖦪 ꔪ𖣠ꚲ
𝙎̶𝙬̶𝙖̶𝙣̶𝙠̶𝙮̶ 𝙎̶𝙩̶𝙧̶𝙞̶𝙠̶𝙚̶ 𝙨̶
༼𝙲𝚕༽༼𝚒𝚏༽༼𝚏𝚜༽
С̾м̾е̾л̾л̾й̾
𝐷⃫𝑎⃫𝑝⃫𝑝⃫𝑒⃫𝑟⃫ 𝐶⃫𝑜 ⃫𝑚⃫𝑚⃫𝑒⃫𝑛⃫𝑡⃫𝑠⃫
𝐂̳𝐥̳𝐚̳𝐬̳𝐬̳𝐢̳𝐜̳ 𝐋̳𝐚 ⦅𝔻⦆⦅𝕠⦆⦅𝕦⦆⦅𝕓⦆⦅𝕝⦆⦅𝕖⦆ ⦅𝔹⦆⦅𝕦 ⦆⦅𝕓⦆⦅𝕓 ⦆⦅𝕝⦆⦅𝕖⦆
ነ 𝗠⃫𝗼⃫𝗱⃫𝗲⃫𝗿⃫ 𝗻⃫ 𝗖⃫𝗼⃫𝗺⃫𝗺⃫𝗲⃫𝗻⃫𝘁⃫𝘀⃫
̳ 𝙇̳𝙖̳𝙣̳𝙚̳𝙨̳
𝕿𝖍𝖊 𝕹𝖔𝖗𝖙𝖍
𝙲ａ𝚛ｒ𝚒ａ𝚐ｅ Ｒ𝚎ｔ𝚞ｒ𝚗
9 0006⦍𝙹⦐⦏𝚞⦎⦍𝚖⦐⦏𝚙⦎⦍𝚒⦐⦏𝚗⦎⦍𝚐⦐ ⦍𝙹⦐⦏𝚊⦎⦍𝚡⦐ 9000 5
Ɽ.Ɇ.₳.₥.s̴ɹ̴ǝ̴ʇ̴u̴n̴o̴ꓛ̴ ʎ̴d̴d̴ᴉ̴ʅ̴S̴
ᗴ
̸𝐢⃥⃒̸𝐬⃥⃒̸𝐤⃥⃒̸𝐬⃥⃒̸
͜𝑜͜𝑤͜
ꓕμԍ ꓵbƨᴉqԍ Доу
𐌋Ꝋ𐌍𐌄𐌋𐌙 𐌌Ꝋ𐌵𐌍𐌕𐌀𐌉𐌍
ℭ💀𝔢💀𝔯💀𝔱 💀𝔞💀𝔦💀𝔫💀 𝔗💀𝔥💀𝔦💀𝔫💀𝔤💀𝔰💀
𝓝⃥⃝ 𝓸⃥⃝ 𝓕⃥⃝ 𝓪⃥⃝ 𝓷 ⃥⃝ 𝓬⃥⃝ 𝔂⃥⃝
𝙩⃫𝙨⃫
꜍M꜉🅞꜍R꜉🅢꜍E꜉ ꜍C꜉🅞꜍D꜉🅔
I༙྇҉ u༙྇҉ ʌ༙྇҉ ԍ༙྇҉ ʁ༙྇҉ ƨ༙྇҉ ԍ༙྇҉ C༙྇҉ n༙྇҉ ʁ༙྇҉ ƨ༙྾ ҉ ԍ༙྇҉
ῳą۷ɛყ
⧼F⧽⧼l⧽⧼a⧽⧼s⧽⧼h⧽ ⧼M⧽⧼o⧽⧼b⧽
Ƈ ƲЄƧ
𝐂̴𝐥̴𝐚̴𝐬̴𝐬̴𝐢̴𝐜̴ 𝐒̴𝐥̴𝐢̴𝐩̴𝐩̴𝐲̴
ʟɪʟ ᴄᴀᴘs ʟᴏᴄᴋ
𝓧⃥̸𝓽⃥̸𝓻⃥̸𝓪⃥̸ 𝓕⃥̸𝓪⃥̸𝓷⃥ ̸𝓬⃥̸𝔂⃥̸
D༙྇r༙྇a༙྇c༙྇u༙྇l༙྇a༙྇
⦅ 𝓕͜͡⦆⦅𝓪͜͡⦆⦅𝓷͜͡⦆⦅𝓬͜͡⦆⦅𝔂͜͡⦆ ⦅𝓑͜͡⦆⦅𝓾͜͡⦆⦅ 𝓫͜͡⦆⦅𝓫͜͡⦆⦅𝓵͜͡⦆⦅𝓮͜͡⦆⦅𝓼͜͡⦆
̘𝘂̘̚𝗶̘̚𝘁̘̚𝘀̘̚
⦑C⦒⦑h⦒⦑o⦒⦑o⦒ ⦑C⦒⦑h⦒⦑o⦒⦑o⦒
▛▟ ▙▟ ▜▛
⃦̳̿𝖊⃦̳̿
𝘊⃫𝘩⃫𝘪⃫𝘤⃫ 𝘊⃫𝘰⃫𝘮⃫𝘮⃫𝘦⃫𝘯⃫𝘵⃫𝘴⃫
ӺⲄ𐒢𐒐𐒨𐒅 ӺⲄ𐒍
BᴏꓵɴCᴇ
𝗖̶⃒⃝ 𝗿̶⃒⃝ ̶⃒⃝ 𝘀̶⃒⃝ 𝘀̶⃒⃝ 𝗵̶⃒⃝ 𝗮̶⃒⃝ 𝗶̶⃒⃝ 𝗿̶⃒⃝ 𝘀̶⃒⃝
𝙎̸𝙬̸𝙖̸𝙣̸𝙠̸𝙮̸ 𝙎̸𝙡̸𝙖̸𝙨̸𝙝̸𝙚̸𝙨̸
𝐿̢’̢𝑠̢
⋆S⋆ ⋆t⋆ ⋆a⋆ ⋆r⋆ ⋆r⋆ ⋆y⋆ ⋆N⋆ ⋆i⋆ ⋆g⋆ ⋆h⋆ ⋆t⋆
⟦D ⟧⟦о⟧⟦р⟧⟦и⟧⟦с ⟧
⃨⃩𝖘⃨⃩
𝐋𝛉𝛍𝛅 𝐒𝛓𝛌𝛉𝛊𝛂𝛄
𝔾⃟ 𝕒⃟ 𝕥⃟ 𝕤⃟ 𝕓⃟ 𝕪⃟
𝐂𝐥𝐚
Ⓦ🅷Ⓘ🆃Ⓔ Ⓣ🅸Ⓔ
↫C̶↬ ↫r̶↬ ↫o̶ ↬ ↫s̶↬ ↫s̶↬ ↫r̶↬ ↫ o̶↬ ↫a̶↬ ↫d̶↬ ↫s̶↬
ᴾᴱᴺᵀᴴᴼᵁˢᴱ
尺闩爪㠪𝓝
ᵂₐₜᶜₕ ₒᵤₜ
𝘊̶𝘩̶𝘪̶𝘤̶ 𝘚̶ 𝘵̶𝘳̶𝘪̶𝘬̶𝘦̶𝘴̶
⧼K⧽Ꮜ⧼R⧽Ꮜ⧼ K⧽Ꮜ⧼R⧽Ꮜ
⊫ ⫣a͞⊫ ⫣r͞⊫ ⫣s͞⊫
S̸l̸a̸s̸h̸e̸s̸
ρꍏ↳ᗰ♗∫†☈⚧
ᵁᵖ ᵀᵒᵖ
ǝ༙྇ ҉ с༙྇҉ ɹ༙྇҉ n༙྇҉ ꓛ༙྇҉ ɹ༙྇҉ ǝ༙྇҉ ʇ༙྇҉ u༙྇҉ n༙྇҉ о ༙྇҉ ꓛ༙྇҉
𝗠̳𝗼̳𝗱̳𝗲̳𝗿̳𝗻̳ 𝗟̳𝗮̳𝗻̳𝗲̳𝘀̳
𝙒⃪⃟ 𝙞⃪⃟ 𝙡⃪⃟ 𝙡⃪⃟ 𝙞⃪⃟ 𝙖⃪⃟ 𝙢⃪⃟ 𝙏⃪⃟ 𝙚⃪⃟ 𝙡⃪⃟ 𝙡⃪⃟
𝘹⃮⃧
147
Подчеркивание ссылки крафта на Medium | Марчин Вичари
Опубликовано в·
Чтение: 10 мин.·
18 марта 2014 г.Насколько сложно нарисовать горизонтальную линию на экране? Похоже, что совместить несколько пикселей вместе, чтобы они стояли в файле, — это то, с чем компьютеры должны справляться довольно хорошо в году доминирования двадцать четырнадцать.
Казалось бы, да, но простые вещи редко бывают простыми внутри… по крайней мере, если они чего-то стоят. Типографика также является игрой нюансов. Это история о том, как быстрый вечерний проект по исправлению внешнего вида подчёркнутых ссылок на Medium превратился в месячную работу.
Типографика никогда особо не любила подчеркивания. Хотите подчеркнуть свои слова? Возьмите несколько курсив или используйте полужирный — черт, добавьте еще немного отслеживания между буквами, если у вас нет ничего из вышеперечисленного. Не просто проводите линию внизу, как в пещерном мудаке.
Подчеркивания и примечания в книге 1493 года. Фото: Penn Provenance Project. http://www.flickr.com/photos/58558794@N07/9710243736Однако мы только что описали наиболее привлекательное свойство подчеркиваний: их очень легко добавлять к уже существующему тексту. Это позволяет легко понять, почему подчеркивания часто использовались в качестве аннотаций:
- Рисование подчеркивания от руки поверх уже напечатанного текста — ваш первый опыт подчеркивания вполне мог быть связан с тем, что учитель насмехался над вашим плохим письмом в начальной школе.
- Во вселенной пишущих машинок 20-го века — с их негибкими, моноширинными шрифтами и, как правило, одноцветными лентами — подчеркивание было единственным реалистичным методом выделения: просто отступайте от того, что вы уже напечатали, и добавляйте несколько знаков подчеркивания в конце. то же место. (Со временем знаки подчеркивания перекочевали в мир программирования, чтобы заменять пробелы в именах файлов или имен переменных… а их низкое расположение по-прежнему выдавало корни оригинальных пишущих машинок. )
Но затем появился Интернет, и подчеркивание объединилось с Color Blue, чтобы найти более достойную судьбу: обозначать кликабельные ссылки. Они могут исчезнуть в один прекрасный день — даже Google недавно отказался от них на своих страницах поиска — но я не верю, что это произойдет в ближайшее время.
К сожалению, несмотря на все достижения в веб-типографике, которые мы наблюдали за эти годы — улучшенные свойства CSS, большая поддержка интернационализации, пользовательские веб-шрифты — подчеркивания остались в основном такими, какими они были, и веб-дизайнерам было доступно очень мало настроек.
А потом стало еще хуже. Я проснулся одним февральским утром и увидел, как Chrome делает это с Medium. Ссылки:
Расскажите об эпидемии ожирения! Уродливый. Отвлекает. Неприемлемо. Я посмотрел на другие браузеры, и хотя подчеркивания там выглядели лучше, часто улучшения были только наполовину. Хуже того, каждый браузер отображал подчеркивания по своему усмотрению (лучше всего справился с Firefox):
Вскоре после присоединения к Medium я начал работать над документом, в котором перечислялись все улучшения типографики, которыми я хотел заняться в ближайшие месяцы.
В тот день, когда проявилась ошибка Chrome, я добавил подчеркивания… и поместил их на самый верх в качестве следующей вещи, над которой нужно работать.Я нахожу много вдохновения в истории компьютеров и творческих решениях, которые придумывали люди до меня, работая с ранними негибкими машинами.
Я сделал это фото несколько лет назад в лаборатории восстановления IBM 1401 в Музее компьютерной истории в Калифорнии. Это чемодан со всеми инструментами, необходимыми для работы на компьютере… в 1950-х годах. Большинство предметов официальные и даже брендовые. (За одним исключением: молоток. IBM утверждала, что в нем нет необходимости; ремонтникам виднее.)
Это была эпоха, когда компьютеры все еще были электро механическими , с перфораторами карт, цепными принтерами, считывателями магнитных лент и всевозможными периферийными устройствами, которым требовались ваши мускулы так же, как и ваши мозги, даже если ваша конечная цель была очень интеллектуальной: жонглировать невидимыми единицами и нулями.
Веб-дизайн тоже всегда казался таким: поиск запутанных, «грязных» решений зачастую простых проблем с использованием очень ограниченного набора инструментов. Потому что нет простого способа сказать браузеру, чтобы он просто подчеркивал ссылки, которые вы хотите. Но да, возможно, мы сможем придумать какой-нибудь окольный путь.
Чтобы найти решение, нужно начать с определения проблемы.
Идеальное подчеркивание должно быть видимым, но ненавязчивым, позволяя людям понять, что кликабельно, но не привлекая к себе слишком много внимания. Он должен располагаться на нужном расстоянии от текста, удобно располагаясь за на тот случай, если нижестоящие элементы захотят занять одно и то же место:
Итак, идеальное технологическое решение позволило бы нам:
- изменить ширину линейный (с дополнительной поддержкой полупикселей/ретина),
- изменить расстояние от текста,
- изменить цвет (даже если просто для имитации более тонкой ширины, используя более светлые оттенки серого вместо черного),
- очистить выносные элементы,
- (возможно) иметь отдельный стиль для посещенных ссылок.
Я сам немного подумал об этом и спросил некоторых очень умных фронтенд-инженеров вокруг меня. В совокупности это был список идей, к которым мы пришли:
1. Как есть
Первый вариант всегда придерживается значения по умолчанию. Но по умолчанию редко бывает достаточно хорошо — и, как и весь наш продукт, мы чувствовали, что наши читатели заслуживают лучшего.
2. Дополнительные свойства подчеркивания CSSСтандарты CSS обещают несколько интересных свойств, среди них text-decoration-skip и text-underline-position . Однако они не поддерживаются большинством браузеров и могут появиться не скоро.
3. Граница или тень блока внизу
Использование border-bottom для изменения подчеркивания считается одним из прототипов приемов CSS конца 1990-х годов. Это позволяет нам настроить цвет, но линия обычно находится слишком далеко от букв. Быстрый прототип подтвердил это — border-bottom подчеркивания почти упали между строками текста:
Можно обойти это ограничение и поднять их, применив display: inline-block и уменьшив высоту или line- высота, , но у этого есть одно смертельное ограничение — ссылка не может переходить на новую строку.
Это не сработает для обычного основного текста. (Кроме того, border-bottom не позволит нам использовать что-то меньшее, чем два пикселя сетчатки.)Другая идея — применение к тексту тщательно продуманной вставки box-shadow — имеет несколько схожие ограничения.
4. Индивидуальный подчеркнутый шрифтКурсивные шрифты просто наклонены, а полужирные просто толще, верно? Нет, конечно нет. Курсив и полужирный шрифт имеют свои собственные отдельные формы букв, настроенные и тщательно настроенные для сохранения визуальной целостности шрифта:
Если мы смеемся над искусственным полужирным и курсивом, почему мы не можем рассмотреть правильный отдельный шрифт подчеркивания, с подчеркиванием, являющимся частью каждого глифа?
Можно ли мечтать?Это потенциально многообещающий, но в нашем случае ошибочный подход:
- Обслуживание отдельного шрифта повлечет за собой большую задержку (и файлы шрифтов уже являются самой большой частью первоначальной загрузки Medium).
- Так как строка «впаяна» в шрифт, мы не можем ее переместить или изменить ширину в зависимости от размера шрифта… и изменение цвета также запрещено.
- Проблемы с лицензированием и обслуживанием шрифтов могут сделать его слишком сложным.
- Кернинг может оказаться сложным.
5. Рисование с помощью
http://www.flickr.com/photos/58558794@N07/9710243736
)
В тот день, когда проявилась ошибка Chrome, я добавил подчеркивания… и поместил их на самый верх в качестве следующей вещи, над которой нужно работать.
Это не сработает для обычного основного текста. (Кроме того, border-bottom не позволит нам использовать что-то меньшее, чем два пикселя сетчатки.)