Resizing font size to match container

[besplash]

I am trying to resize the title text of the report to match a container. The project name might exceed the size of the container with the default font size, therefore I need to change the font size depending on the amount of text that fills the box. It should be possible using the clamp() css function, but it doesn't seem to be supported. Is there any other way I can accomplish this in sysreptor?

[MWedl]

clamp() is defined in CSS Values and Units Module Level 4 which is not yet supported by weasyprint (HTML+CSS to PDF rendering library). vw units, which can also be used for dynamic font sizes, are also not supported.

However, it is possible to achieve dynamic text widths by embedding an inline SVG. The results are not as good as with native CSS features, but AFAIK this is the only working solution.

<div class="page-cover-title">
    <svg viewBox="0 0 1000 120" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text y="70%" textLength="1000" lengthAdjust="spacingAndGlyphs" font-size="100" font-weight="900" >
                {{ report.title }}
            </text>
        </g>
    </svg>
</div>

[besplash]

I tried it in a similar way but didn't see any text printed on screen, I assume foreignobjects are not supported either? I wanted to keep the h1 tags for the title. Your example works, but doesn't allow me to add all properties just yet. Also, if there is any other way to contact you for this kind of support instead of github issues, please let me know

[MWedl]

I tried it in a similar way but didn't see any text printed on screen, I assume foreignobjects are not supported either?

SVG support in weasyprint is quite limited and many features are not implemented yet.

I wanted to keep the h1 tags for the title. Your example works, but doesn't allow me to add all properties just yet.

What properties do you want to add? IMO the SVG text centering is a hacky workaround to compensate for missing CSS features.

[besplash]

I ended up scrapping it for now. After fiddling around with SVG, the best I got was a very whacky resizing. What I was going for is a fixed size for the project title with text above and below. If the project name is too long, I needed it to get smaller in font size. Using SVG, all I could do is always fill out the entire text area and I could not really work around that. If the name was "ABC" it would be gigantic. It's fine though.