feat: Use custom character to draw editor rulers

[codingjerk]

This PR allows selecting custom character to draw editor rulers and it contains fixes and improvements on PR https://github.com/helix-editor/helix/pull/9256

Differences from previous PR

1. No unnecessary formatting changes
2. No unnecessary string allocation for every character drawn
3. Separate theme key (ui.virtual.ruler.char) if editor.ruler-char is set to allow using different styles for "background ruler" and "character ruler"
4. Ruler character is drawn under the text

Screenshot

Default theme with config

[editor]
  rulers = [ 40, 60 ]
  ruler-char = "¦"

[codingjerk]

I believe I also need to add theme key ui.virtual.ruler.char to every theme in helix.

I believe reasonable value for it is the same as ui.virtual.indent-guide. Using bg from ui.virtual.ruler as fg doesn't work well — in some themes it's pretty hard to see "character rulers" since they're thinner.

I'll wait for reviewers to approve this approach, before adding new key to every theme.

[baldwindavid]

@codingjerk Thanks for this; a real big win here is fixing the issue of the disappearing cursor over a ruler.

I read about some of the constraints and complications in #9256 and see that it's not completely straightforward how to approach.

Not a reviewer at all, but I do wonder if an option might be to introduce a couple settings:

Settings

| `ruler-style` | `bg` displays the ruler as a background color, while `char` displays the configured `ruler-char` | `bg` |
| `ruler-char`  | Specifies the character used to display the rulers when `ruler-style` is `char` | `|` |

The default style would be background so as not to break current settings. The default ruler character is set to |, but will only display if the ruler-style is set to char.

Theme Changes

Perhaps an additional theme key is then not necessary. Instead, the bg dictates the bg ruler-style just as it does now and fg dictates the char ruler-style.

"ui.virtual.ruler" = { bg = "cursorline", fg = "cursorline" }

[codingjerk]

Hi @baldwindavid, I’m glad you found it useful! Regarding your thoughts:

"ui.virtual.ruler" = { bg = "cursorline", fg = "cursorline" }

I like this idea and originally considered it, but it would break the current behavior where both background and foreground colors can be set for the ruler. For example, you can highlight characters under the ruler in red:

It would also slightly complicate the code, as this PR just selects the corresponding theme key, whereas your solution requires extracting the style from within the style value. While it’s not a huge issue, it’s still something to note.

That said, I think it could be worth it, as it simplifies configuration and theming a bit. Thanks for bringing it up.

I hope the maintainers can comment which solution is better, and I’d be happy to either keep the current approach or implement yours.

ruler-style

This is an interesting idea — it would make switching the ruler style easier since the user wouldn't need to select a character manually if they’re fine with the default. It’s also more explicit, and I like it. This solution also doesn't have any significant tradeoffs, I believe. Introducing two more options is okay, since it will simplify ruler-char making it char instead of Option<char>.

Both ideas are independent, so I will update my PR to include the second idea (the ruler-style option) while waiting for the maintainers' feedback on the first (using single theme key).

[codingjerk]

I added commit https://github.com/helix-editor/helix/pull/11798/commits/4acdbe3699336efd105828852da917a81d170fa8 with separate ruler-style option. LGTM now.

Waiting for maintainers to comment on themes

[codingjerk]

@pascalkuthe Hi, sorry for tagging you directly, but I think the issue might have gotten lost. I need your confirmation that the current approach is okay so I can update ui.virtual.ruler in all themes and move this PR forward.

[nik-rev]

You won't need to update any of the themes, in this PR you changed it from ui.virtual.ruler to sometimes be ui.virtual.ruler.char If ui.virtual.ruler.char does not exist it will automatically fall back to ui.virtual.ruler

[the-mikedavis]

The theming part of this is tricky as I mentioned back in #9256. The current guidance is for themes to set bg for ui.virtual.ruler instead of fg. If we allow customizing the ruler character then you would want to theme the fg instead though. I don't like making this 'magic' (i.e. use fg if a ruler char is set, otherwise bg) because it makes the theming nuanced/complicated. I also don't like adding config options for something like this, especially because it's paired with the ruler char option: you need to set both options if you want a custom ruler.

What I'm thinking now is that we should make a bigger / more-breaking change to default the ruler to use ¦ (where not overlapped by text) and effectively get rid of background rulers. The guidance would switch to "use fg for ui.virtual.ruler" which aligns with everything else under ui.virtual - all other elements should generally have foreground highlights. Also I think that ¦ is less obtrusive / visually distracting than coloring an entire column.

[codingjerk]

What I'm thinking now is that we should make a bigger / more-breaking change to default the ruler to use ¦ (where not overlapped by text) and effectively get rid of background rulers. The guidance would switch to "use fg for ui.virtual.ruler" which aligns with everything else under ui.virtual - all other elements should generally have foreground highlights. Also I think that ¦ is less obtrusive / visually distracting than coloring an entire column.

Sounds good. I can update this PR accordingly, though I'm not sure how the community will feel about losing the background ruler.

[the-mikedavis]

It would technically still be possible to use a background ruler by setting bg for ui.virtual.ruler and using " " as the ruler char. After trying it I think that using ¦ is an improvement over background rulers and it should be the default.

[luisschwab]

Concept ACK