The < separators don't render correctly

[axper]

A picture is worth a thousand words:

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.

[GladOSkar]

See issue #94

[axper]

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

[ammgws]

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

[axper]

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

[ammgws]

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

[axper]

This #209 (comment) didn't help either.

[GladOSkar]

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

[axper]

I worked around this by removing the separator:

[theme]
name = "slick"

[theme.overrides]
separator = ""

Now it looks like this:

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

[concatime]

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

[GladOSkar]

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

[axper]

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

[GladOSkar]

@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

[atheriel]

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.

[ammgws]

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.

[GladOSkar]

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

[atheriel]

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.

[ammgws]

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.

[greshake]

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

[ammgws]

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)

[ammgws]

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

After
font pango:FontAwesome 12

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

[axper]

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

[ammgws]

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.

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

[axper]

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

[greshake]

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

[atheriel]

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

[ammgws]

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.

[ammgws]

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

[GladOSkar]

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

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

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>"

Would you try this with your config please?

[M-Gregoire]

Would you try this with your config please?

@GladOSkar Can confirm negative rise doesn't work.

[pmyjavec]

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?

[atheriel]

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.

[pmyjavec]

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

[atheriel]

Sure, I have

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

[pmyjavec]

@atheriel,

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

[ammgws]

I think that is only for sway

[rubiin]

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

[rubiin]

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

[GladOSkar]

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 Font doesn't look right #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)

[ammgws]

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

[rubiin]

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

[ammgws]

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

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

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.

[ghost]

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.

[ammgws]

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.

[martinpelikan]

Edit: snipped mention

I realize it's been over two years, but did you explore this option or have thoughts on how to approach it? The solutions of manually patching i3 or mangling the font/bar for the specific system don't feel right to me. I'm coming in from i3blocks and my separator is just a thin |, so it's not like removing the powerline character is a tremendous downgrade, but I do find those characters help quite a bit with readability when they work.

[atheriel]

@martinpelikan I'm afraid I gave up maintainership on this project two years ago, so I simply cannot be an authority on what may have changed to make this possible in the meantime.

[martinpelikan]

GitHub quoted the mention, apologies! My question was intended for @pmyjavec, regarding this:

I was planning to invest the time in making a nice theme without the power line styling otherwise.

[GladOSkar]

@martinpelikan if the solutions in the comments above don't work for you, there's currently no other solution to the issue. This is because the i3 json interface only offers very limited font rendering parameters, giving us no control over it.

I will say though that many users (like me) have gotten it to work okay when fiddling with font sizes either globally or using pango to set different font sizes for the separators specifically. Screenshot of my bar for demonstration (i had the same issue originally):

# i3srs config
[theme]
name = "slick"
[theme.overrides]
separator = "<span font='13.5'></span>"

# i3 config
font pango:FuraCode Nerd Font 9

[martinpelikan]

@GladOSkar

Below is about as close as I can get with changing the separator size. It's not great, but I can probably live with it.

The other issue is that if I'm understanding correctly, it will require adjustment any time I move this config to systems with different screen sizes or resolutions, and might just not work in the case of mixed resolution systems. Because of this, I figured just removing the separator (as suggested earlier) is the most reliable solution, but I first wanted to check if pmyjavec or others had ideas on themed workarounds.

# i3status-rust config
[theme]
name = "nord-dark"
[icons]
name = "material-nf"
[theme.overrides]
separator = "<span font='23'></span>"

# i3 config
font pango:Ubuntu, Symbols Nerd Font 12

[martinpelikan]

Using a monospaced font gets me closer, but introduced the pixel gap between segment and separator, as shown below, while also using a less readable font (outside the context of coding anyway).

[theme]
name = "nord-dark"
[icons]
name = "material-nf"
[theme.overrides]
separator = "<span font='15'></span>"

font pango:Fira Code, Symbols Nerd Font 12

[GladOSkar]

Yes that also sometimes happens in similar situations. Also not something that can be affected by anything except font size :/

[MaxVerevkin]

One extremely hacky way to avoid these gaps is to use a specific font with disabled antialiasing. For example:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
  <match target="font">
    <test qual="any" name="family">
      <string>NotoSans Nerd Font</string>
    </test>
    <edit mode="assign" name="antialias">
      <bool>false</bool>
    </edit>
  </match>
</fontconfig>

separator = "<span font_family='NotoSans Nerd Font'>\ue0b2</span>"

Not sure if it's worth it though, as the result is just as ugly.

[MaxVerevkin]

Hey, I managed to fix those gaps in i3bar-river by 1) rendering left to right 2) having one pixel overlap between blocks (but this should probably be optional). I wonder if something like this would be accepted upstream.