[英]Can I use the browser's word-wrapping from JavaScript?
I have some text in a div. 我在div中有一些文字。 It can be any Unicode text under the sun, including Chinese, Japanese, and Korean.
它可以是阳光下的任何Unicode文本,包括中文,日语和韩语。 Now, I need to take this text and word-wrap it in JavaScript in some efficient but correct manner.
现在,我需要以某种有效但正确的方式获取此文本并将其用JavaScript换行。 Then I need to insert a ">" at the start of every line, and put the resulting text into a textarea.
然后,我需要在每一行的开头插入一个“>”,然后将结果文本放入文本区域。
Browsers have an implementation of the Unicode Word Wrap algorithm, as is evidenced by word-wrapping Unicode text in a with CSS. 浏览器具有Unicode换行算法的实现,这可以通过CSS中的Unicode文本换行来证明。 (At least, Firefox has such an algorithm, and I suspect other browsers do as well.) What I need is some way for JavaScript to use the same word-wrapping algorithm, so that I can properly wrap and then "quote" Unicode text.
(至少,Firefox有这样的算法,我怀疑其他浏览器也会这样做。)我需要的是JavaScript使用相同的自动换行算法的某种方式,以便我可以正确包装然后“引用” Unicode文本。
Is there any way for JavaScript to use the browser's word-wrapping algorithm, or to know where text has been line-broken in a div or any other element? JavaScript有什么方法可以使用浏览器的自动换行算法,或者不知道div或任何其他元素中文本的换行位置?
What you really want isn't necessarily to insert ">" in the flowed text at the beginning of every line. 您真正想要的不一定是在每行开头的流文本中插入“>”。 What you really want is for every line in a given block to have a ">" at the left of it.
您真正想要的是给定块中的每一行的左侧都有一个“>”。
You could potentially do the latter by: 您可以通过以下方式实现后者:
1) Creating an image of the ">" character, with its height from top to bottom equivalent to the CSS line-height
value you plan on using. 1)创建一个“>”字符的图像,其顶部到底部的高度等于您计划使用的CSS
line-height
值。 Apply that image as a background on the container of the text you want this "inserted" into. 将该图像作为背景,将其“插入”到您要插入的文本容器中。 Have it repeat vertically, but not horizontally.
使其垂直重复,但不能水平重复。 Pad the container the width of the character/image.
在容器上填充字符/图像的宽度。
2) Have some javascript get the computed value of the line-height
property for the container you're working with. 2)让一些javascript获取您正在使用的容器的
line-height
属性的计算值。 Then, assuming you're not artificially setting the height of this container, the number of "lines" of text in the container is its offsetHeight
divided by the computed line-height. 然后,假设您不是人为地设置此容器的高度,则容器中文本的“行”数是其
offsetHeight
除以计算的行高。 At this point, create a separate container that has nothing but that number of >'s as its content. 此时,创建一个单独的容器,该容器只包含一定数量的>作为其内容。 Position it to the left edge of your content container.
将其放置在内容容器的左边缘。
Your larger question about whether you have access to the text-flow algorithm the browser uses via JavaScript is an interesting one, but I'm pretty sure the answer is no. 关于您是否可以访问浏览器通过JavaScript使用的文本流算法的更大问题是一个有趣的问题,但是我敢肯定,答案是否定的。 However, as more developers start playing with the Canvas element, people are writing their own (Canvas has text drawing, but not its own flow-layout algorithm for text).
但是,随着越来越多的开发人员开始使用Canvas元素,人们正在写自己的东西(Canvas具有文本绘图功能,但没有其自己的文本流布局算法)。 You might want to see what the Bespin guys did ( https://bespin.mozillalabs.com/ - it's a text editor implemented using the Canvas) or check out the source of some of the sandbag/image textwrapping javascript libraries like jQSlickWrap ( http://jwf.us/projects/jQSlickWrap/ ).
您可能想看看Bespin家伙做了什么( https://bespin.mozillalabs.com/-这是一个使用Canvas实现的文本编辑器)或查看了一些沙袋/图像文本包装JavaScript库的源代码,例如jQSlickWrap( http ://jwf.us/projects/jQSlickWrap/ )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.