search

dompdf / dompdf

HTML to PDF converter for PHP
https://dompdf.github.io/
GNU Lesser General Public License v2.1
10.5k stars 1.79k forks source link

Unordered lists nested within ordered lists force the remaining ordered list items to use bullets #3440

Open superheroben opened 6 months ago

superheroben commented 6 months ago

Having an issue that whenever an ordered list has a sub unordered list its any of the following ordered list items are no longer numbered but are presented as bullets

example

Here is the HTML that was provided to DOMPDF:

<ol>
   <li>Make sure you're prepared to safely make observations during the eclipse. Never look directly at the Sun without specialized eclipse viewing glasses. Do not point any viewing devices or cameras at the Sun without specially made protective solar film securely attached over the lenses.</li>
   <li>Prepare your materials at least two hours before the eclipse reaches its peak in your area.</li>
      <ul>
          <li><span>Download the&nbsp;</span><a href="https://observer.globe.gov/about/get-the-app" target="_blank"><b>GLOBE Observer app</b></a><span>&nbsp;on your smartphone.</span></li>
          <li><span>Familiarize yourself with the types of data to record, and how to take recordings:&nbsp;</span><a href="https://observer.globe.gov/do-globe-observer/eclipse/taking-observations" target="_blank">https://observer.globe.gov/do-globe-observer/eclipse/taking-observations</a></li>
          <li>Optional: assemble a team! This project will involve taking many data recordings over a span of four hours. Having a team of fellow citizen scientists will make it much easier to collect data.</li>
      </ul>
   <li>Start taking observations two hours before the eclipse reaches its peak, and continue making observations for two hours afterward.</li>
      <ul>
          <li>Cloud type and cover: Record the types of clouds and the overall level of cloud cover every 15-30 minutes.</li>
          <li>Air temperature: Record the air temperature every 10 minutes. Be sure to take your recordings in a shaded area.</li>
      </ul>
   <li>Submit your data!</li>
</ol>
superheroben commented 6 months ago

Sorry that image should say "Should be 3 and 4"....Not enough coffee today

bsweeney commented 6 months ago

Indentation is all wonky as well. Seems to be an issue starting with the 2.0.0 release. The 1.2.2 release renders this correctly.

Reviewing the DOM after document ingestion it looks like the rendering difference is caused by the HTML5 parser. It's attempting to clean up the HTML since the document structure is not strictly valid. Your nested lists should be within an LI since LI elements are the only allowed children of OL/UL elements, per the spec.

The following renders as expected:

<ol>
   <li>Make sure you're prepared to safely make observations during the eclipse. Never look directly at the Sun without specialized eclipse viewing glasses. Do not point any viewing devices or cameras at the Sun without specially made protective solar film securely attached over the lenses.</li>
   <li>Prepare your materials at least two hours before the eclipse reaches its peak in your area.
      <ul>
          <li><span>Download the&nbsp;</span><a href="https://observer.globe.gov/about/get-the-app" target="_blank"><b>GLOBE Observer app</b></a><span>&nbsp;on your smartphone.</span></li>
          <li><span>Familiarize yourself with the types of data to record, and how to take recordings:&nbsp;</span><a href="https://observer.globe.gov/do-globe-observer/eclipse/taking-observations" target="_blank">https://observer.globe.gov/do-globe-observer/eclipse/taking-observations</a></li>
          <li>Optional: assemble a team! This project will involve taking many data recordings over a span of four hours. Having a team of fellow citizen scientists will make it much easier to collect data.</li>
      </ul>
      </li>
   <li>Start taking observations two hours before the eclipse reaches its peak, and continue making observations for two hours afterward.
      <ul>
          <li>Cloud type and cover: Record the types of clouds and the overall level of cloud cover every 15-30 minutes.</li>
          <li>Air temperature: Record the air temperature every 10 minutes. Be sure to take your recordings in a shaded area.</li>
      </ul>
      </li>
   <li>Submit your data!</li>
</ol>

This is probably a common enough scenario it's worth further review for improved handling.

superheroben commented 6 months ago

Ok that makes sense. That HTML comes from a wisiwig somewhere. I might just write a function to look for incorrectly nested elements and correct them.

Thanks for your response.

On April 17, 2024 at 2:24:22 PM, Brian Sweeney @.***) wrote:

Indentation is all wonky as well. Seems to be an issue starting with the 2.0.0 release. The 1.2.2 release renders this correctly.

Reviewing the DOM after document ingestion it looks like the rendering difference is caused by the HTML5 parser. It's attempting to clean up the HTML since the document structure is not strictly valid. Your nested lists should be within an LI since LI elements are the only allowed children of OL/UL elements, per the spec.

The following renders as expected:

  1. Make sure you're prepared to safely make observations during the eclipse. Never look directly at the Sun without specialized eclipse viewing glasses. Do not point any viewing devices or cameras at the Sun without specially made protective solar film securely attached over the lenses.
  2. Prepare your materials at least two hours before the eclipse reaches its peak in your area.
  3. Start taking observations two hours before the eclipse reaches its peak, and continue making observations for two hours afterward.
    • Cloud type and cover: Record the types of clouds and the overall level of cloud cover every 15-30 minutes.
    • Air temperature: Record the air temperature every 10 minutes. Be sure to take your recordings in a shaded area.
  4. Submit your data!

This is probably a common enough scenario it's worth further review for improved handling.

— Reply to this email directly, view it on GitHub https://github.com/dompdf/dompdf/issues/3440#issuecomment-2061940417, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABSZLR4ZDLQKHRO5GC2HKDY5245NAVCNFSM6AAAAABGLYIZU6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRRHE2DANBRG4 . You are receiving this because you authored the thread.Message ID: @.***>