I3status-rust: The < separators don't render correctly

Created on 2 Sep 2018  Â·  43Comments  Â·  Source: greshake/i3status-rust

A picture is worth a thousand words:

2018-09-02-115516_1180x46_scrot

As you can see the < separators between blocks look kinda ugly and broken, which is not the case in the screenshots I have seen other people have.

fonts-and-rendering

Most helpful comment

It believe it's misleading to have that screenshot in the readme with no explanation if you can only reproduce it by fiddling with the font size (not guaranteed to work) or editing and recompiling i3bar/swaybar.

All 43 comments

See issue #94

@GladOSkar Thanks for the link. Fiddling with the font size didn't help, and the patch is't merged, I am not sure why that issue is closed. This is my config for reference:

bar {
    font pango:DejaVu Sans Mono, FontAwesome 10
    status_command i3status-rs ~/.config/i3/status.toml
    ....
}

Otherwise authors big thanks for the excellent piece of software!

@axper Are the up/down arrows in your net block the right size or do you think you also have this issue?

@ammgws Now that you mentioned it, yes, I have that problem too.

I wonder if it is related since my arrows seem a bit off too.

@axper the issue was closed because there was nothing this project can do about it.

If you want to use the patch, you have to compile i3 with it yourself.

I worked around this by removing the separator:

[theme]
name = "slick"

[theme.overrides]
separator = ""

Now it looks like this:
2018-09-03-103303_1692x48_scrot

Is there a bug report on i3bar project already about this?

Same issue here, and removing it is not a viable solution.

@axper it's not a bug, nor a feature they would ever consider, so no.

@GladOSkar Alright. Can you suggest some alternatives to i3bar?

@axper i don't know any bars that can do this natively. That's why i wrote that hacky patch. There are of course other beautiful bars like polybar

Unfortunately, @GladOSkar is correct. Font and rendering issues are reported all the time, but we haven't really got a way to address them. In this case, the i3bar protocol simply does not support manipulating the height of a character, so we're out of luck.

So does anyone actually have it lookign like the example from the README? If so please post your config etc so I can try debug further.

@ammgws as stated previously, there are 2 options:

  1. Fiddle with your i3bar font size, try non-integral values like "9.7"
  2. Patch and recompile i3

AFAIK The screenshot was achieved using option 1, but that does not work for everyone.

Yes, I was at one point able to get that look by fiddling with font size, but a recent sway update seems to have removed that route.

It believe it's misleading to have that screenshot in the readme with no explanation if you can only reproduce it by fiddling with the font size (not guaranteed to work) or editing and recompiling i3bar/swaybar.

It still works on my system with the configuration that is in the README. And it looks exactly as advertised

OK thanks for that. So given that we seem to be getting different results for the same config, perhaps the issue is with the text renderer used by i3/sway itself? In i3 it seems to be either XCB (xcb_image_text_16) or Pango+Cairo. In sway it's Pango+Cairo.

Same for both of us:

  • i3status-rust version (2.12-1)
  • i3wm version (i3-gaps 4.15.0.1-2 or similar)
  • font and size settings in i3bar config
  • powerline font version (powerline-fonts 2.7-1)

