Two color font?

ember1205

@sdetweil said in Two color font?:

@ember1205 I want it to handle that dynamically

In what way?

sdetweil

@ember1205 don’t know how… I just want it to happen. I think there needs to be some css setting

I have looked over the years, see same request. not found a solution… yet

ember1205

@sdetweil While a “dynamic” solutions sounds like it would be great, I don’t see it as being terribly feasible.

Every photo that loads would have to be analyzed to determine something like a ‘brightness level’ or similar. Below a value gets a dark font, above a value gets a light font. That would have to map to regions on the screen since one picture could have multiple areas that are above and below that particular level.

Then, you’d have to assess the relationship between the area in the photo and the actual area where the text would be placed, taking into account different placements for text size, string length, wrap, etc.

Just seems like a two color font would address it more simply. Or some sort of way to “outline” text with a different color than the color of the font itself.

sdetweil

@ember1205 one can see the value under the text, don’t have to map the whole screen.

you know what you drew…

and they have to honor z-index order clipping, so they know what is under what…

kayakbabe

@ember1205 look at the css for text . You want Shadow . It can help with this problem a lot. Won’t make it go away. But help a lot.

MMRIZE

@ember1205

Ref. this; https://forum.magicmirror.builders/topic/15732/contrasting-text-on-a-changing-background-again/3?_=1663916722258

I think most efficient and easiest way is using text-shadow dropping.

MMRIZE

And, for the dynamic colour changing;
I used that trick on my CX3 modules for full-day events which could have white/black text on the various background colours;
You can reference the source code of my CX3 modules. (related to magic keywords.)

But it is a trick, not a sole and firm solution. And it still has a mid-zone ambiguity issue. (white on the grey level or black on the grey level, in both cases, still visibility would not be so good.)

ember1205

@MMRIZE Thanks for the pointer.

Why wouldn’t I use the “Outline” option? That seems like it would achieve the result I’m after as well?

Also, I have absolutely no clue where or how to implement these changes. Working my way through CSS and such is an immensely trial-and-error process for me that tends to requires hours of “Developer Console” type access through a browser trying to chase down the files involved, tinkering with changes, and often times not actually getting the result I want without at least breaking one other thing.

sdetweil

@ember1205 everything goes in custom.css you don’t need to change anything else as it would break a module’s ability to update

the dev window shows you where (file) a class comes from. but u don’t edit that file

you can change by adding/editing in the top window in elements mode.

css is hierarchical

last one in wins

main.css is first
module specific css is next
custom.css is last, it overrides anything above

so if u wanted to add shadow to .small from main.css

in costum.css

.small {
whatever required
}

done, custom.css wins.

but it might be tedious to find every element class as there is no enforcement for using the mm provided classes…

rubelahamed

@MMRIZE said in Two color font?:

I think most efficient and easiest way is using text-shadow dropping.
I think most efficient and easiest way is using text-shadow dropping.