如何在HTML / CSS中呈现FORTRAN样式的叠印？

2023年11月28日 209次阅读

In FORTRAN,可以请求在前一行上打印一行.当在传统行式打印机上打印时,该机制可以用于许多目的,例如模仿打印机的字符集中不存在的字符,例如,打印机. / over = for≠,用于ASCII艺术的灰度阴影.

什么是最有效和最可靠的方式来表示一行应该叠加HTML / CSS中的前一行,理想情况下是一个自定义标签,它将“回车”为< br>是“换行”？显然,这将仅在< pre>内使用.标签.

更新：在< pre>内将叠印的行标记为“行高：0”.标签结果在inconsistent line spacing.

CSS：

div { line-height: 0; }

HTML：

<pre><div>XXXX<br>----<br>||||</div><br>XXXX<br>YYYY</pre>

(之前在RetroComputing中询问过,发送到这里.)

最佳答案
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应该等于’line-height’. “1em”指的是’font-size’,默认情况下略低于必要值. line-height属性本身就是神奇的,因为它允许具有特殊含义的无单位值,而对于margin属性,无单位值意味着“像素”.

点赞