#книга дня
Вы помните такую книгу — «Живая типографика»?
Если нет, то могу сказать, что это прекрасное, если не лучшее на русском языке, введение в основы типографики, дизайна шрифтов и работы с ними.
Короче, сама-то книга выложена автором в свободный доступ: https://t.me/htmlshit/955
Так вот, выпуск был аж в 2007 году. Естественно, тираж давно распродан и переиздание долго назревало.
И назрело! Александра Королькова стартанула канал, посвящённый подготовке второго издания книги! С прекрасными иллюстрациями с описанием процесса. Вот он: https://t.me/livetypography
За чужой работой можно наблюдать бесконечно, не правда же? Процесс интересен чуть ли не больше результата.
В общем, просвещаемся, котаны!
#font #typography #book
Вы помните такую книгу — «Живая типографика»?
Если нет, то могу сказать, что это прекрасное, если не лучшее на русском языке, введение в основы типографики, дизайна шрифтов и работы с ними.
Короче, сама-то книга выложена автором в свободный доступ: https://t.me/htmlshit/955
Так вот, выпуск был аж в 2007 году. Естественно, тираж давно распродан и переиздание долго назревало.
И назрело! Александра Королькова стартанула канал, посвящённый подготовке второго издания книги! С прекрасными иллюстрациями с описанием процесса. Вот он: https://t.me/livetypography
За чужой работой можно наблюдать бесконечно, не правда же? Процесс интересен чуть ли не больше результата.
В общем, просвещаемся, котаны!
#font #typography #book
👍8❤4
#заметка дня
Минус это не дефис! Минус это, простите, минус. Он такой не просто так, будете использовать дефис — табличные данные будут скакать.
Как его поставить?
Ну, на macOS это:
- дефис: -
– минус: option + -
— тире: option + shif + -
У кого-то на клавиатуре Option это Alt.
Кто на винде и линуксе, подскажите ваши сочетания. Я уже не помню, что там с Compose.
Александра Королькова напомнила об этом в своём посвященном новому изданию Живой типографики канале. А старое издание все так же доступно бесплатно.
#typography
Upd.
На самом деле, как верно заметили в комментариях, мы ставим таким образом короткое тире.
https://www.compart.com/en/unicode/U+0150
Минус… он другой:
https://www.compart.com/en/unicode/U+2212
Разницу можно почувствовать в комментариях. Но она настолько мизерная, что ею, учитывая простоту печати короткого тире, можно пренебречь.
Или используйте типографы.
Минус это не дефис! Минус это, простите, минус. Он такой не просто так, будете использовать дефис — табличные данные будут скакать.
Как его поставить?
Ну, на macOS это:
- дефис: -
– минус: option + -
— тире: option + shif + -
У кого-то на клавиатуре Option это Alt.
Кто на винде и линуксе, подскажите ваши сочетания. Я уже не помню, что там с Compose.
Александра Королькова напомнила об этом в своём посвященном новому изданию Живой типографики канале. А старое издание все так же доступно бесплатно.
#typography
Upd.
На самом деле, как верно заметили в комментариях, мы ставим таким образом короткое тире.
https://www.compart.com/en/unicode/U+0150
Минус… он другой:
https://www.compart.com/en/unicode/U+2212
Разницу можно почувствовать в комментариях. Но она настолько мизерная, что ею, учитывая простоту печати короткого тире, можно пренебречь.
Или используйте типографы.
👍5❤3🤔2🤯2😁1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Итак, где-то с полгода назад я писал о правиле text-wrap: balance и инструментах, которыми такое поведение можно настроить. Что же это такое?
Думаю, лучше, чем на видеоиллюстрации, объяснить будет сложно. Просто... приятнее читать.
Так вот, почему вспомнил? Ну, для начала, свойство приземлилось в Chrome 114, о чём блог разработчиков Хрома не преминул упомянуть: https://developer.chrome.com/blog/css-text-wrap-balance/
Но упомянули-то аж в апреле, а пост-то почему щас только?
Так это, вышла версия 1.0 библиотеки React Wrap Balancer!
Ну и ожидаемо, теперь если браузер поддерживает нативную балансировку текста, библиотека её и использует (при паре условий, конечно, но всё же).
Всем work-life balance, котаны!
#css #balance #react #typography
Итак, где-то с полгода назад я писал о правиле text-wrap: balance и инструментах, которыми такое поведение можно настроить. Что же это такое?
Думаю, лучше, чем на видеоиллюстрации, объяснить будет сложно. Просто... приятнее читать.
Так вот, почему вспомнил? Ну, для начала, свойство приземлилось в Chrome 114, о чём блог разработчиков Хрома не преминул упомянуть: https://developer.chrome.com/blog/css-text-wrap-balance/
Но упомянули-то аж в апреле, а пост-то почему щас только?
Так это, вышла версия 1.0 библиотеки React Wrap Balancer!
Ну и ожидаемо, теперь если браузер поддерживает нативную балансировку текста, библиотека её и использует (при паре условий, конечно, но всё же).
Всем work-life balance, котаны!
#css #balance #react #typography
🔥12❤1👍1
#фишка дня
Лет так 15-20 назад, когда Интернет ещё был про документы и будущее веб-приложений только начинало формироваться, все кругом были озабочены темой типографики. Если ты не использовал один из множества инструментов-типографов — ты и не верстальщиком был вовсе.
Не то, чтобы сейчас на неё как-то совсем забили, но ажиотаж уже не тот. Выровняли вертикальный ритм, заменили кавычки с тире и поехали.
И одной из модных тем, над которыми любили заморачиваться, была висячая пунктуация (вики и ководство). Она придавала, да и придаёт, текстам некий шарм.
И уровень детализации может быть разный, от кавычек до точек и запятых. Кавычки, впрочем, очень сильно заметны. История висячей пунктуации, кстати, своими корнями идёт глубже, чем даже первая печатная книга, но мы пока углубляться в это не будем.
А вот куда будем — так это в способы реализации.
Первый и очевидный, которым пользовались много лет назад и по сей день — это реализация на JavaScript: https://codepen.io/alinaki/pen/BaeBOBr
Рассчитываем положение строк, смотрим, нужно ли подвесить ту же кавычку и подвешиваем.
Второй способ — для выделения цитат или набоков-стайл прямой речи — это text-indent, идеально подходит, просто свешиваем первую строку на ширину символа: https://codepen.io/alinaki/pen/vYwBzBm
И самый современный вариант — это использование CSS-правила hanging-punctuation. Которое, к сожалению, поддерживается пока только в Safari (смотрим предыдущий пример, секцию supports).
Правда, Safari не будь Safari если бы не накосячили в текстовых полях, поэтому, если применяете правило глобально — отключайте его на формах.
Ну и, конечно, не стоит забывать о том, что висячая пунктуация на самом деле не очень прижилась в советской и пост-советской типографской среде, и сместилась в сторону оптического выравнивания. В таком случае, text-indent или JS-решение вполне себе ваш выбор.
#css #typography
Лет так 15-20 назад, когда Интернет ещё был про документы и будущее веб-приложений только начинало формироваться, все кругом были озабочены темой типографики. Если ты не использовал один из множества инструментов-типографов — ты и не верстальщиком был вовсе.
Не то, чтобы сейчас на неё как-то совсем забили, но ажиотаж уже не тот. Выровняли вертикальный ритм, заменили кавычки с тире и поехали.
И одной из модных тем, над которыми любили заморачиваться, была висячая пунктуация (вики и ководство). Она придавала, да и придаёт, текстам некий шарм.
И уровень детализации может быть разный, от кавычек до точек и запятых. Кавычки, впрочем, очень сильно заметны. История висячей пунктуации, кстати, своими корнями идёт глубже, чем даже первая печатная книга, но мы пока углубляться в это не будем.
А вот куда будем — так это в способы реализации.
Первый и очевидный, которым пользовались много лет назад и по сей день — это реализация на JavaScript: https://codepen.io/alinaki/pen/BaeBOBr
Рассчитываем положение строк, смотрим, нужно ли подвесить ту же кавычку и подвешиваем.
Второй способ — для выделения цитат или набоков-стайл прямой речи — это text-indent, идеально подходит, просто свешиваем первую строку на ширину символа: https://codepen.io/alinaki/pen/vYwBzBm
И самый современный вариант — это использование CSS-правила hanging-punctuation. Которое, к сожалению, поддерживается пока только в Safari (смотрим предыдущий пример, секцию supports).
Правда, Safari не будь Safari если бы не накосячили в текстовых полях, поэтому, если применяете правило глобально — отключайте его на формах.
Ну и, конечно, не стоит забывать о том, что висячая пунктуация на самом деле не очень прижилась в советской и пост-советской типографской среде, и сместилась в сторону оптического выравнивания. В таком случае, text-indent или JS-решение вполне себе ваш выбор.
#css #typography
👍10❤1🤩1