Icon spacing too big / inconsitent

[Rikorose]

The icon spacings in different widgets are very inconsistent, as it can be observed in the attached image. I.e. the spacings before and between the music control buttons are very large, also the space between the wifi symbol and the ssid ('eduroam' in my case).

Also, all icons should consume the same space. This prevents 'jumping' if an icon changes (e.g. play icon changes to pause icon).

Edit: Added test configuration and output of i3status-rs. As you can see in the output, the icons also have inconsistent padding with spaces on the left and right side. Edit2: Updated output, since previously the wifi ssid was not loaded yet

test.toml:

[[block]]
block = "music"
buttons = ["prev", "play", "next"]

[[block]]
block = "net"
device = "wlp61s0"
hide_inactive = true
ssid = true
signal_strength = true
ip = false
speed_up = false
speed_down = false
graph_up = false
interval = 5

$ i3status-rs test.toml output:

[{"background":"#000000","color":"#a9a9a9","full_text":"| ","markup":"pango","separator":false,"separator_block_width":0},{"align":"left","background":"#000000","color":"#93a1a1","full_text":" Cloches | Worakls ","min_width":"00000000000000000000000","separator":false,"separator_block_width":0},{"background":"#000000","color":"#93a1a1","full_text":" <  ","markup":"pango","name":"prev","separator":false,"separator_block_width":0},{"background":"#000000","color":"#93a1a1","full_text":"> ","markup":"pango","name":"play","separator":false,"separator_block_width":0},{"background":"#000000","color":"#93a1a1","full_text":" >  ","markup":"pango","name":"next","separator":false,"separator_block_width":0},{"background":"#000000","color":"#a9a9a9","full_text":"| ","markup":"pango","separator":false,"separator_block_width":0},{"background":"#000000FF","color":"#93A1A1FF","full_text":" WLAN  ","markup":"pango","name":"eb25496ce312494380b56237d60d3c31","separator":false,"separator_block_width":0},{"background":"#000000FF","color":"#93A1A1FF","full_text":" eduroam ","markup":"pango","name":"eb25496ce312494380b56237d60d3c31","separator":false,"separator_block_width":0},{"background":"#000000FF","color":"#93A1A1FF","full_text":" 68% ","markup":"pango","name":"eb25496ce312494380b56237d60d3c31","separator":false,"separator_block_width":0}],

[ammgws]

Pretty much all of the icons in icons.rs have spaces around them hardcoded in. First, it would be nice to find out the reason for this.

Second, I think that even if the spaces around the other icons are required for some reason, we could still try removing the spaces just for the icons specific to the music block.

Third, the spacing between text-only and icon versions is different for some reason, so maybe this needs fixing at the same time:

text only doesnt have a space around play/pause:

        "music" => " ",
        "music_play" => ">",
        "music_pause" => "||",
        "music_next" => " > ",
        "music_prev" => " < ",

awesome font:

        "music" => " \u{f001} ",
        "music_play" => "  \u{f04b}  ",
        "music_pause" => "  \u{f04c}  ",
        "music_next" => " \u{f061} ",
        "music_prev" => " \u{f060} ",

material font:

        "music" => " \u{e405} ",
        "music_play" => "  \u{e037}  ",
        "music_pause" => "  \u{e034}  ",
        "music_next" => " \u{e044} ",
        "music_prev" => " \u{e045} ",

[ammgws]

Also, all icons should consume the same space. This prevents 'jumping' if an icon changes (e.g. play icon changes to pause icon).

This might be due to the same issue that causes #439 . Need to create a simple test program to explore further.

EDIT You can test this easily by creating a custom block like this:

[[block]]
block = "custom"
cycle = ["echo aaaaa", "echo fffff"]
on_click = "<command>"
interval = 1

Set your bar to use a monospace font, and the block stays the same size when cycling. Set it to a non-monospace font and it will change size. Next, try it with different emojis and you will find that the bar will change size since they will not all be the same width. Only way to fix this is if there is a font with monospace emojis?

[ammgws]

