pdfviewhelpers icon indicating copy to clipboard operation
pdfviewhelpers copied to clipboard

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

Open medarob opened this issue 1 year ago • 3 comments

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

medarob avatar Aug 23 '22 08:08 medarob

@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.

maechler avatar Aug 23 '22 14:08 maechler

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?

medarob avatar Aug 23 '22 14:08 medarob

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.

maechler avatar Aug 24 '22 16:08 maechler