How to auto set font size based on background size

[manuelvita96]

Hi! I use your script to show a fullscreen message on second monitor, now I have set a variable in ini file to set the font size. But if I use a pt size, after few character there is no more space and can't see correctly all message. If I use precentage have less character to see.

There is a way to auto adapt font size/percentage based on text and sizeof the background?

For example something like if the text is "lorem ipsum dolor is amet" can be max 150px and if the text is "Lorem" can be max 500px because is shorter than the first phrase. Thank you!

this is the code I'm using now: TextVar.Value, "c: #00000099 x:1920 y:y w:100% h:100% t:10000 m:0 a:0", "f:(Blogger Sans) z:(Blogger Sans Condensed) c: #ffffff s:" FontSize " j:2 v:2"

[iseahound]

Can something similar be done in CSS?

On Sat, Oct 29, 2022 at 03:05 manuelvita96 @.***> wrote:

Hi! I use your script to show a fullscreen message on second monitor, now I have set a variable in ini file to set the font size. But if I use a pt size, after few character there is no more space and can't see correctly all message. If I use precentage have less character to see.

There is a way to auto adapt font size/percentage based on text and sizeof the background?

For example something like if the text is "lorem ipsum dolor is amet" can be max 150px and if the text is "Lorem" can be max 500px because is shorter than the first phrase. Thank you!

this is the code I'm using now: TextVar.Value, "c: #00000099 x:1920 y:y w:100% h:100% t:10000 m:0 a:0", "f:(Blogger Sans) z:(Blogger Sans Condensed) c: #ffffff s:" FontSize " j:2 v:2"

— Reply to this email directly, view it on GitHub https://github.com/iseahound/TextRender/issues/12, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKTTVFLIL2BIVIUM7TZ3ALWFTED5ANCNFSM6AAAAAARRU7TKM . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[manuelvita96]

Hi! Thanks for immediate response! I have find this article about that: https://css-tricks.com/viewport-sized-typography/ 

Il sab, 29 ott, 2022 alle 16:33, Edison @.***> ha scritto:

Can something similar be done in CSS?

On Sat, Oct 29, 2022 at 03:05 manuelvita96 @.***> wrote:

Hi! I use your script to show a fullscreen message on second monitor, now I have set a variable in ini file to set the font size. But if I use a pt size, after few character there is no more space and can't see correctly all message. If I use precentage have less character to see.

There is a way to auto adapt font size/percentage based on text and sizeof the background?

For example something like if the text is "lorem ipsum dolor is amet" can be max 150px and if the text is "Lorem" can be max 500px because is shorter than the first phrase. Thank you!

this is the code I'm using now: TextVar.Value, "c: #00000099 x:1920 y:y w:100% h:100% t:10000 m:0 a:0", "f:(Blogger Sans) z:(Blogger Sans Condensed) c: #ffffff s:" FontSize " j:2 v:2"

— Reply to this email directly, view it on GitHub https://github.com/iseahound/TextRender/issues/12, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKTTVFLIL2BIVIUM7TZ3ALWFTED5ANCNFSM6AAAAAARRU7TKM . You are receiving this because you are subscribed to this thread.Message ID: @.***>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[iseahound]

viewport width and viewport height have already been implemented in TextRender. I was thinking that perhaps use of max() and min() could solve your issue? Scaling font sizes based on text size leads to edge cases such as extremely small and unreadable text.

On Sat, Oct 29, 2022 at 11:24 manuelvita96 @.***> wrote:

Hi! Thanks for immediate response! I have find this article about that: https://css-tricks.com/viewport-sized-typography/

Il sab, 29 ott, 2022 alle 16:33, Edison @.***> ha scritto:

Can something similar be done in CSS?

On Sat, Oct 29, 2022 at 03:05 manuelvita96 @.***> wrote:

Hi! I use your script to show a fullscreen message on second monitor, now I have set a variable in ini file to set the font size. But if I use a pt size, after few character there is no more space and can't see correctly all message. If I use precentage have less character to see.

