problem

The realisation of TRANSLATE-1130 is currently not possible. The problem is that the font delivered by translate5 which is used to generate the PNG image tags does not support all unicode characters, so most of the symbols used to replace CR / LF / spaces and tabs are not available in the img tags when editing a segment.

Also the loading of the images produces at least cache requests. Also the imgs must be generated on the serverside.

solution

A elegant solution would be to use SVG XML as inline src data attribute in the IMG tags. So there would be no need to generate the PNGs at all - and we would be free then in choosing the characters to be drawn. This must be evaluated. According to a fast internet recherche this is possible in IE. In safari a fast test was not working.

additional advantages

• No automatic PNG image creation anymore
• More flexibility in styling (color, form) the internal tags
• Special content of the tags can be displayed
• No server requests for the images anymore

implementation

• When opening a segment all internal tags are converted from div/span to img tags.
• At that place the img tags get a SVG data source containing all the tag information
• Cleanup of the old PNG creating code and removing the unneeded PNGs and related stuff

browsers

Alle needed Browsers are tested with the crossbrowser account, and it is working.

Knowledge Sources

• http://fiddle.jshell.net/YbA39/266/
• https://stackoverflow.com/questions/10768451/inline-svg-in-css
• https://css-tricks.com/lodge/svg/09-svg-data-uris/
• https://css-tricks.com/probably-dont-base64-svg/