每次我们读完一行,我们的眼睛就不得不停下来,跳到下一行的开头. 如果我们在正常和水平镜像之间切换书写方向,我们就可以在每一行的末尾继续阅读.请参见示例here (imgur). 这就是所谓的boustrophedon (wiki).

我想显示文本段落的网站与交替阅读方向这样. 如何实现这一点并不重要,只要我们不需要手动复制.

我知道我可以使用css来镜像整个段落,或者只将此镜像应用于每隔一个子 node :

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

而且我知道可以使用target odd or even lines to change their display color的Java脚本. 遗憾的是,仅在Tim M.(https://jsfiddle.net/Fptq2/2/,第21行之后)给出的示例中添加‘spans[i].style="scaleX(-1)";’并没有显示出任何效果.

编辑:如何在html文档中镜像文本段落的第二行?

推荐答案

下面的代码片段允许您动态地定位文本块内的每隔一行.以下是实现这一目标的合乎逻辑的步骤:

  1. 将每个单词放在<span>个标签中.
  2. 删除旧的段落文本并添加<span>个标签.
  3. 确定每一行上有哪些<span>个标记.
  4. 为每行创建一个<p>标记,并在其中添加每行的<span>标记.
  5. 将这<p>个标签加回<div>.

我把scaleXscaleY都取反了,以获得所需的文本结果.

确保内容使用率达到text-align: center也是关键.

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>

Javascript相关问答推荐

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

如何访问Json返回的ASP.NET Core 6中的导航图像属性

单击更新页面的按钮后,页面刷新;测试/断言超时,有两个标题,但没有一个标题

zoom svg以适应圆

MongoDB中的引用

为什么这个JS模块在TypeScript中使用默认属性导入?""

colored颜色 检测JS,平均图像 colored颜色 检测JS

当运行d3示例代码时,没有显示任何内容

保持物品顺序的可变大小物品分配到平衡组的算法

如何迭代叔父元素的子HTML元素

如何修复我的数据表,以使stateSave正常工作?

使用getBorbingClientRect()更改绝对元素位置

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

为什么我的Navbar.css没有显示在本地主机页面上?

如何压缩图像并将其编码为文本?

为什么我的SoupRequest";被重置为初始值,以及如何修复它?

表单数据中未定义的数组键

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

使用props 将VUE 3组件导入JS文件

为什么我的InDesign Java脚本不能完全工作?