Тайный советник Tilda

TextEditor, неразрывный пробел

ready
Давно чесалось такое решение. Чтобы визуальный процесс редактирования текста/написания поста/дизайна в Zero не сводил с ума обывателя и был реально близок «Что видишь, то и получаешь».

* * *

Различные текстовые редакторы (Pages, Word, iAWriter, Bears) используют для отображения скрытого для глаза неразрывного пробела вспомогательный символ (буллета, средней точки, нижнего подчеркивания, тильды или аката) для того, чтобы показать неразрывный пробел.

image


Вставлять
  • из буфера обмена, при копировании форматированного текста
  • через Cmd+Space (или Shift+Space, так даже лучше) при наборе с клавиатур



Вариации решения
Я использовал тильду для примера.
Надо посмотреть, как себя поведет в инпутах.

  1. вариант с~неразрывным пробелом
  2. вариант с^неразрывным пробелом
  3. вариант снеразрывным пробелом
  4. вариант с · неразрывным пробелом


У вариантов 1-2 максимальное сходство ширины. 4 самый эстетичный, но не всем очевидный, плохо работает в малых кеглях и надо мудрить с отступами (сейчас он отбит пробелами с обоих сторон), чтобы привести символ по ширине к пробелу. Надо больше тестов в разных наборах/кеглях/местах ввода.

Возможное решение в коде на клиенте:


image


image

Ха! Вот еще засада – нет вставки Pre и Code
Для блоггеров кодеров или поэтов (и то и то узкий сегмент, конечно) но...

Открытые вопросы:
  1. Что сохраняется на сервере? В каком виде они сейчас хранятся? Как добиться совместимости старых   и нормальных?
  2. Что с типографами? Как подружить процесс редактирования и сохранения?
  3. C текстами внутри редакторов мы так разберемся. И сделать можно относительно малой кровью. Но как быть с <input /> и <textаrea /> из боковой панели и из дерева страниц?