Я работаю над проектом, чтобы сгенерировать изображение, которое копирует введенный пользователем текст в <textarea>.Наилучший подход, который я нашел, это прочитать значение <textarea> и нарисовать его на <canvas>, из которого я могу прочитать BLOB-объект и сохранить его в файл.
Вот очень наивныйНапример, просто чтобы дать представление о том, что я пытаюсь сделать:
https://codepen.io/troywarr/pen/wmbMVq
Обратите внимание, что когда текст, который вы вводите в <textarea>, превышает длину первогострока, текст в <textarea> переносится, а текст в <canvas> - нет.Вот суть кода, который мне все еще нужно написать, но сначала мне нужно полностью понять поведение переноса строк <textarea>, чтобы я мог воссоздать его с помощью алгоритма JavaScript.
Играя с<textarea> в Google Chrome, я определил базовое поведение, когда слово превышает ширину линии (как установлено шириной <textarea>):
- Слова, которым предшествуетпробел будет перенесен, а ширина предыдущего пробела не будет учтена в ширине рендеринга предыдущей строки.
- Слова, которые пишутся через дефис (-, U + 2012), en dash (-,U + 2013) или em dash (-, U + 2014) будут перенесены после последнего дефиса, который помещается в текущей строке.Я все еще изучаю, есть ли другие символы, которые переносятся через дефис.
- Слова, которые превышают общую ширину строки, будут разбиты в середине слова, с последующими символами, переполняющими следующую строку (и).
Однако опыт подсказывает мне, что могут быть некоторые крайние случаи и кросс-браузерные функциональные различия, которые я не учел.Я искал спецификации, которые описывают, как именно <textarea> s должен переносить текст, но я не нашел ни одного.Самое близкое, что я получил, - это спецификация для атрибута wrap , но она не сильно помогает.
Это поведение диктуется различными механизмами рендеринга (т. Е. НеУказано W3C), или я просто пропускаю спецификацию W3C?Если первое, какое поведение я пропустил, и что мне нужно знать с точки зрения функциональных различий между браузерами?