• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Two color font?

Scheduled Pinned Locked Moved Custom CSS
13 Posts 5 Posters 2.6k Views 5 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    ember1205
    last edited by Sep 22, 2022, 8:28 PM

    My mirror is part digital photo frame and part info display tool. The photos are shown in random order and are all full screen.

    The info sections are all currently using various shades of gray fonts which are easy to see when the photo area “behind them” is darker. When the photo area is fairly light, however, the text is unreadable.

    I’m wondering if there’s either a two color font (gray with a black outline or similar) or a way to render an outline around all of the font characters that are currently being shown. I’d want this to apply to all text sections in the mirror if I could do it.

    S M 2 Replies Last reply Sep 22, 2022, 10:00 PM Reply Quote 0
    • S Away
      sdetweil @ember1205
      last edited by Sep 22, 2022, 10:00 PM

      @ember1205 I want it to handle that dynamically

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      E 1 Reply Last reply Sep 22, 2022, 10:01 PM Reply Quote 0
      • E Offline
        ember1205 @sdetweil
        last edited by Sep 22, 2022, 10:01 PM

        @sdetweil said in Two color font?:

        @ember1205 I want it to handle that dynamically

        In what way?

        S 1 Reply Last reply Sep 22, 2022, 10:28 PM Reply Quote 0
        • S Away
          sdetweil @ember1205
          last edited by Sep 22, 2022, 10:28 PM

          @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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          E 1 Reply Last reply Sep 22, 2022, 10:32 PM Reply Quote 0
          • E Offline
            ember1205 @sdetweil
            last edited by Sep 22, 2022, 10:32 PM

            @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.

            S K 2 Replies Last reply Sep 22, 2022, 10:55 PM Reply Quote 0
            • S Away
              sdetweil @ember1205
              last edited by Sep 22, 2022, 10:55 PM

              @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…

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • K Offline
                kayakbabe @ember1205
                last edited by Sep 23, 2022, 3:30 AM

                @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.

                1 Reply Last reply Reply Quote 0
                • M Offline
                  MMRIZE @ember1205
                  last edited by Sep 23, 2022, 7:07 AM

                  @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.

                  1 Reply Last reply Reply Quote 1
                  • M Offline
                    MMRIZE
                    last edited by MMRIZE Sep 23, 2022, 7:18 AM Sep 23, 2022, 7:15 AM

                    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.)

                    E 1 Reply Last reply Sep 23, 2022, 11:20 AM Reply Quote 0
                    • E Offline
                      ember1205 @MMRIZE
                      last edited by Sep 23, 2022, 11:20 AM

                      @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.

                      S 1 Reply Last reply Sep 23, 2022, 12:03 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        3/13
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy