Add option to make Site Title stretch and have its font size adjusted automatically

[beafialho]

It would be great to be able to make site titles like the one in this website’s footer to be full width no matter if it’s just one word or a sentence. I’ve seen this a lot in footers and headers.

Perhaps a toggle in the editor that said “make site title full width” and it would automatically scale to its biggest size. We could start with just this block and perhaps extend this feature to others (such as headings).

This would be a nice detail to build themes and websites without having to add any additional code.

cc: @iamtakashi @henriqueiamarino

[carolinan]

I find this description confusing, because the site title already has a full width alignment option. Can you please update it? I believe you meant that the title should "stretch" and have its font-size adjusted automatically.

[carolinan]

Sort of like the cover block has an option to "toggle full height":

[beafialho]

Thank you @carolinan, I updated the title!

[carolinan]

Thank you

[scruffian]

I looked into this. The challenge is to be able to do it with text that can be of any length. There are two possibilities, neither simple:

1. Use a JS library
2. Use SVG. The problem with using SVG for this is that we still need to know the proportions of the text depending on which font is used, so it's still not trivial.

[beafialho]

The challenge is to be able to do it with text that can be of any length.

Would it help if this only worked with one or two words? From most sites I see this in, no more than that is often used.

[scruffian]

Only if we know the length of the words!

[nguyendb305]

I get the idea. However, it's not what it looks like.

The first website uses an image as its footer, while the second one uses an svg file as its header.

All of those can be easily achieved within WordPress without having to add a very hard solution to serve an unpopular design.

To replicate the design, just use a full width image and svg block.

[davewhitley]

To let the user input any text and then calculate the font size so that the text fills 100% width of its container, I think you'd only need a few lines of JS. I know adding JS is complicated, but just wanted to offer this up as a possible solution that doesn't require a library.

https://codepen.io/hans/pen/WxBZoQ

If we knew the text would not change, I think you could do it with just CSS.