trovare “interruzioni di riga” in textarea che è un testo ARABICO con word-wrapping

Ho una stringa di testo che visualizzo in una textarea (orientamento da destra a sinistra). L’utente può ridimensionare la textarea in modo dinamico (io uso jquery per questo) e il testo si avvolgerà se necessario.

Quando l’utente preme Invio, prenderò quel testo e creerò un’immagine usando PHP, MA prima di inviarlo vorrei sapere dove si verificano le “interruzioni di riga” o piuttosto “word-wraps”.

Ovunque ho guardato finora mi mostra solo come elaborare interruzioni di linea dal lato php. Voglio chiarire che non ci sono interruzioni di linea. Quello che ho è una stringa LONG che sarà avvolta da parole in diversi modi in base alla larghezza dell’area di testo impostata dall’utente.

Non posso usare “colonne” o qualsiasi altra rappresentazione di larghezza standard perché ho un carattere arabo molto complesso che è in realtà composto da glifi (caratteri) di numerose larghezze diverse.

Se qualcuno sa di un modo per accedere a dove avvengono i word wraps (in una textarea o in un div se necessario), mi piacerebbe davvero saperlo.

    La mia unica altra soluzione è di memorizzare effettivamente (nel mio DB) la larghezza di ogni singolo personaggio (un po ‘noioso dal momento che ci sono oltre 200 caratteri in 600 caratteri diversi, per un totale di … un numero enorme).

    Le mie speranze non sono alte, ma ho pensato di chiedere.

    Grazie

    io. Jamal

    Bene, invece di trovare le interruzioni di riga (che è praticamente imansible) puoi forzarle nella textarea, usando questa funzione:

    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", ""); } 

    Questa funzione ottiene l'ID della textarea e ogni volta che c'è un ritorno a capo, inserisce una nuova interruzione di riga nella textarea. Esegui la funzione nel modulo di invio e otterrai il testo con interruzioni di riga appropriate nel codice lato server.

    Testato con successo per IE, Chrome e Firefox sentiti libero di vedere qui: http://jsfiddle.net/yahavbr/pH79a/1/ (L'anteprima mostrerà le nuove linee)

    Ecco un’implementazione funzionalmente equivalente della soluzione di Shadow Wizard che è molto più veloce perché utilizza la ricerca binaria invece della ricerca lineare per determinare la lunghezza di ogni linea:

     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; function testBreak(strTest) { oTextarea.value = strTest; return oTextarea.scrollWidth > nEmptyWidth; } function findNextBreakLength(strSource, nLeft, nRight) { var nCurrent; if(typeof(nLeft) == 'undefined') { nLeft = 0; nRight = -1; nCurrent = 64; } else { if (nRight == -1) nCurrent = nLeft * 2; else if (nRight - nLeft <= 1) return Math.max(2, nRight); else nCurrent = nLeft + (nRight - nLeft) / 2; } var strTest = strSource.substr(0, nCurrent); var bLonger = testBreak(strTest); if(bLonger) nRight = nCurrent; else { if(nCurrent >= strSource.length) return null; nLeft = nCurrent; } return findNextBreakLength(strSource, nLeft, nRight); } var i = 0, j; var strNewValue = ""; while (i < strRawValue.length) { var breakOffset = findNextBreakLength(strRawValue.substr(i)); if (breakOffset === null) { strNewValue += strRawValue.substr(i); break; } var nLineLength = breakOffset - 1; for (j = nLineLength - 1; j >= 0; j--) { var curChar = strRawValue.charAt(i + j); if (curChar == ' ' || curChar == '-' || curChar == '+') { nLineLength = j + 1; break; } } strNewValue += strRawValue.substr(i, nLineLength) + "\n"; i += nLineLength; } oTextarea.value = strNewValue; oTextarea.setAttribute("wrap", ""); } 

    Violino aggiornato

    Penso che il modo più semplice per farlo sarebbe impostare la parola wrap della tua textarea nel codice html in “hard”, come questo:

      

    Significa che ovunque la tua textarea rompa la linea per te inserirai anche un \ n carattere spezzato nella stringa al momento dell’invio. Se poi trovi questo attraverso la tua stringa, sarà facile determinare dove si trovava originariamente la pausa. Oppure puoi anche trasformare questi personaggi in
    tag html con la funzione nl2br () di PHP.

    Per qualche ragione, non sono mai stato avvisato quando questo post è stato aggiornato … e la scorsa notte, ho avuto questa idea BRILLANTE su come determinare dove erano le interruzioni di riga … Ricreverei la stringa e controllerei la larghezza ogni volta, e ha funzionato quindi sono venuto qui per condividerlo … e ho scoperto che ero indietro di una settimana

    Comunque 2 cose importanti

    1. Il codice che hai fornito usa la stessa brillante idea che avevo (ben fatto te) MA quando lo provo, rompe la prima riga correttamente e aggiunge una interruzione di linea dopo ogni carattere (testato sul link jsfiddle.net)

    2. Ho aggiunto il mio codice che usa jquery e usa la larghezza di una span per determinare quando interrompere Inizialmente ho provato a usare la larghezza del div, ma div.width () restituisce la larghezza predefinita, non la larghezza del contenuto.

    SONO CONSAPEVOLE CHE QUESTO POTREBBE NON FUNZIONARE SU TUTTI I BROWSER , quindi chiedo cortesemente che, se qualcuno conosce un modo per renderlo infallibile, o vicino ad esso, per favore condividi.

    Innanzitutto, gli stili sono necessari per sincronizzare i caratteri (tutti gli attributi) tra textarea e div, impostare la dimensione e (per IE) rimuovere eventuali barre di scorrimento che appaiono automaticamente.

     .inputArea { width:200px; height:100px; font-family:Arial; font-size:12px; overflow: auto; border: 1px solid #cccccc; padding:0; margin:0; } .divArea { font-family:Arial; font-size:12px; } 

    Successivamente, includo jquery e le mie funzioni personalizzate:

       

    E infine, la mia pagina di test html

     Enter text into the textarea below (Set to 200 px width, 100 px height)


    The div below will display that text WITHOUT wrapping, BUT replacing all existing line breaks with


    The following div will display that text with line breaks ADDED to fit the wrapping

    Ecco il mio esempio per calcolare il numero effettivo di righe (dopo il ritorno a capo) per ogni riga di testo in una textarea. Prendi nota del fatto che la larghezza del testo di un’area di testo si riduce leggermente quando viene visualizzata la barra di scorrimento . Ciò può causare ulteriore involucro del contenuto precedente in modo che l’altezza della riga calcasting in precedenza non sia corretta. Pertanto, la textarea deve avere overflow-style in stile CSS-y impostato su “scroll” per forzare la visualizzazione della barra di scorrimento tutto il tempo .

     function get_row_wraps(txtArea){ if(wrap=="off"){ var out=[]; for(var i=txtArea.split_lines.length; i>=0; --i) out[i]=1; return out; } var its=txtArea.value.split("\n"); var newArea = txtArea.cloneNode(true); newArea.hidden=true; newArea.style.visibility = "hidden"; txtArea.parentNode.appendChild(newArea); // get single row height newArea.style.height="auto"; newArea.style.overflowY="scroll"; newArea.value="1\n2\n3"; var unit_height=newArea.scrollHeight; newArea.value="1\n2\n3\n4"; var unit_height=newArea.scrollHeight-unit_height; newArea.style.height=Math.round(unit_height*1.5)+"px"; // so that the scrollbar does not vanish newArea.value=""; // obtain row height for every line of text function comp_Nrow(scroll_height){ return Math.floor(scroll_height/unit_height); } function calc_rows(txt){ newArea.value+=txt; return comp_Nrow(newArea.scrollHeight); } var out=[]; for(var i=0; i0; i--) out[i]-=out[i-1]; // alert(out); return out; } 

    La funzione sopra riportata restituisce il numero effettivo di righe spostate per ogni riga di testo (separate da “\ n”) in una textarea. Il calcolo è accurato almeno per Chrome e Firefox.

    Codice testato su “Crome”, “Firefox” e “IE”. Ottieni line feed e carriage return un componente “textArea” ( lato client con javascript ).

    FUNZIONA BENE!. Mi piacerebbe condividerlo con te

    importante includere lo stile

        <%--//definimos un estilo--%>     
    hola