Consider a FORTRAN program

    РRINТ 1

(YMMV re the number of leading spaces to align Xes with "GOOD BYE")

Its output, using the SIMH convention of denoting overprinting with the carriage return character, is


My question is, how to convert it efficiently and reliably to HTML to display as intended?

Searching for "HTML overprint" yields irrelevant results or examples of very fancy overprinting using individual CSS specifications for each letter; obviously not what I want. Adding "fortran" yields descriptions of how to achieve overprinting in FORTRAN, not how to render the result in HTML.

  • 2
    I'm not sure whether any question containing "HTML" would qualify as a valid question for this site. – tofro Jan 10 '17 at 9:39
  • 1
    This is clearly a question about HTML and can be shortened to simply "how to overprint in HTML". The asker's goal of displaying Fortran output is incidental. That said, individual CSS may be the only option here. I don't think this type of overprinting was ever anticipated in HTML. – Ken Gober Jan 10 '17 at 13:44
  • 1
    Your FORTRAN source appears to be mostly UTF-8 characters; for example the O in FORMAT is really О, U+041E, Cyrillic Capital Letter O. – scruss Jan 10 '17 at 14:14
  • 2
    You'd probably get a more useful response on SO than here. – Dave Tweed Jan 10 '17 at 15:00
  • 1
    This is really a somewhat tricky HTML question (there are ways to position things atop other things, but I can't seem to get reliable positioning), so I'd really suggest asking on Stackoverflow in a more generic form ("How to overlap lines of code in HTML"). – dirkt Jan 12 '17 at 6:47

FORTRAN carriage-control from record-based IO on legacy systems can be quite challenging on modern octet-stream systems. If SIMH is using CRs and BSs to format output, the traditional way of cleaning up the stream is to use col -b as a filter to merge the control characters.

Update: Okay, so this is a question about HTML overprinting, for which there seems to be no acceptable cross-platform solution, and any answer to that would be well out of scope for RCSE. Here's an SVG-based possible solution:

(fail-safe image: overstrike)

This was made with:

echo -e 'GOOD BYE HELLO WORLD\rXXXX XXX' | enscript -B -o hello.ps
ps2eps --ignoreBB -l hello.ps
epstopdf hello.eps
pdf2svg hello.pdf hello.svg
  • I don't want to "clean up" the stream. I want to render it as intended. enscript is able to do it in PostScript, but its HTML output is as bad as col -b. – Leo B. Jan 10 '17 at 16:20
  • I must be misunderstanding what you want: I'm suggesting col -b as a precursor to enclosing the output in <pre> ... </pre> for HTML. Did you want the overwritten characters to be kept somehow? There's no support for overprinting in HTML, so you may have to filter through enscript, render the output as an image, and include that. – scruss Jan 10 '17 at 16:47
  • 1
    -- Did you want the overwritten characters to be kept somehow? -- Of course, that's the point. -- There's no support for overprinting in HTML -- Naturally, not in the bare HTML, but there should be a way to do that in HTML/CSS. An "obvious" solution proposed on SO results in wrong line spacing – Leo B. Jan 10 '17 at 17:22
  • There doesn't seem to be a way:<div> is a block level element, so you're always likely to get padding and margins inherited and have to apply various browser-specific fixes. This is not really what HTML is for. I'll update my answer with an SVG route that at least will render on most modern browsers. – scruss Jan 10 '17 at 19:10
  • I would think that there should be a way to define two new tags in CSS (a custom "pre" and a custom "div") with the appropriate control of line padding and margins. Unfortunately, on SO if a question isn't answered to the author's satisfaction in the first few minutes, it gets buried and the chance to get the correct answer becomes slim. – Leo B. Jan 10 '17 at 19:56

Experimenting with CSS along the lines (pun intended) of "line-height:0" yielded this satisfactory result

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

<div class="over">GOOD BYE

Things are slightly trickier: the default line height is "roughly" 1.2em, so 0.6 and -0.6, or 50% and -50% of the current line height, will be likely better; however, line height may vary depending on the browser and the font, so the universal solution is still elusive.

  • 2
    The effect can be enhanced by using a semi-transparent color for the text (e.g. rgba(0,63,0,0.4)) so that overprinting the same text multiple times will make it appear darker than showing it once. – supercat Jan 12 '17 at 7:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.