0

Всем привет. Хотел бы спросить у знатоков, может быть кто делал подобное: как сделать смену направления текста с каждой новой строки. Полувизуальный пример:
текст слева-направо
текст справа-налево
текст слева-направо
текст справа-налево.. и т.д.

Перенос - не абзац (<br>), а обычный word-wrap. Я так понимаю, меня интересует смена значений с ltr на rtl и наоборот каждую новую строку.

В примере ниже я сделал это при помощи параграфов и ксса. В моём случае мне нужно, чтобы текст переносился после word-wrap и будучи исключительно в одном параграфе, диве и т.д.

.ltr {
  direction: ltr;
  }
.rtl {
  direction: rtl;
  }
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>
<p class="ltr">Some text ltr</p>
<p class="rtl">ltr txet emoS</p>

6
  • Какое практическое применение этому? Мне кажется что без оборачивания каждой строки в тег не обойдетесь. 3 ноя 2016 в 10:21
  • Блин, хреново. Да вот делаю сайт, хотят чтобы текст читался именно так, обосновывая это тем, что он так лучше воспринимается
    – Blacksky
    3 ноя 2016 в 10:26
  • 2
    Хм. Странное дело. Тысячелетиями текст нормально воспринимался с одним направлением, а тут, внезапно, лучше будет восприниматься если каждая строка по-своему :\ Кстати в вашем примере не понятно как именно вы хотите сделать. Должно меняться выравнивание или порядок букв должен меняться или и то и другое? 3 ноя 2016 в 10:29
  • Психологи видят иначе. Насколько я понял, меня интересует смена значения ltr на rtl и наоборот каждую новую строчку.
    – Blacksky
    3 ноя 2016 в 11:17
  • как это в итоге должно выглядеть? текст слева-направо в примере ничем не отличается от текст справа-налево
    – Grundy
    3 ноя 2016 в 11:30

1 ответ 1

1

Можно сделать как-то так (по идее, можно ускорить, прикидывая, сколько слов влезет в строку и добавляя сразу несколько):

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('.weird-word-wrapping'), wrap);
  console.timeEnd('wrapAll()');
}

wrapAll();
window.onresize = wrapAll;
.weird-word-wrapping div:nth-child(2n) {
  direction: rtl;
  unicode-bidi: bidi-override;
  white-space: nowrap;
}
<div class="weird-word-wrapping">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</div>

Без ручного переноса, насколько я понимаю, сделать не выйдет.

1
  • Это просто невероятно! Большое спасибо за помощь!!!
    – Blacksky
    3 ноя 2016 в 12:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.