文字を変換する

Question

みんな！私はrtl変換でいくつかのコードを持っていますが、ここの文字は間違った変換（回転）を持っています。それを完全に説明する方法を知らない。読むのは難しいです。あなたが理解することを願っています。誰かが私に助けてくれますか？

function wrap(element) { 
 
    var text = element.getAttribute('data-original'); 
 
    if (!text) { 
 
    text = element.textContent.trim(); 
 
    element.setAttribute('data-original', text); 
 
    } 
 

 
    var words = text.split(/\s+/); 
 
    var result = '', 
 
    line = '', 
 
    reverseLine = false; 
 
    element.innerHTML = 'a'; 
 
    var height = element.offsetHeight; 
 

 
    for (var i = 0; i < words.length; i++) { 
 
    var candidate = line + ' ' + words[i]; 
 
    element.innerHTML = result + candidate; 
 
    if (element.offsetHeight > height) { 
 
     height = element.offsetHeight; 
 
     result += '<div>' + line + '</div>'; 
 
     line = words[i]; 
 
    } else { 
 
     line = candidate; 
 
    } 
 
    } 
 
    if (line) result += '<div>' + line + '</div>'; 
 
    element.innerHTML = result; 
 
} 
 

 
function wrapAll() { 
 
    console.time('wrapAll()'); 
 
    [].forEach.call(document.querySelectorAll('.text-inverse'), wrap); 
 
    console.timeEnd('wrapAll()'); 
 
} 
 
wrapAll(); 
 
window.onresize = wrapAll;

.text-inverse div:nth-child(2n) { 
 
    direction: rtl; 
 
    unicode-bidi: bidi-override; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div class="courses"> 
 
    <h1>Header</h1> 
 
    <time class="date" datetime="2016-11-08"></time> 
 
    <p class="course text-inverse">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at cursus nisi. Morbi in quam eget quam aliquet laoreet vitae ac metus. Suspendisse nulla risus, faucibus vel lacus ac, sagittis accumsan nunc. Ut eleifend elit vitae commodo posuere. Donectincidunt, nulla vel ullamcorper tempor, nisl libero pretium tellus, eget luctus sem tellus in mi. Curabitur hendrerit urna in facilisis posuere. Ut ornare quis nibh et tincidunt. Mauris id orci a nisi lacinia eleifend sed id lectus.</p> 
 
</div>

Answer 1

あなたは右から左へと奇数ラインと左から右への単語を読むことをお勧めします。

したがって、各奇数行を取得し、単語の順序を逆にする必要があります。

あなたは奇数ラインの文字列がある場合：空白の

が

1. 分割および生成配列
2. 文字列として逆の順序、連結方式
3. の単語の文字を逆にし

注意：単語の末尾にドットがあるかどうかをチェックして、開始点に配置してください（ "end"に表示されます）。

function wrap(element) { 
 
    var text = element.getAttribute('data-original'); 
 
    if (!text) { 
 
    text = element.textContent.trim(); 
 
    element.setAttribute('data-original', text); 
 
    } 
 

 
    var words = text.split(/\s+/); 
 
    var result = '', 
 
    line = '', 
 
    reverseLine = false; 
 
    element.innerHTML = 'a'; 
 
    var height = element.offsetHeight; 
 

 
    for (var i = 0; i < words.length; i++) { 
 
    var word = words[i]; 
 
    var candidate = line + ' ' + word; 
 
    element.innerHTML = result + candidate; 
 
    if (element.offsetHeight > height) { 
 
     height = element.offsetHeight; 
 
     result += '<div>' + line + '</div>'; 
 
     line = word; 
 
    } else { 
 
     line = candidate; 
 
    } 
 
    } 
 
    if (line) result += '<div>' + line + '</div>'; 
 
    element.innerHTML = result; 
 
} 
 

 
function wrapAll() { 
 
    console.time('wrapAll()'); 
 
    [].forEach.call(document.querySelectorAll('.text-inverse'), wrap); 
 
    reverseOddLinesWithChars(); 
 
    console.timeEnd('wrapAll()'); 
 
} 
 
wrapAll(); 
 
window.onresize = wrapAll; 
 

 

 

 
function reverseOddLinesWithChars() { 
 
    var textInverseHolder = document.getElementsByClassName("text-inverse")[0].children; 
 
    
 
    for (var i = 0, length = textInverseHolder.length; i < length; i++) { 
 
    var isOddLine = i%2; 
 
    if (isOddLine) { 
 
     var currentLine = textInverseHolder[i]; 
 
     var words = currentLine.innerHTML.split(" "); 
 
     var reversedWords = reverseCharOrderOfWords(words); 
 
     
 
     currentLine.innerHTML = reversedWords.join(" "); 
 
    } 
 
    } 
 
} 
 

 
function reverseCharOrderOfWords(words) { 
 
    words.forEach(function (word, index, array) { 
 
     var newWord = word.split("").reverse().join(""); 
 
     newWord = placeDotOrCommaOnOtherSide(newWord); 
 
     words[index] = newWord; 
 
    }); 
 

 
    return words; 
 
} 
 

 
function placeDotOrCommaOnOtherSide(word) { 
 
    if (word.charAt(0) === ".") { 
 
    return returnCharOnOtherSide(word, "."); 
 
    } else if (word.charAt(0) === ",") { 
 
    return returnCharOnOtherSide(word, ","); 
 
    } 
 
    
 
    return word; 
 
} 
 

 
function returnCharOnOtherSide(word, char) { 
 
    return word.split(char)[1] + char; 
 
}

.text-inverse div:nth-child(2n) { 
 
    direction: rtl; 
 
    unicode-bidi: bidi-override; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div class="courses"> 
 
    <h1>Header</h1> 
 
    <time class="date" datetime="2016-11-08"></time> 
 
    <p class="course text-inverse">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p> 
 
</div>