Support for list-style

[Juergen-aus-Zuendorf]

Hi,

apparently the CSS parameters to "list-style" (‘list-style-type’, ‘list-style-position’, ‘list-style-image’) are not transferred. The debug mode (&debughtml=html) brings the correct display in the browser, but the PDF file itself is not affected.

Regards Juergen

[Klap-in]

Mpdf provides unfortunately support for a limited set css features. Please check its manual for if this one is included.

[Juergen-aus-Zuendorf]

Yes, I've checked it: see https://mpdf.github.io/css-stylesheets/supported-css.html

[Klap-in]

Aha, then some debugging is needed to minimize the output from debughtml to the case that shows a just reproduces the issue. You could try it, or I will, but probably not on short term.

[Juergen-aus-Zuendorf]

Ok, thank you!

For simplicity here you can find some data of the following snippet:

unsortiert:
  * Zeile 1
  * Zeile 2

sortiert:
  - Zeile 1
  - Zeile 2

My template contains the following definition:

ul {
  list-style-type: '-';
}

The result as PDF is this: spielplatz.pdf

The debugging mode correctly outputs this HTML content:

<div class="level1">
<p>
unsortiert:
</p>
<ul>
<li class="level1"><div class="li"> Zeile 1</div>
</li>
<li class="level1"><div class="li"> Zeile 2</div>
</li>
</ul>
<p>
sortiert:
</p>
<ol>
<li class="level1"><div class="li"> Zeile 1</div>
</li>
<li class="level1"><div class="li"> Zeile 2</div>
</li>
</ol>

Regards Juergen

[Klap-in]

In default hml/css a string would be an option: list-style-type: '-'; (https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type). But mpdf is bit more limited, so maybe just a string is not supported. Mpdf manual shows also option of using unicode. Could you try that as well? see example below.

I haven't tested yet further.

The help writes:

1 | A | a | I | i | disc | circle | square | decimal | lower-roman | upper-roman | lower-latin | upper-latin | lower-alpha | upper-alpha | none

arabic-indic | bengali | cambodian | cjk-decimal | devanagari | gujarati | gurmukhi | hebrew |kannada | khmer | lao | malayalam | oriya | persian | telugu | thai | urdu | tamil

“1” - decimal

“A” = upper-latin

“a” = lower-latin

“I” = upper-roman

“i” = lower-roman

Custom list-style-type is recognised e.g.: U+263Argb(255,0,0);

where U+263A is the Unicode HEX value of the character you want for the bullet the character MUST be included in the font used for that list item rgb() bit is optional

I interpret that as:

  list-style-type: '1';
  list-style-type: 'A'; etc
  list-style-type: 'disc'; etc

The last line suggests using unicode, where U+002D is for dash, if I looked it up correctly.

list-style-type: 'U+002D';

Or if that rgb should be used(seems optional):

list-style-type: 'U+002Drgb(255,0,0)';

[Klap-in]

A quick look in the source code suggests just a string is probably not supported (it is not easy to read, so I might have miss something).

So please try the unicode approach.

[Juergen-aus-Zuendorf]

Yes, both unicode examples work fine

[Klap-in]

This is fixed?

[Juergen-aus-Zuendorf]

For me, it's ok, thank you