CAMEL-15371: underline links

[AemieJ]

No description provided.

[zregvart]

This bit looks a bit weird to me.

Suggested change

text-underline-position: under;

[AemieJ]

You require this particular line so that there is a minimum distance between the underline and the text.

[zregvart]

Right, so this is with text-underline-position: under:

and without:

I think what you're reacting to is that the underline is quite noticeable, perhaps adding to make it lighter:

Suggested change

	text-underline-position: under;
	text-decoration-thickness: 1px;
	text-decoration-style: dotted;

Would help, this is how it renders in Firefox:

[zregvart]

This needs to be rebased.

[zregvart]

Not sure about the underline being below the descenders. My personal preference would be

text-decoration: underline;
text-decoration-style: dotted;

There are some methods on different underline styles at css tricks and I remember reading about the underline journey at medium (for inspiration).

@aashnajena and @Delawen any thoughts on this?

[AemieJ]

@zregvart alright I got your concern about it but with those changes, it looks messy in chrome browser, I found a method using background-image and linear-gradient on the CSS tricks site.

background-image: linear-gradient(to right, #583ac2 50%, transparent 50%);
background-position: 0 1.1em;
background-repeat: repeat-x;
background-size: 7px 1px;

If it's okay with you, I will implement it in this manner, it will create a neater effect of underline on each browser.

[zregvart]

background-image: linear-gradient(to right, #583ac2 50%, transparent 50%);
background-position: 0 1.1em;
background-repeat: repeat-x;
background-size: 7px 1px;

Does the background-position track different font sizes correctly? Might be a bit of a headache to have this properly positioned for all font sizes.

[AemieJ]

@zregvart I have checked it, the background-position tracks all the font-size of the text and that of browsers correctly.

[zregvart]

Thanks @AemieJ