I have a project (a label maker) where I need to define a font-size and then apply in percentage the desired size to text elements.
This is working as expected but when I set font-size to the parent div (containing text, images, barcodes...), all the images get an offset of the font-size in pixels I set.
Since I will generate a PDF, the font-size of my text is stored in my db as an int and will be used as pt (point type). To achieve this, I set my font-size of the parent div to its height and set the font-size of my child elements as a percentage.
Basically I am doing this :
<div id='template' style="font-size: (labelHeight) + px">
<div id='text' style="font-size: {{100*(field.fontSize*0.352778)/field.template.format.height }}%">
<p>My text</p>
</div>
<div>
<img id='myImage'>
</div>
</div>
This is a simplification of my code (the syntax is not correct here but it is just to show you how it works).
I store my field.template.format.height in mm and my fontSize as an int. The 0.352778 value comes from the fact that 1pt = 0.352778mm.
Basically I want my fontSize of my template div to apply only to text elements.
The font-size property specifies the size of the text. If other elements inside the template div are affected by it, is it possible that their size/padding/margin is specified using em units, which are proportional to the font size. I'd suggest using rem units instead because they are proportional to the global font size and therefore unaffected by the changes of the template div's font size.
if the parent div has a font size and it child will inherit it. to fix this problem you should specify it one by one
For example <p style="style ETC"></p>