bithost-gmbh / pdfviewhelpers

TYPO3 CMS extension that provides various Fluid ViewHelpers to generate PDF documents.
GNU General Public License v3.0
44 stars 21 forks source link

<style> tag not possible in <pdf:html> #207

Closed medarob closed 1 year ago

medarob commented 2 years ago

Describe the bug According to the documention it should be possible to add a <style> .. </style> tag with some custom CSS directly in the template file: https://docs.typo3.org/p/bithost-gmbh/pdfviewhelpers/main/en-us/ViewHelpers/HtmlViewHelper/Index.html

However, In my example adding a custom <style> tag breaks the output of the PDF.

Environment TYPO3 version(s): 10.4.30 pdfviewhelpers version: 2.4.1

Steps to reproduce

PDF Template

        <pdf:multiColumn>
            <pdf:column>
                <pdf:html styleSheet="/typo3conf/ext/my_ext/Resources/Public/CSS/pdf.css" autoHyphenation="1" padding="{right: 10}">
                    <style>
                        h1 {
                            color: #ff642c;
                        }
                    </style>
                    <span class="test">
                        {newsItem.txMyContent}
                    </span>
                </pdf:html>
            </pdf:column>

The FE output (PDF) shows only the text {newsItem.txMyContent} and not the content. When I remove the <style>..</style> tag the correct output appears again, not just the variable as text.

This is regardless of the usage of the styleSheet attribute.

Expected behavior The PDF Ouput shouldn't break.

Possible solution

maechler commented 2 years ago

@medarob I could not test this yet, but it sounds like it could be a Fluid parsing issue. If it works for you, you could just remove the <style> tag and move your styles to the pdf.css file.

Another way to solve this could probably be to wrap the styles with <![CDATA[ ... ]]>, e.g.

<pdf:html styleSheet="/typo3conf/ext/my_ext/Resources/Public/CSS/pdf.css" autoHyphenation="1" padding="{right: 10}">
    <style>
        <![CDATA[
            h1 {
                color: #ff642c;
            }
        ]]>
    </style>
    <span class="test">
        {newsItem.txMyContent}
    </span>
</pdf:html>

Please also see https://docs.typo3.org/m/typo3/guide-extbasefluid/main/en-us/Fluid/ThingsToKnow/JsAndInline.html

Please let me know if this solves the issue. I will have to further test it and maybe add this to the documentation.

medarob commented 2 years ago

With <![CDATA[ ... ]]> there is no error anymore but the style to change the color does not work. Moving the style to the css file works.

I furthermore noticed, not everything works. I'm still having trouble to add padding/margin to an ul li element via custom CSS so that I can move the list elements to the left. Changing the font-size and color works, though. But maybe that's a limitation of the PDF library?

maechler commented 2 years ago

In fact padding and margin should be supported by TCPDF. However HTML support is rather limited in general, so it might well be that you are hitting a limitation there.