Possible differences:

  • Screen resolution: 1920x1080 (though I tested at different resolutions and it didn't have an effect)
  • Cairo version (1.15.12-1)
  • Pango version (1.42.4-1)

OK so have managed to get pretty close to (or perhaps even the same as) the example screenshot just by changing the font config (removing DejaVu). You can see the net block arrows issue #238 is also solved.

Before
font pango:DejaVu Sans Mono, FontAwesome 12
image
After
font pango:FontAwesome 12
image

I also had aur/nerd-fonts-complete 2.0.0-5 installed which I uninstalled at some point in between just in case.

Not really sure what to think of this...

@ammgws Thanks for trying to solve this!

If you have a close look you can see after changing the font you still got vertical parts at top & bottom of the '<' sybmol, admittedly smaller, so this is not really a full, reliable solution.

Yeah, though the example screenshot has the vertical parts too (because of i3).
Here are they are up close: 1.example from readme 2. my "After" 3. my "Before"
Only seems off by a pixel or two compared to the example screenshot.
This is in sway though, so I will see if it's any close in i3.
image

By the way, reinstalling nerd-fonts-complete caused it to look like this image with just FontAwesome and like this
image with both DejaVu Sans Mono and FontAwesome.

@ammgws Thanks for the research, I guess I'll live with the fully vertical separator until someone makes a better bar.

I wish I could help more, but font rendering is a rabbit hole I haven't gone down yet.

@ammgws In the case of sway, I know you've had some luck getting patches merged. Do you think they would entertain removing the padding that @GladOSkar discovered?

I doubt it since it's meant to be compatible with i3, and the changes needed to remove padding from just the separator etc don't look to be trivial. Since i3status-rust implements the separators as a text block, anything you change would be applied to every other block too. So you'd need to come up with a special case kinda like what GladOSkar did or maybe add more parameters like font and font size to the block.

I'll see if we can play with pango markup to get the separator to display properly. Could have a different font, font size, etc just for the separator and not have to touch i3/swaybar code. Though you'd have to live with whatever margins/padding/borders i3/swaybar add.
For example (added the markup parameter in util.rs. Ignore the other changes. Then can override the separator in your config file with a pango markup one):

         let separator = json!({
                     //"full_text": config.theme.separator,
                     "full_text": "<span size='16'></span>",
                     "separator": false,
                     "separator_block_width": 0,
                     "border_top": 0,
                     "border_bottom": 0,
                     "markup": "pango",
                     "background": if sep_bg.is_some() { Value::String(sep_bg.unwrap()) } else { Value::Null },
                     "color": sep_fg
                 });

This is the closest I can get without modifying swaybar to remove margins
image

@ammgws i just tried this and my separators stick to the top like this:

[theme.overrides]
separator = "<span font='12'></span>"

image

Now pango markup has a rise option for adjusting the vertical character position and it is supposed to also work with negative numbers (unit is 1024ths of a pt) , but it only works with positive numbers for me, negative values lead to no shift at all:

[theme.overrides]
separator = "<span rise='-2048' font='14'></span>"

image

Would you try this with your config please?

Would you try this with your config please?

@GladOSkar Can confirm negative rise doesn't work.

Thanks for this piece of software, but I agree with others, it might be nice if you tell people they need a patched version of i3 for it to work as advertised.

I personally don't think the vertical separators are terrible so maybe just update the preview to use |s instead?

it might be nice if you tell people they need a patched version of i3 for it to work as advertised.

I'm not sure that's the conclusion of this thread. They look fine for me unpatched. Fonts and rendering is just, as it turns out, a bit tricky, as you can see in related issues.

Do you have an updated config which renders correctly using only font awesome and vanilla i3?

Or a link to an issue where people made it work ?

I was planning to invest the time in making a nice theme without the power line styling otherwise.
On Feb 6, 2020 11:29 -0800, Aaron Jacobs notifications@github.com, wrote:

it might be nice if you tell people they need a patched version of i3 for it to work as advertised.
I'm not sure that's the conclusion of this thread. They look fine for me unpatched. Fonts and rendering is just, as it turns out, a bit tricky, as you can see in related issues.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

Sure, I have

bar {
    font pango:Iosevka, FontAwesome 9
    height 16
    tray_output none
    status_padding 0
    <snip>
}

@atheriel,

Sorry I said in my original comment, a vanilla installation of i3. I can't seem to find the "status_padding" option anywhere?

I think that is only for sway

how can i get the exact bar as i the example.

even after installing powerline fonts i cannot get the exact kind of bar as shown on the example

For everyone: Currently, there are 3 options to remove the padding between the powerline characters and the bar borders:

  • Fiddle with fractional font sizes like 7.9 (This might not work)
  • Use a patched i3 as described in #94 or similar
  • Use sway and set status_padding to 0 (This will probably also remove the padding around the text, which might be undesirable)

Maybe we should add that to the README or the New Issue template or something

@ammgws how can we get the exact look with multicolors as in the example in readme?

For me adding height 16 to the sway bar config as per @atheriel's snippet above is what did the trick:
image

This is what it looks like without adding that to the config:
image

You might have to experiment with the number to get it just right, but 16 works for me.
Do note that it may make the bar feel a bit too cramped vertically for your liking, but this is the best way I know of so far.

I seem to have a different problem where there is a single pixel gap between where the rectangle ends and the triangle begins. Using Nerd fonts which have powerline and awesome patched into everything.

The icons from Awesome are also smaller than they should be.

All we do is output JSON for i3bar/swaybar to process. We don't control the rendering/fonts/etc so not sure how to help.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jpeeler picture jpeeler  Â·  5Comments

YodaEmbedding picture YodaEmbedding  Â·  4Comments

ammgws picture ammgws  Â·  6Comments

lovesegfault picture lovesegfault  Â·  7Comments

Rikorose picture Rikorose  Â·  5Comments