Шрифт с фиксированной шириной в редакторе только для Markdown

[sam (Sam Saffron)]

Быстрое объявление:

FEATURE: when rich editor is enabled markdown is in monospace (#32097)

Для тех из вас, кто тестирует новый редактор (либо здесь, на Meta, либо на своём сайте), мы только что изменили шрифт для разметки Markdown (то есть исходного кода) на моноширинный.

Это помогает пользователям чётко понимать, что они находятся в режиме «Markdown», а не в режиме «Rich».

Это изменение приводит выбор шрифта в соответствие с общепринятой отраслевой практикой (Reddit / Stack Exchange).

Изменение вступит в силу только на сайтах с включённым богатым редактором и должно быть доступно здесь в течение 20–40 минут.

[Jagster (Jakke Flemming)]

@sam

Это изменение приводит выбор шрифта в соответствие с общепринятыми в отрасли стандартами (Reddit / Stack Exchange).

Поскольку я не пользуюсь ни одним из этих сервисов и работаю в совершенно другой отрасли, как мне вернуть более приятный шрифт? Разумеется, на собственном хостинге.

[sam (Sam Saffron)]

Вы можете добавлять темы и компоненты на свой сайт — замена этого шрифта занимает всего три строки CSS.

Более приятный шрифт сохраняется в новом редакторе сообщений; там мы не переходим на моноширинный шрифт.

[Jagster (Jakke Flemming)]

Я обычно пишу более длинные посты, и мне не нужен визуальный редактор, но мои пользователи нуждаются в нём, поэтому я бы использовал Markdown. Однако моноширинный шрифт действительно трудно читать, и есть причина, по которой большинство представителей индустрии не используют моноширинные шрифты в редакторах.

Просто из любопытства — в чём была цель этого изменения? Это сейчас как-то нарушает удобство использования.

Но да, я начну копаться в классах, когда окажусь на более удобном для пользователя устройстве, а iPad в этом плане — именно такое

[sam (Sam Saffron)]

@Jagster

Но моноширинный шрифт действительно трудно читать, и есть причина, по которой большинство отраслевых редакторов не используют моноширинный шрифт.

Это не совсем так: все современные редакторы кода используют моноширинный шрифт — это отраслевой стандарт.

Тем не менее, смиритесь с этим изменением здесь. Если это вас действительно сильно раздражает на Meta, рекомендую нажать на эту кнопку:

Текстовый редактор здесь работает исключительно хорошо. Мы прислушиваемся к отзывам по поводу шрифта.

[Jagster (Jakke Flemming)]

@sam

все редакторы кода

Я не использую редакторы кода. Я создаю текст и контент.

@sam

Текстовый редактор здесь работает исключительно хорошо

Он работает.

@sam

если это действительно сильно раздражает вас на Meta

Это действительно меня раздражает, но я могу с этим смириться здесь, потому что я мало пишу. Однако вы дали мне подсказку, как исправить это на моём форуме, и это сработало. Спасибо.

Но я получил ответ, даже если всё ещё не понимаю смысла и цели этого изменения, но мне и не обязательно это знать. Meta делает то, что делает Meta, а я могу изменить это на своей стороне. Большинство людей довольны.

[schneeland]

@sam

Это не совсем верно: все редакторы кода используют моноширинный шрифт, это отраслевой стандарт.

Хотя это так, я задаюсь вопросом, уместна ли здесь такая метафора. Когда я думаю о написании постов в Discourse с использованием Markdown, я мысленно нахожусь не в «пространстве программирования», а скорее в «пространстве веб-редактирования». И если посмотреть на Discord или JIRA, где я также пишу посты в формате Markdown, там не используются моноширинные шрифты.

В целом, я в основном доволен новым редактором (поскольку его можно использовать в некоем «полуграфическом режиме», когда вы всё ещё вводите Markdown, но форматирование применяется после завершения блока строки), и думаю, что буду обращаться к старому всё реже после его внедрения. Однако, если вы решите оставить моноширинный шрифт, было бы неплохо уменьшить его насыщенность, чтобы она была ближе к насыщенности отформатированного текста. Сейчас текст выглядит немного слишком жирным.

[tobiaseigen]

Это интересное изменение! Сегодня, используя его для написания более длинных постов, я столкнулся с тем, что к чему мне сложнее всего привыкнуть: левая сторона занимает больше места, чем правая, из-за чего они быстро теряют синхронизацию.

Я так привык следить за превью во время написания, чтобы убедиться, что всё выглядит так, как я хочу, что даже после всех этих лет всё ещё иногда кликаю на сторону превью вместо стороны с разметкой!

С этим изменением, конечно, это перестанет быть проблемой. Теперь совершенно ясно, где нужно печатать.

Мне понадобится время, чтобы привыкнуть к этому, но я согласен с @schneeland, что шрифт для разметки мог бы быть меньше.

[Arkshine]

Я понимаю намерение добавить визуальный ориентир. В данном контексте это имеет смысл! Иногда я задаюсь вопросом, использую ли я визуальный редактор.
Также важно делать акцент в пользу визуального редактора, поскольку в целом он работает исключительно хорошо.

Я всё ещё часто пользуюсь Markdown-редактором из-за ошибок в визуальном редакторе.
Сейчас текст читать непросто:

Как отметила Schneeland, я не считаю Markdown-редактор редактором кода; потребуется время, чтобы к нему привыкнуть. Было бы здорово, если бы размер шрифта можно было настроить так, чтобы он был ближе к размеру шрифта в предпросмотре.

[j127]

@Jagster

Меня это действительно раздражает, но я могу с этим смириться здесь, потому что я не много пишу.

Если вы установите расширение для браузера под названием Stylus для браузеров Firefox и Chromium, вы сможете переопределять CSS на других сайтах.

Я не часто использую Safari и не пробовал это там, но есть настройка для добавления пользовательской таблицы стилей в разделе Advanced → Style Sheet.

Думаю, этот CSS сработает:

.d-editor-input {
    font-family: var(--font-family) !important;
}

(Замените var(--font-family) на другое имя шрифта, если хотите другой шрифт.)

[sam (Sam Saffron)]

@Arkshine

Потребуется время, чтобы привыкнуть к этому. Было бы здорово, если бы размер шрифта можно было настроить так, чтобы он ближе соответствовал шрифту в предварительном просмотре.

Это уже не раз озвучивалось. Я попробую подключить JetBrains Mono и поэкспериментировать с размером, чтобы посмотреть, можно ли добиться лучшего выравнивания.

Одним из важных выводов стало понимание того, что все мы воспринимаем моноширинные шрифты по-разному, поэтому создание единообразного опыта может помочь в этом вопросе.

[Arkshine]

Вот как это выглядит при использовании шрифта JetBrains Mono размером 14px:

Прямое сравнение:

Мне кажется, что JetBrains Mono выглядит превосходно. Он определённо легче читается и хорошо сочетается со шрифтом предварительного просмотра.

Кроме того, логично было бы выделить содержимое, поскольку теперь оно обрабатывается как код. Существует соответствующая тема, но я не помню её содержание. Например:

[Alteras (Steven Chang)]

Вероятно, проблема с внешним видом моноширинного шрифта заключается в том, что он использует системные значения по умолчанию для --d-font-family--monospace, в отличие от базового шрифта Inter по умолчанию в --font-family. При размере 14 пикселей (размер шрифта для блоков кода) он выглядит нормально, но при размере шрифта текстового редактора он кажется странным рядом с Inter.

app/assets/stylesheets/common/foundation/base.scss

Firefox - Windows

Firefox - MacOS

Safari - MacOS

Хотя такое поведение, при котором используется системный шрифт по умолчанию, соответствует другим сайтам, ориентированным на программирование, таким как GitHub и StackOverflow, вероятно, лучше найти конкретный моноширинный шрифт, который хорошо сочетается с основным шрифтом Inter по умолчанию.

[sam (Sam Saffron)]

FEATURE: when rich-editor is enabled use Jetbrains Mono as code font (#32122)

Это должно быть доступно здесь в ближайшее время, я заканчиваю ревью PR.

Те скриншоты, которые у вас есть, будут исправлены, @Alteras.

@Arkshine

Кроме того, было бы логично выделить содержимое, теперь что оно обрабатывается как код.

Это непросто. Я не против этого, но это потребует довольно крупных изменений.

Сейчас мы рендерим Markdown в TEXTAREA. Чтобы реализовать такое выделение, нам пришлось бы заменить его на Ace (который у нас уже есть) или CodeMirror (которого у нас нет) или настроить кастомный ProseMirror (что было бы очень сложно).

Лично мне нравится Markdown с подсветкой синтаксиса, но я считаю, что отвлечение на эту побочную задачу сильно помешает нашему прогрессу в работе над богатым редактором.

[Jagster (Jakke Flemming)]

Мне всё ещё интересно: не было бы самым очевидным решением вообще не использовать моноширинный шрифт, а применять простой компонент там, где моноширинный формат необходим.

Но я вижу различие в политике здесь:

• Markdown предназначен для разработчиков и кодирования;
• Рич-текстовый редактор — для всех остальных;
• если кто-то относится к категории «все остальные», но предпочитает использовать Markdown, то ему приходится выбирать.

Что меня действительно не уясняет, так это реальная потребность и спрос на использование моноширинного шрифта при создании контента для написания текстов, который затем отображается совершенно другим шрифтом.

Меня сильно раздражает снова ощущение, что кто-то снова проводит границу между разработчиками и обычными пользователями — хотя, возможно, разработчики составляют большинство в мире. Но, вероятно, это лишь моя личная проблема, потому что все остальные в этой теме полностью довольны (если только удастся решить вопрос с размером шрифта).

В общем, для меня это довольно академическая тема, поскольку на моём форуме этот CSS-трюк работает, и моим пользователям не нужен этот огромный указатель, чтобы понять, какой редактор они используют: Markdown или рич-текстовый. И поскольку у меня есть ощущение, что мета-информация о том, почему это делается и что это даёт, никому не нужна и не требуется, всем будет лучше, если я уйду от обсуждения — ведь в конце концов я не разработчик, мне не нужен код или редактор кода, а только Markdown-редактор для создания контента.

[sam (Sam Saffron)]

Нам нужно время, чтобы привыкнуть к изменениям, ведь любые перемены поначалу резки. Сегодняшние доработки сделали изменения значительно менее резкими.

Моноширинный шрифт имеет и другие преимущества в контексте Markdown: с таблицами теперь гораздо проще работать, и с предформатированным текстом тоже гораздо проще.

Я здесь, внимательно слушаю ваши комментарии. Если в итоге мы придём к выводу, что изменения слишком радикальны из-за массовых отзывов, мы можем пересмотреть или уточнить наше решение.

Сегодняшнее изменение также имеет прекрасный побочный эффект для Discourse. Раньше под моноширинным шрифтом разные люди понимали разное, так как каждая ОС имеет свою интерпретацию. Теперь пользователи с включённым rich_editor получают единообразный опыт работы с моноширинным шрифтом во всём продукте.

Я полностью понимаю вашу реакцию вчера, но сегодня я чувствую себя гораздо комфортнее с скорректированным шрифтом. Это хорошо, и это позволяет мне писать вот так:

   \(^-^)/
     |
    /\

И в редакторе это выглядит точно так же, как и в предпросмотре.

[merefield (Robert)]

Согласен, это полностью логично по умолчанию.

И это возможность для компонента темы обеспечить большую гибкость (например, «липкое» выпадающее меню со шрифтами?)

[Arkshine]

Спасибо за обновление! Выглядит естественно, и сейчас уже довольно комфортно.
Это небольшое изменение имеет большое значение, и я уже чувствую, что привыкаю к нему.

[manuel (Manuel Kostka)]

Мне это не очень нравится. Шрифт с фиксированной шириной заставляет меня слишком остро осознавать, что я печатаю в одном окне, а сам текст отображается в другом. Это вызывает воспоминания о LaTeX…

Если это будет реализовано на постоянной основе, то, на мой взгляд, для этого должна быть отдельная переменная шрифта, например --d-font-md-composer, а не использовать шрифт по умолчанию --d-font-family-monospace. Так его можно будет легко изменить на уровне сайта, не затрагивая шрифт с фиксированной шириной.

[alltiagocom (Tiago)]

Я заметил, что шрифт в редакторе на форуме изменился:

Не знаю, было ли это сделано намеренно или нет?
Если это намеренно, надеюсь, что это не обновление для всех пользователей Discourse, так как мне нравится обычный шрифт «Arial/Helvetica/sans serif». Или хотя бы возможность изменить его самостоятельно в панели администратора.

РЕДАКТИРОВАНИЕ: Так как мой пост был разделён на отдельную тему, в текущей теме он выглядит немного странно, так что забудьте об этом. Я знаю, что это сделано намеренно…

---

Моё мнение: я понимаю, почему использование разных шрифтов для двух разных редакторов может иметь смысл, но, например, Obsidian — это инструмент для работы с Markdown, и он не использует моноширинный шрифт по умолчанию. И, как кто-то уже заметил, я не воспринимаю это пространство как «кодинг», хотя, безусловно, с помощью редактора с форматированием можно добавлять элементы, которые «средний» пользователь не поймёт.

Не знаю, просто это выглядит странно, потому что это шрифт, который мы не используем регулярно (или вообще не используем) при наборе текста или сообщений. Я привык пользоваться и Discourse, и Obsidian «старым» способом, поэтому сейчас странно либо печатать моноширинным шрифтом, либо использовать редактор с форматированием.

Неужели это нельзя сделать настройкой, которую каждый пользователь мог бы изменить?