镜像文本段落的每隔一行（boustropedon）

Question

每当我们读一行并读到结尾时，我们的眼睛就必须暂停并跳到下一行的开头。 如果我们在正常和水平镜像之间交替书写方向，我们就可以在每行末尾继续阅读。请参阅示例。 这被称为 boustropedon (wiki)。

我想像这样以交替的阅读方向显示网站的文本段落。 只要我们不必手动复制内容，如何实现这一点并不重要。

我知道我可以使用 CSS 来镜像整个段落，或者仅将此镜像应用于每隔一个子节点：

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

我知道可以使用 JavaScript 定位奇数行或偶数行来更改其显示颜色。 遗憾的是只是添加 'spans[i].style.transform = "scaleX(-1)";' Tim M 给出的示例（https://jsfiddle.net/Fptq2/2/，第 21 行之后）没有显示任何效果。

编辑：如何镜像 html 文档中文本段落的每隔一行？

Answer 1

下面的代码片段应该是您正在寻找的。我反转了

scaleX

和

scaleY

以获得所需的文本结果。

然后我将内容与 Flexbox

justify-content: center

和

align-items: center

对齐。确保内容使用

text-align: center

也是关键。

.bostrophedon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boustrophedon p {
  text-align: center;
}

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

<div class="boustrophedon">
  <p>Bocconcini camembert de normandie roquefort cottage cheese chalk.</p>
  <p>Bocconcini camembert de normandie roquefort cottage cheese chalk.</p>
  <p>Bocconcini camembert de normandie roquefort cottage cheese chalk.</p>
  <p>Bocconcini camembert de normandie roquefort cottage cheese chalk.</p>
  <p>Bocconcini camembert de normandie roquefort cottage cheese chalk.</p>
</div>