There is a way to auto adapt font size/percentage based on text and sizeof the background?

For example something like if the text is "lorem ipsum dolor is amet" can be max 150px and if the text is "Lorem" can be max 500px because is shorter than the first phrase. Thank you!

this is the code I'm using now: TextVar.Value, "c: #00000099 x:1920 y:y w:100% h:100% t:10000 m:0 a:0", "f:(Blogger Sans) z:(Blogger Sans Condensed) c: #ffffff s:" FontSize " j:2 v:2"

— Reply to this email directly, view it on GitHub https://github.com/iseahound/TextRender/issues/12, or unsubscribe < https://github.com/notifications/unsubscribe-auth/ACKTTVFLIL2BIVIUM7TZ3ALWFTED5ANCNFSM6AAAAAARRU7TKM

. You are receiving this because you are subscribed to this thread.Message ID: @.***>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/iseahound/TextRender/issues/12#issuecomment-1295870231, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKTTVG2ANNYKHYRBL7HLQ3WFU6SXANCNFSM6AAAAAARRU7TKM . You are receiving this because you commented.Message ID: @.***>

[manuelvita96]

This can be the solution :) 

Il sab, 29 ott, 2022 alle 19:08, Edison @.***> ha scritto:

viewport width and viewport height have already been implemented in TextRender. I was thinking that perhaps use of max() and min() could solve your issue? Scaling font sizes based on text size leads to edge cases such as extremely small and unreadable text.

On Sat, Oct 29, 2022 at 11:24 manuelvita96 @.***> wrote:

Hi! Thanks for immediate response! I have find this article about that: https://css-tricks.com/viewport-sized-typography/

Il sab, 29 ott, 2022 alle 16:33, Edison @.***> ha scritto:

Can something similar be done in CSS?

On Sat, Oct 29, 2022 at 03:05 manuelvita96 @.***> wrote:

Hi! I use your script to show a fullscreen message on second monitor, now I have set a variable in ini file to set the font size. But if I use a pt size, after few character there is no more space and can't see correctly all message. If I use precentage have less character to see.

There is a way to auto adapt font size/percentage based on text and sizeof the background?

For example something like if the text is "lorem ipsum dolor is amet" can be max 150px and if the text is "Lorem" can be max 500px because is shorter than the first phrase. Thank you!

this is the code I'm using now: TextVar.Value, "c: #00000099 x:1920 y:y w:100% h:100% t:10000 m:0 a:0", "f:(Blogger Sans) z:(Blogger Sans Condensed) c: #ffffff s:" FontSize " j:2 v:2"

— Reply to this email directly, view it on GitHub https://github.com/iseahound/TextRender/issues/12, or unsubscribe < https://github.com/notifications/unsubscribe-auth/ACKTTVFLIL2BIVIUM7TZ3ALWFTED5ANCNFSM6AAAAAARRU7TKM

. You are receiving this because you are subscribed to this thread.Message ID: @.***>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/iseahound/TextRender/issues/12#issuecomment-1295870231, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKTTVG2ANNYKHYRBL7HLQ3WFU6SXANCNFSM6AAAAAARRU7TKM . You are receiving this because you commented.Message ID: @.***>

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[iseahound]

I still don't know if this can be done efficiently - it seems to be that it is not possible to know how much space a specific font may take up before drawing. It's not like font-size: 12pt really means anything: There's 12 points in 1 pica, and 6 picas in 1 inch, but no one is measuring my screen with a ruler. The worst part is that some characters have overhang — so if the idea is to develop an algorithm to fit the text inside the box, that actually might not be possible.

It just sounds really inefficient to measure the text 13-14 times, but it could be added. I'll have to think about it.

[iseahound]

Not implementing a recursive solution that iterates to a limit.

Maybe I misunderstood this question, but at least in CSS, I'd have to use max() or min() to get the desired outcome, which is a little too advanced for this project. As it stands, it feels the most natural for text size to be a % of the ScreenHeight.