mirroring every second line of text paragraphs (boustrophedon)

Issue

Every time we read a line and come to its end our eyes have to pause and jump to the start of the next line. If we alternate the direction of writing between normal and horizontally mirrored we can just continue reading at the end of each line. See example here (imgur). This is called boustrophedon (wiki).

I want to display text paragraphs of websites with alternating reading directions like this. How this is achieved is not important as long as we don't have to manually copy things.

I know I can use CSS to mirror the whole paragraph or to apply this mirroring only to every second child node:

p {
  transform: scaleX(-1);
}
// or
:nth-child(even) {
  transform: scaleX(-1);
}

and I know it is possible to use JavaScript to target odd or even lines to change their display color. Sadly just adding 'spans[i].style.transform = "scaleX(-1)";' to the example given by Tim M. (https://jsfiddle.net/Fptq2/2/, after line 21) did not show any effect.

Edit: How can I mirror every second line of text paragraphs in html documents?

Solution

The below snippet allows for you to dynamically target every second line inside a block of text. Here are the logical steps of accomplishing this:

1. Wrap each word in a <span> tag.
2. Remove old paragraph text and add in <span> tags.
3. Determine what <span> tags are on individual lines.
4. Create a <p> tag for each line and add each line's <span> tag inside.
5. Add these <p> tags back to the <div>.

I inverted both the scaleX and scaleY to get the desired text result.

Ensuring the content uses text-align: center is also key.

document.addEventListener("DOMContentLoaded", function() {
  wrapWordsInSpan("boustrophedon");
  wrapLinesInP("boustrophedon");
});

function wrapWordsInSpan(divId) {
  var div = document.getElementById(divId);
  var words = div.innerText.split(/\s+/);
  div.innerHTML = "";

  words.forEach(function(word) {
    var span = document.createElement("span");
    span.textContent = word + " ";
    div.appendChild(span);
  });
}

function wrapLinesInP(divId) {
  var div = document.getElementById(divId);
  var spans = div.getElementsByTagName("span");
  var lines = {};

  for (var i = 0; i < spans.length; i++) {
    var span = spans[i];
    var offsetTop = span.offsetTop;

    if (!lines[offsetTop]) {
      lines[offsetTop] = [];
    }

    lines[offsetTop].push(span);
  }

  for (var line in lines) {
    var p = document.createElement("p");
    lines[line].forEach(function(span) {
      p.appendChild(span);
    });
    div.appendChild(p);
  }
}

#boustrophedon p {
  text-align: center;
}

#boustrophedon p:nth-child(even) {
  transform: scaleY(-1);
  transform: scaleX(-1);
}

<div id="boustrophedon">
  Cheese on toast port-salut manchego. Cheesy grin taleggio cheddar who moved my cheese bocconcini who moved my cheese goat st. agur blue cheese. Bocconcini cottage cheese cheesecake fromage frais edam cut the cheese croque monsieur cheese and wine. Red
  leicester cheese triangles chalk and cheese queso mascarpone cauliflower cheese airedale cheese triangles. Cheeseburger. Parmesan swiss red leicester. Smelly cheese pecorino brie manchego airedale monterey jack stilton camembert de normandie. Smelly
  cheese smelly cheese cheese on toast edam cheese and biscuits melted cheese taleggio edam. Cottage cheese. Cut the cheese cut the cheese croque monsieur. Monterey jack smelly cheese pepper jack cheeseburger cheese and wine cottage cheese pepper jack
  lancashire. Pepper jack emmental rubber cheese cheesy grin stinking bishop port-salut airedale dolcelatte. Melted cheese pecorino jarlsberg swiss roquefort paneer cow cheesy feet. When the cheese comes out everybody's happy st. agur blue cheese jarlsberg
  babybel.
</div>

Answered By - Nick Friesen