Один <span>на символ в веб-редакторе

Question

Я занимаюсь разработкой веб-текстового редактора без каких-либо contentEditable, textarea или input вещей. Самая большая часть моей работы - это измерение ширины текста с левой (правой) стороны от текущей позиции каретка и перемещение каретки в тексте.

Например, когда пользователь нажимает клавишу ВНИЗ, необходимо вычислить текущее левое смещение каретки и в строке ниже символа, положение которого наиболее похоже, должно быть найдено.

Один очень удобный способ сделать это - использовать один элемент DOM на символ - я могу просто посмотреть на свойство offsetLeft. Кроме того, позиционирование каретки намного проще. На самом деле все проще.

Однако Я очень не уверен в последствиях для производительности . Я видел эту технику (или аналогичную), которая используется в некоторых веб-интерфейсах JavaScript "IDE", и там она прекрасно работает.

У вас есть какие-нибудь советы, подсказки?

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

РЕДАКТИРОВАТЬ: Я в основном спрашиваю о главном факте существования многих элементов дом. Как сделать измерения это другое дело.

Answer 1

Я видел, как это было сделано (к сожалению, сейчас я не могу найти ссылку) с помощью объекта canvas и его метода measureText () - в основном вы можете задать холсту «какой размер был бы у этого фрагмента текста, если бы я его отобразил» в этом стиле? и используйте это, чтобы определить вашу позицию каретки на окружающих линиях. Это эффективно, но, конечно, оно будет работать только в браузерах с поддержкой HTML5, и, возможно, не во всех из них.

Но, честно говоря, это звучит как большая боль в шее и, вероятно, больше проблем, чем это стоит для редактора в браузере:)

Answer 2

Возможно, вас заинтересует this , представляющая собой реализацию javascript текстового редактора VI. К сожалению, он использует textarea, но не в типичной манере.