Finding "Line-Breaks" in Textarea That Is Word-Wrapping Arabic Text

finding line-breaks in textarea that is word-wrapping ARABIC text

Well, instead of finding the line breaks (which is virtually impossible) you can force them into the textarea, using this function:

function ApplyLineBreaks(strTextAreaId) {
    var oTextarea = document.getElementById(strTextAreaId);
    if (oTextarea.wrap) {
        oTextarea.setAttribute("wrap", "off");
    }
    else {
        oTextarea.setAttribute("wrap", "off");
        var newArea = oTextarea.cloneNode(true);
        newArea.value = oTextarea.value;
        oTextarea.parentNode.replaceChild(newArea, oTextarea);
        oTextarea = newArea;
    }

    var strRawValue = oTextarea.value;
    oTextarea.value = "";
    var nEmptyWidth = oTextarea.scrollWidth;
    var nLastWrappingIndex = -1;
    for (var i = 0; i < strRawValue.length; i++) {
        var curChar = strRawValue.charAt(i);
        if (curChar == ' ' || curChar == '-' || curChar == '+')
            nLastWrappingIndex = i;
        oTextarea.value += curChar;
        if (oTextarea.scrollWidth > nEmptyWidth) {
            var buffer = "";
            if (nLastWrappingIndex >= 0) {
                for (var j = nLastWrappingIndex + 1; j < i; j++)
                    buffer += strRawValue.charAt(j);
                nLastWrappingIndex = -1;
            }
            buffer += curChar;
            oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
            oTextarea.value += "\n" + buffer;
        }
    }
    oTextarea.setAttribute("wrap", "");
}

This function get ID of textarea and whenever there is word wrap, it push new line break into the textarea. Run the function in the form submit and you will get the text with proper line breaks in the server side code.

Tested successfully for IE, Chrome and Firefox feel free to see for yourself here: http://jsfiddle.net/yahavbr/pH79a/1/ (The preview will show the new lines)

Wrapping a word in a textarea that has a per-line character limit and a total-line-number limit

Here is the working fiddle for your case.

I slightly changed the else branch as follows:

        if (lines[currentLine - 1].length >= ($(this).attr('cols') - 1)) {
             $('textarea').val($('textarea').val() + "-\n");
//                return false; // prevent characters from appearing
        }

As you can see in the fiddle, code adds a - and a new line, when typed text reaches to col limit. Then it goes on on the next line as user types.

detect natural line breaks javascript

Finally I found this script on the internet:

function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
    oTextarea.setAttribute("wrap", "off");
}
else {
    oTextarea.setAttribute("wrap", "off");
    var newArea = oTextarea.cloneNode(true);
    newArea.value = oTextarea.value;
    oTextarea.parentNode.replaceChild(newArea, oTextarea);
    oTextarea = newArea;
}

var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
var nLastWrappingIndex = -1;
for (var i = 0; i < strRawValue.length; i++) {
    var curChar = strRawValue.charAt(i);
    if (curChar == ' ' || curChar == '-' || curChar == '+')
        nLastWrappingIndex = i;
    oTextarea.value += curChar;
    if (oTextarea.scrollWidth > nEmptyWidth) {
        var buffer = "";
        if (nLastWrappingIndex >= 0) {
            for (var j = nLastWrappingIndex + 1; j < i; j++)
                buffer += strRawValue.charAt(j);
            nLastWrappingIndex = -1;
        }
        buffer += curChar;
        oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
        oTextarea.value += "\n" + buffer;
    }
}
oTextarea.setAttribute("wrap", "");
document.getElementById("pnlPreview").innerHTML = oTextarea.value.replace(new RegExp("\\n", "g"), "<br />");

}

Which is working fine.

Google Chrome textareas wrapping and adding line breaks

This should only happen if you set the wrap="hard" attribute on the textarea.

Do you have wrap="hard" set on the textarea ? If so, remove it. If not, can you try setting wrap="soft" as attribute?

How to detect the auto line breaking in textarea

Unfortunately one issue with < canvas > tag is the lack of text-metrics support which ends to not supporting line breaking!

To simulate word-wrapping you need to loop through the singular words in your text (text.split(“ “)), and measuring each word individually until the edge of the bounding-box is hit, at which point a break is inserted, and the process continues.

For more detail information and also implementation guide, please take a look at this article:

• http://mudcu.be/journal/2011/01/html5-typographic-metrics/

I hope this helps :-)

Insert an \n instead of wrapping text in a textarea?

If you are not submitting to a server then you need to splice the newlines in manually. Check out this Fiddle using jQuery. You could probably reduce the example down to straight JS easily enough if you don't want to use jQuery.

---

Related Topics