Box drawing rounded corners with extra line-height produces stretched radius

[jesseleite]

Describe the bug

I notice box drawing of rounded corners doesn't produce a proper corner radius when Kitty is configured with a larger line-height. The corners look stretched...

Expected behavior

I would expect the rounded corner radius to render properly in the center of a character cell, across any line-height setting.

Screenshots

Environment details
OS: MacOS Big Sur 11.2.1

kitty 0.19.3 created by Kovid Goyal
Darwin Jesses-MacBook-Pro.local 20.3.0 Darwin Kernel Version 20.3.0: Thu Jan 21 00:06:51 PST 2021; root:xnu-7195.81.3~1/RELEASE_ARM64_T8101 x86_64
ProductName:	macOS ProductVersion:	11.2.1 BuildVersion:	20D74
Loaded config files: /Users/jesseleite/.config/kitty/kitty.conf

Config options different from defaults:
active_border_color        Color(red=255, green=255, blue=255)
adjust_line_height         2.0
bold_font                  Menlo
bold_italic_font           Menlo
color0                     Color(red=33, green=33, blue=33)
color1                     Color(red=255, green=63, blue=97)
color10                    Color(red=134, green=232, blue=106)
color11                    Color(red=255, green=227, blue=95)
color12                    Color(red=62, green=180, blue=232)
color13                    Color(red=255, green=123, blue=52)
color14                    Color(red=62, green=180, blue=232)
color2                     Color(red=134, green=232, blue=106)
color3                     Color(red=255, green=227, blue=95)
color4                     Color(red=62, green=180, blue=232)
color5                     Color(red=255, green=123, blue=52)
color6                     Color(red=62, green=180, blue=232)
color7                     Color(red=255, green=255, blue=255)
color8                     Color(red=66, green=66, blue=66)
color9                     Color(red=255, green=63, blue=97)
cursor                     Color(red=255, green=255, blue=255)
cursor_blink_interval      0.0
font_family                Menlo
font_size                  16.0
foreground                 Color(red=255, green=255, blue=255)
hide_window_decorations    2
italic_font                Menlo
macos_option_as_alt        3
macos_show_window_title_in none
macos_thicken_font         0.65
mouse_hide_wait            1.0
selection_background       Color(red=33, green=33, blue=33)
selection_foreground       Color(red=255, green=255, blue=255)
window_padding_width       FloatEdges(left=18.0, top=20.0, right=18.0, bottom=20.0)
Added shortcuts:
	 super+equal KeyAction(func='change_font_size', args=(True, '+', 1.0))
Changed shortcuts:
	 super+minus KeyAction(func='change_font_size', args=(True, '-', 1.0))

[jesseleite]

PS. I'd like to add that I'm absolutely loving Kitty! Thank you for all you do @kovidgoyal!

[kovidgoyal]

You're welcome and it looks fine to me, if you make the cells much taller
than wider, that's how it will look. They are drawn using bezier curves
in box_drawing.py see rounded_corner(). Feel free to play with and
adjust the bezier control points.

[jesseleite]

it looks fine to me

You'll very rarely see a designer use stretched-looking bezier curves when rounding corners on divs and boxes on the web.

if you make the cells much taller than wider, that's how it will look.

@kovidgoyal Given the above point, I think it'd be desirable to at least have an option to render non-stretched non-bezier border radius corners. I think many people would appreciate an option at least, no? I'd propose an option to not use a bezier curve, but to simply center the radius in the middle of the character cell, and just extend the straight lines coming off the corner to connect with the rest of the box that's being drawn.

🙏

[kovidgoyal]

On Fri, Mar 19, 2021 at 09:05:30AM -0700, Jesse Leite wrote: >it looks fine to me You'll very rarely see a designer use stretched-looking bezier curves when rounding corners on divs and boxes on the web.

There's othing stretched about the curve.

>if you make the cells much taller than wider, that's how it will look. @kovidgoyal Given the above point, I think it'd be desirable to at least have an option to render non-stretched non-bezier border radius corners. I think many people would appreciate an option at least, no? I'd propose an option to not use a bezier curve, but to simply center the radius in the middle of the character cell, and just extend the straight lines coming off the corner to connect with the rest of the box that's being drawn.

Patches are most welcome.

…

🙏 -- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: #3409 (comment)

--

_____________________________________ Dr. Kovid Goyal https://www.kovidgoyal.net https://calibre-ebook.com

_____________________________________

[jesseleite]

There's nothing stretched about the curve.

@kovidgoyal I know they are drawn bezier, not stretched. It's visually stretched looking, from a design standpoint. Again you'll rarely see a designer use bezier curves for rounded corners on divs and boxes on the web.

If you're open to a patch, should we leave the issue open to open this up for community support?

[kovidgoyal]

I think it looks perfectly fine using bezier curves. If someone comes up
with a patch I will review it. And bezier is THE most common way to drw
rounded corners. I'm afraid I am not going to leave this issue open, but
again if someone comes up with a patch, I will review.

[kovidgoyal]

Oh and I hink you are getting misled by the fact that cells in a terminal are highly rectagular, not square, so no matter what curve you use, one edge will always be longer than the other.

[jesseleite]

And bezier is THE most common way to draw rounded corners. [...] I think you are getting misled by the fact that cells in a terminal are highly rectagular

@kovidgoyal I'm speaking specifically from a design standpoint. It shouldn't matter how tall the character cell is, the left here is almost always the most desirable for a corner, from a design standpoint. You'll see this time and time again, all across all the best designs on the net 🙂

but again if someone comes up with a patch, I will review.

Fair enough!

[kovidgoyal]

On Fri, Mar 19, 2021 at 02:12:58PM -0700, Jesse Leite wrote: >but again if someone comes up with a patch, I will review. Fair enough!

And to help this putative contributor get started, here is the needed equation: https://math.stackexchange.com/questions/1649714/whats-the-equation-for-a-rectircle-perfect-rounded-corner-rectangle-without-s

[jesseleite]

Oh my!!! Just pulled and built, this is beautiful, thank you @kovidgoyal! 😍 ❤️

I do notice though that the right side corners (top-right and bottom-right) corners don't quite line up with the straight vertical line (the left side corners look PERFECT though). Well, they do line up, but there's some funky sub-pixel thing happening. Is this something that could be adjusted?

[kovidgoyal]

I leave this as an exercise for you. Look at the rectircle_equations() function, see adjust_left_quadrant. Come up with a similar expression for the right quadrants and check it at even and odd cell sizes.