NetSuite List Styling Advanced PDF/HTML templates

Traditional HTML lists are rendered as decimals, using BFO gives us marker-type and marker-hierarchy which enables a hierarchical sublist with cascading numbering sequences. Paste this HTML and CSS in your Advanced PDF/HTML Template as inspiration for your next list within NetSuite.

by rport

HTML

<script src="http://bfo.com/products/pdf/"></script>
<!-- Traditional HTML lists are rendered as decimals, using BFO      -->
<!-- gives us marker-type and marker-hierarchy which enables a       -->
<!-- hierarchical sublist with cascading numbering sequences.        -->
<!-- Paste this HTML and CSS in your Advanced PDF/HTML Template as   -->
<!-- inspiration for your next list within NetSuite.                 -->

<ol marker-type="decimal" marker-prefix="" marker-suffix="" marker-hierarchy="true">
  <li><strong>HEADING</strong>
  <ol marker-type="decimal" marker-prefix="" marker-suffix="" marker-hierarchy="true">
    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li> Pellentesque quis velit consequat nisl venenatis molestie.</li>
    <li> Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.
     <ol marker-type="lower-alpha" marker-prefix="" marker-suffix="" marker-hierarchy="false">
       <li> Ut imperdiet quam at elementum vehicula.
       <ol marker-type="lower-roman" marker-prefix="" marker-suffix="" marker-hierarchy="false">
         <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         <li> Duis in dui lacinia, consequat leo sit amet, laoreet augue.</li>
         <li> Cras et neque et diam dictum maximus.</li>
        </ol>
       </li>
       <li> Duis id leo pharetra, accumsan ex vitae, consequat purus.</li>
       <li> Nunc fringilla sapien dictum lacus euismod rutrum.</li>
     </ol>
    </li>
    <li> Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.</li>
 </ol>
 </li>
  <li><strong>HEADING 1</strong>
  <ol marker-type="decimal" marker-prefix="" marker-suffix="" marker-hierarchy="true">
    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li> Pellentesque quis velit consequat nisl venenatis molestie.</li>
    <li> Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.
     <ol marker-type="lower-alpha" marker-prefix="" marker-suffix=""...

CSS

ol {
  margin: 1em 0 0 1.5em;
  padding: -1em 0 0 0;
  }
li {
  margin: 0 0 0 1em;
  padding: 0 0 0 0;
  }