html - 如何在 HTML/CSS 中呈现 FORTRAN 风格的套印？

Question

In FORTRAN , 可以请求在上一行之上打印一行。在传统行式打印机上打印时，此机制可用于多种用途，例如模仿打印机字符集中不存在的字符，例如/over = for ≠，为 ASCII 艺术进行灰度着色。

什么是最有效和可靠的方式来表达一行应该在 HTML/CSS 中叠印前一行，理想情况下是一个自定义标签，它是“回车”，因为
是“换行”？显然，这将仅在

 标记内使用。
更新:在 
 标签内将叠印行标记为“行高:0”会导致 inconsistent line spacing .
CSS:
 
div { line-height: 0; }
HTML:
 
<pre><div>XXXX<br>----<br>||||</div><br>XXXX<br>YYYY</pre> 
(以前在 RetroComputing 中问过，发在这里。)
			            

Answer 1

The best I've got so far是CSS:

.over {
    line-height: 0;
    margin-top: 0.5em;
    margin-bottom: -0.5em;
}

HTML:

<pre>
FIRST LINE
PREVIOUS LINE
<div class="over">GOOD BYE
XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE
</pre>

然而，这很接近，但仍然没有雪茄(0.6em 和 -0.6em 看起来稍微好一点 because the default value of line-height is not 1 but "roughly 1.2" )。正确的方法是用标签标记每个叠印行

.over { margin-top: -MAGIC; margin-bottom: -MAGIC; }

在 HTML 中

<pre>FIRST LINE
PREVIOUS LINE
GOOD BYE
<div class=over>XXXX XXX HELLO WORLD</div>
NEXT LINE
LAST LINE</pre>

其中 MAGIC 应等于“行高”。 “1em”指的是“字体大小”，默认情况下略小于必要的大小。 line-height 属性本身就很神奇，因为它允许具有特殊含义的无单位值，而对于 margin 属性，无单位值意味着“像素”。