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 3.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 @sdetweil
      last edited by

      @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 kayakbabeK 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @ember1205
        last edited by

        @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
        • kayakbabeK Offline
          kayakbabe @ember1205
          last edited by

          @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

            @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

              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 Reply Quote 0
              • E Offline
                ember1205 @MMRIZE
                last edited by

                @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 Reply Quote 0
                • S Offline
                  sdetweil @ember1205
                  last edited by 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…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • R Offline
                    rubelahamed
                    last edited by

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

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @rubelahamed
                      last edited by

                      @rubelahamed and?

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      • First post
                        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