ietf-tools / xml2rfc

Generate RFCs and IETF drafts from document source in XML according to the IETF xml2rfc v2 and v3 vocabularies
https://ietf-tools.github.io/xml2rfc/
BSD 3-Clause "New" or "Revised" License
68 stars 38 forks source link

Bad HTML rendering of sub-indented list item #1065

Open jgscudder opened 9 months ago

jgscudder commented 9 months ago

Describe the issue

When viewing https://www.ietf.org/archive/id/draft-ietf-rift-rift-19.html#name-floodstate-structure-per-ad, the second list item under "try_to_transmit_tie(TIE):" renders weird in Safari (Version 17.2 (17617.1.17.11.11, 17617) on my Mac, also Safari on my iPad). Image attached. Warren says it renders fine in his non-Safari browser (unspecified, maybe Chrome, but he says the version string is Version 120.0.6099.109 (Official Build) (arm64)...). But interestingly, even his "fine" rendering differs from the ASCII rendering.

The ASCII rendering looks like,

try_to_transmit_tie(TIE): A. if not is_flood_filtered(TIE) then

      1.  remove TIE from TIES_RTX if present

      2.  if TIE" with same key is found on TIES_ACK then

          a.  if TIE" is same or newer than TIE do nothing else

The "good" HTML rendering looks like,

try_to_transmit_tie(TIE): A. if not is_flood_filtered(TIE) then

  B. 1.  remove TIE from TIES_RTX if present

      2.  if TIE" with same key is found on TIES_ACK then

          a.  if TIE" is same or newer than TIE do nothing else

Note the "B" which is not present in the ASCII.

The "bad" HTML rendering looks like the good one, but the "B" and the "1" are overprinted on top of one another, at the indent level of the "1".

Screenshots of the different renderings are attached. image_from_ios_720 image_720 image_from_ios_720

Code of Conduct

kesara commented 9 months ago

I can reproduce this on Safari Version 17.2.1 under macOS.

kesara commented 9 months ago

Looks like the li marker is moving with the nested ol in safari when there's are no text. Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Numbered List Example</title>
</head>
<body>

    <h1>Numbered List Example</h1>

    <p>This is a simple HTML page with a numbered list:</p>
    <ol start="1" type="A">
        <li>Item 1</li>
        <li>
          <ol style="margin-left: 1em" start="1" type="1">
            <li>Item x</li>
            <li>Item y</li>
          </ol>
        </li>
        <li>
          Item 3
          <ol style="margin-left: 1em" start="1" type="1">
            <li>Item p</li>
            <li>Item q</li>
          </ol>
    </ol>
</body>
</html>

Safari 17.2.1:

Screenshot 2023-12-21 at 10 17 39

Firefox 120.0:

Screenshot 2023-12-21 at 10 17 48

Google Chrome 120.0:

Screenshot 2023-12-21 at 10 17 46
larseggert commented 9 months ago

It's not just an HTML rendering issue between browsers though. Note that the ASCII rendering is missing B. entirely.

kesara commented 9 months ago

It's not just an HTML rendering issue between browsers though. Note that the ASCII rendering is missing B. entirely.

@larseggert I created a new issue for the text bug since it will require a separate fix.