字母转换

时间:2016-11-06 14:02:42

标签: javascript css

家伙!我有一些rtl转换的代码,但这里的字母有错误的转换(旋转)。不知道如何完全解释它。这很难读。我希望你能理解。有人可以帮帮我吗?

vm.thisDoctor = ($stateParams.args || {}).data;
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;
}

1 个答案:

答案 0 :(得分:1)

您想要从右到左读取奇数行,从左到右读取单词。

所以你需要获得每个奇数行并反转单词的顺序。

如果您有奇数行的字符串:

  1. 在空格上拆分并生成数组
  2. 颠倒单词的字符
  3. 将逆转的顺序称为字符串
  4. 注意:你还应该检查一下,如果单词的末尾有一个点并将其放在开头(因此它会显示在&#34;结束&#34;)。

    &#13;
    &#13;
    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;
    }
    &#13;
    .text-inverse div:nth-child(2n) {
      direction: rtl;
      unicode-bidi: bidi-override;
      white-space: nowrap;
    }
    &#13;
    <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>
    &#13;
    &#13;
    &#13;