nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic Text - HTML- Stripped/Allowed tag

PaulCooper

I am trying to put some SVG into a 3.7.2 BIRT report. As BIRT reports output is HTML 4.01 Transistional this can still be valid as long as the SVG's correct namespace is included. This works on most modern browsers. To add it in I am using the dynamic text element set to HTML and then setting the contents to calculate the SVG as required. When I run the report the SVG tags are stripped. Other HTML tags such as surrounding div tags are not stripped.
 
The only way I have been able to get this to work is to convert the SVG to HTML encoded text so it appears as text in the output and have this surrounded by div tags with the class "svg". Then use a script tag containing javascript, that is added to the end of the report, that looks for these div tags and extracts the text and then replaces each div's innerHTML with its text.
 
This works but has the side-effect of the user seeing the raw SVG appear in the report (particularly if it is a long and hence slow report) until it gets the bottom to the above mentioned script for this SVG text to change into the actual SVG. Due to this side-effect I would rather not do it this way so I am looking for a better solution.
 
I assume the BIRT Report Engine sanitises the HTML using a list of allowed HTML tags and strips any that are not this list; and it does this for security reasons.
 
Is there any way to stop the SVG tags from being stripped? If my assumption of the list is correct is there anyway to modify this list?
 
Paul Cooper

Find more posts tagged with

Comments

JFreeman

TidyHTML is used to clean/sanitize the HTML text in elements and I believe this issue may be happening due to the version of Tidy that is being utilized.
 
You could try building a new version of Tidy and replacing the existing tidy.jar with the new version.
 
Alternatively, you can use javascript to create the desired SVG items and then append them to your desired element within the text item. As I quick test I as able to get an SVG item and canvas to display in 3.7.2 through a text item by using javascript:
<pre class="_prettyXprint _lang-js">
<div id="wrapperDiv">
</div>

<script>
var wrapDiv = document.getElementById("wrapperDiv");
var newSvg = document.createElement('svg');
var newCanvas = document.createElement('canvas');

newCanvas.width = 20;
newCanvas.height = 15;

var ctx = newCanvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,20,15);

newSvg.appendChild(newCanvas);
wrapDiv.appendChild(newSvg);
</script>
</pre>

PaulCooper

Thanks Jesse,
 
I will check out your idea of updating the TidyHTML version.
 
I am already using Javascript to produce the SVG though in a slightly different way which is actually built via nested templates that are stored in a properties file and that constructs the whole SVG as text. Hence why I was hoping to use HTML formating on the text field so the SVG could just be dropped in. As my javascript that does the text-to-svg conversion is at the end of the page, my approach means I get the side-effect I mentioned of it appearing as text until the page finishes loading.
 
Because of the nested template concept re-writing that as direct JS + DOM based building of the SVG like your example would be a nightmare. Writing code that could convert the SVG text output of my template system into JS + DOM code for inserting as a script element would be technically possible but overkill.
 
Also I didn't want to put JS on every one of these text elements as there could be hundreds but maybe instead I could minimise the amount of JS by putting the text-to-svg conversion code at the top with it re-written as a function which does a single div only and then put minimal JS on these text elements that would just call the function with the appropriate div name. I will give this a try if the TidyHTML update idea doesn't work.
 
Of course the TidyHTML update idea could be better for another reason: the text-to-svg conversion method I currently use or your script element in each text element method both use client side JS and therefore isn't supported by other export emitters such as PDF. Not that I am 100% sure HTML formatted text elements is fully supported by the PDF emitter anyway even if SVG is supported in PDFs.
 
Regards,
 
Paul Cooper

JFreeman

Thanks for the additional details.
 
Let me know the results if you end up updating the TidyHTML version.
 
Regarding the JS alternative, I think method of placing the text-to-svg code into a function that is then called from the needed elements is probably going to be the best bet for a workaround.