correctly render HTML Tags inside ListViewHelper items

[medarob]

I use the Listviewhelper to generate a list of elements. The array is created automatically based on the input of an RTE field.
Here the editor can create a <ul>-list with different items and can also style the text, e. g. make it bold, italic.

When I output the List the HTML is not being rendered correctly.

Here is my testcase:

<pdf:list
                    trim="1"
                    removeDoubleWhitespace="1"

                    color="#636364"
                    fontFamily="robotolight"
                    fontSize="9"
                    autoHyphenation="1"
                    lineHeight="1.6"

                    bulletColor="#636364"
                    bulletImageSrc="EXT:my_ext/Resources/Public/Images/Pdfviewhelpers/strich.png"

                    listElements="{0: 'Hello', 1: '<strong>Hello</strong>', 2: '<b>Hello</b>', 3: '<i>Hello</i>', 4: 'Hello <sup>C</sup>'}" />

Ist it possible to render the HTML from the list elements, so that the items will be bold, italic, etc.?

[medarob]

I tried to put the <pdf:list> VH into a <pdf:html> VH but that didn't work either..

<pdf:html>
   <pdf:list ... />
</pdf:html>

When I put HTML Tags inside the HtmlViewHelper then those are repected and rendered correctly into the PDF. It seems that this option, to render HTML tags correctly, needs to be added directly to the ListViewHelper?

[maechler]

Hi @medarob,

The ListViewHelper currently only renders text, but no HTML. If you want to render an HTML list, then you can use the HtmlViewHelper, but just a little differently:

<pdf:html>
  <ul>
    <li>Hello</li>
    <li><strong>Hello strong</strong></li>
  </ul>

  <ul>
    <f:for each="{fruit1: 'apple', fruit2: 'pear', fruit3: 'banana', fruit4: 'cherry'}" as="fruit" key="label">
      <li>{label}: {fruit}</li>
    </f:for> 
  </ul>
</pdf:html>

I hope this helps solving your issue.

[medarob]

I used the HtmlViewHelper before and found that it has limited support to style the list.
That's what I had before:
<pdf:html>{myListWithHtmlTags}</pdf:html>
The content came directly from a TYPO3 RTE field.

But here I couldn't

• change the bulletpoint (it was a dark dot)
• left alignment wasn't possible because the list has an indent

(Maybe I did something wrong and it's possible after all?)

So I converted the <ul> list into an array because I can change these settings with the <pdf:list> ViewHelper but unfortunately noticed that it doesn't support HTML output for the text which the editors style (e. g. <b>, <sup>, <strong>)

[medarob]

I tried it with an HtmlViewHelper and here the HTML tags were not rendered too.
First list is with the <pdf:list> and the 2nd with <pdf:html>:

On both the styles for italic, bold are missing. The <sup> tag seems to work.

Array: {0: 'Hello', 1: '<strong>Hello</strong>', 2: '<b>Hello</b>', 3: '<i>Hello</i>', 4: 'Hello <sup>C</sup>', 5: '&lt;b&gt;Hello&lt;/b&gt;'}

[maechler]

I am not sure what default styles TCPDF applies, but it is possible to change certain styles by applying CSS properties like font-style, list-style-type, margin or padding. Although CSS support is limited, you might be able to achieve what you want.

i {
  font-style: italic;
}

ul { 
  list-style-type: square;
}

ul.with-image {
  // see https://tcpdf.org/files/examples/example_006.phps
  list-style-type: img|png|4|4|images/logo_example.png;
}

The CSS you can provide inside a <style> tag or externally from a file:
https://docs.typo3.org/p/bithost-gmbh/pdfviewhelpers/main/en-us/ViewHelpers/HtmlViewHelper/Index.html

[medarob]

for HTML list only the following works, every other value will fallback to decimal

list-style-type: disc;  // default
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;

I can change font-size and color but not font-weight and font-style. It doesn't matter if I use an external stylesheet or the <style>-tag inside HtmlViewHelper. 🤔

Even <i style="font-style: italic;">Text</i> or <span style="font-style: italic;">Text</i> doesn't work.

[maechler]

Could it be that you are using a special font that does not support italic or bold?

[medarob]

We use the font Roboto.

plugin {
    tx_pdfviewhelpers {
        settings {
            config {
                fonts {
                    addTTFFont {
                        roboto {
                            path = EXT:my_ext/Resources/Public/Fonts/roboto/Roboto-Regular.ttf
                        }
                        robotolight {
                            path = EXT:my_ext/Resources/Public/Fonts/roboto/Roboto-Light.ttf
                        }
                        robotomedium {
                            path = EXT:my_ext/Resources/Public/Fonts/roboto/Roboto-Medium.ttf
                        }

We don't have problems on the website with italic or bold.

[maechler]

I think you needed to add the font styles explicitely like this (notice the i and b):

plugin {
    tx_pdfviewhelpers {
        settings {
            config {
                fonts {
                    addTTFFont {
                        roboto {
                            path = EXT:my_ext/Resources/Public/Fonts/roboto/Roboto.ttf
                        }
                        robotoi {
                            path = EXT:my_ext/Resources/Public/Fonts/roboto/Robotoi.ttf
                        }

                        robotob {
                            path = EXT:my_ext/Resources/Public/Fonts/roboto/Robotob.ttf
                        }
                    }
               }
           }
       }
   }
}

The filename is important here, so you would have to copy and rename the files.