How do I add consecutive space characters or tab spacing for entity names displayed in cards?

Configuration Frontend
1

How do I add consecutive space characters or tab spacing for entity names in cards?

Below, if I change:

 name: 'C: - - [R]'

to

 name: 'C:     [R]'

      - cards:
          - align_icon: right
            animate: true
            entities:
              - entity: sensor.horizon_c_drive_read_bytes
            font_size: 60
            icon: mdi:speedometer
            line_color: orange
            line_width: 3
            name: 'C: - - [R]'

…it will look like C: [R] when displayed in a card (only one space character in between)
Screenshot 05-29-2023 at 03.21.34 PM

So… what’s the trick to add more space between the C: and [R]?

PS: I also tried adding   (HTML space) and \u0020 (Unicode space); in the entity name, unfortunately that didnt worked either… or, I wasn’t able to figure out how to do it correctly.

Hopefully, it’s not impossible.

2

Perhaps I am missing something, what “type” of card? You say “these cards” … which “cards” ? Entity card, entities card … I see nothing in your code snip posted that shows what type of card.

3

Sorry, I didn’t realize the solution is unique to each card type. It’s for the mini-graph-card card specifically.

4

I would ask here, not generically then:

5

Ok thanks. I was hoping there was.a general solution for all lovelace cards. I’m guessing that’s impossible.

6

That’s how browsers work: they collapse multiple consecutive whitespace characters to one. To force it, use no-break spaces (in HTML) or invisible Unicode characters (printable and not taking up zero space).

https://invisible-characters.com/

7

You could try to type  
It’s the html code for NonBreaking SPace.

8

Okay, I got it to work!

@kbrown01, it doesn’t matter which card I use. The following solution works for all cards. I was right to suspect I need to use unicode. I just wasn’t pasting the actual character, I was typing \u0020 and \u3000 instead of the actual invisible space character itself below:

Ideographic Space character from: this link.

I just copied the invisible text between the curly double quotes “ ” at the link above (at top of the webpage). It look look like they’re just using a regular space character, however, it definitely isnt.

Anyway, I just pasted the special space character a couple of times in a row in the code below; specifically, the line:

'C:   [R]'

      - cards:
          - align_icon: right
            animate: true
            entities:
              - entity: sensor.titan_c_drive_read_bytes
            font_size: 60
            icon: mdi:speedometer
            line_color: orange
            line_width: 3
            name: 'C:   [R]'
            show_fill: true
            type: custom:mini-graph-card

Screenshot 05-30-2023 at 10.26.52 AM

1 Like
9

Well OK, but that is merely a hack for injecting your number of spaces desired and may or may not perform well in some circumstances especially in a flex grid. Better solutions would be using CSS and setting some prefix along with some padding and/or alignment in card-mod to make a proper solution.

10

Yes, that’s exactly what I was asking for originally. This solution works great on all my devices. Not worth spending a bunch of time trying to redo via CSS.

11

THANKS! This is awesome! Has been annoying me for so long in a few buttons. Finally solved!

12

I find it better to use   (=Non-Breaking SPace), because it can be read again later when you edit it.

1 Like