For some reason the play/pause icons had two spaces around them compared to the other icons that have only one space. So when you have prev, play/pause, next buttons the spaces will be like this:

■prev■■■play/pause■■■next■

I removed the extra space around the play/pause icons so that it will be like this:

■prev■■play/pause■■next■

Note that it's not possible to get rid of the double spaces before and after the middle button unless we remove the spaces around ALL three icons in icons.rs, because the button order and such are configurable by the user in their config...

This is what it looks like before (top) and after (bottom):

I will submit a PR later tonight.

[ammgws]

This is what it looks like with all spaces removed:

Seems a bit crowded, so perhaps best to stick with the 1 space solution above.

[Rikorose]

But why do we even rely on ascii spaces? Can't we use a solution based on separator_block_width or min_width and the font size? This would also solve the issue that the width changes if the icon size changes for different icons.

[Rikorose]

470 also does not fix the issues of the other blocks.

Additionally to the play/pause icons, I noticed following other hickups

• Net block: Too big spacing between wifi strength symbol and wifi ssid
• Battery block: If the battery is fully charged, only the battery icon is shown with an additional space to the right. Since the percentage and remaining time text is not shown, it looks like the icon is not centered but off to the left. I guess the spacing is also hard coded into the icon.

[atheriel]

We've never had a good solution for consistent block spacing, and I expect a good one would require some thought and quite a bit of testing. I'm supportive of changes in that direction, though, provided someone is willing to take on that work. It's very likely that this will involve changes to the widget code.

The reason there are ASCII spaces in the config/source is almost certainly because they were added as an ad-hoc way to make things "look right" by block authors. We're not married to them.

[Rikorose]

Yes I see. I guess #470 would be a sufficient workaround until there is a good solution for this.

[ammgws]

FYI Some further improvements for the net block via #505 and #507

[ammgws]

FYI @Rikorose (and also people who liked the intial post: @DrBluefall, @daniellockyer, @azzamsa)

866 Should improve things quite a bit. Not all blocks have been updated with the improved spacing but will be in time (or open an new issue for those).

[azzamsa]

This is what I get after using the latest version. Notice the up icon has leading space:

❯ i3status-rs ~/.config/i3status/config.toml
{"version": 1, "click_events": true}
[[{"background":null,"color":"#EEEEEE","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#4D4D4C","full_text":"▓▓▓▓▓▓▓▓░░ 80% ","markup":"pango","name":"96827c15358a416598403457eef542b1","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#EEEEEEFF","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#4D4D4CFF","full_text":"⏺ Isha (3:57) ","markup":"pango","name":"9d96f0e3f49940198ea321310d493ff8","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#EEEEEE","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#4D4D4C","full_text":" / 55.04 GB ","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#EEEEEEFF","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#4D4D4CFF","full_text":" ","markup":"pango","name":"a6acb70c16c64f1ea336daf0ec54214b","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#4D4D4CFF","full_text":"  0.01KB  0.02KB ","markup":"pango","name":"","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#EEEEEE","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#4D4D4C","full_text":"  31% 1:38 ","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#EEEEEEFF","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#4D4D4CFF","full_text":"  8.99% ","markup":"pango","name":"memory","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#EEEEEE","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#4D4D4C","full_text":"  03% ","markup":"pango","name":"febaafdee29f49a5a62df67fb618bc9e","separator":false,"separator_block_width":0},{"background":"#EEEEEE","color":"#EEEEEEFF","full_text":"","markup":"pango","separator":false,"separator_block_width":0},{"background":"#EEEEEEFF","color":"#4D4D4CFF","full_text":"  Tue 2020-10-20 08:19 PM ","markup":"pango","name":"e1235d09c4b34f0c90e8cfa19349161a","separator":false,"separator_block_width":0}],

[daniellockyer]

@ammgws Thanks! https://github.com/greshake/i3status-rust/commit/10a545d7a7d6df951bdb972aa7501498070904fd fixes the remaining spacing issue for me - looking forward to the next release :slightly_smiling_face: