elixirschool / school_house

The new era of Elixir School now powered by @phoenixframework
https://elixirschool.com/
Apache License 2.0
155 stars 49 forks source link

Added some spacing for underline decorations #213

Closed a5hk closed 1 year ago

a5hk commented 1 year ago

Added some spacing between link text and its underline decoration. Left side showing current style, right is the new style:

image

kinson commented 1 year ago

Thanks for the pull request @a5hk !

As this is a stylistic choice I wonder if we could get an opinion from @doomspork on this.

If we take GitHub and Google as an example, it's pretty common for the descender on a glyph like q, p, g, y, or g to go through the underline in a hyperlink.

Here are some examples from GitHub and Google:

GitHub

Screenshot 2023-05-11 at 9 02 25 AM Screenshot 2023-05-11 at 9 03 16 AM

Google

Screenshot 2023-05-11 at 9 05 13 AM

As this is subjective, it's hard to say which option is "better", but I personally lean towards the current style.

Let me know what you think and again, thanks for the prs 🎉 !

a5hk commented 1 year ago

As this is a stylistic choice I wonder if we could get an opinion from @doomspork on this.

Yes, that's right and now that I think of it I don't remember having any issues with underlines in English texts. But it seemed really weird to see the underline starting from the third/forth letter in that sample Persian text. At first I thought it might be a side effect being a right to left text. At the time it didn't cross my mind to review other popular websites. But now after checking some popular Persian websites, I noticed that underline is virtually used nowhere. They just use a different color.

it's pretty common for the descender on a glyph like q, p, g, y, or g to go through the underline in a hyperlink.

There are a few more of these in Persian/Arabic scripts: "ب پ ج چ ح خ ر ز ژ س ش ص ض ع غ ق ل م ن و ی"

As you can see there are also some letters the only differ in dots. The current style might create extra dots or make it harder to read words (I have no data to back it up). See this for example (it means: searching [a] linked list): image There are letters with no underline and there are some short lines that might look like a dot. Or here (2X zoomed) (it means: Boolean): image I thought my monitor needs some cleaning :)

My personal preference is to not use underline at all.