Re: [css-text] Enhanced underline options

> On Dec 16, 2014, at 8:17 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
> On Tue, Dec 16, 2014 at 5:05 PM, Bobby Mozumder <mozumder@futureclaw.com> wrote:
>> spacing-color would colorize the spacing from the baseline to the underline.
> 
> Ah, *that's* what you mean by spacing!  In that case, the
> underline-spacing-width suggestion is already in the spec, via the
> text-decoration-position property.
> 
> I've never seen this "[colored] spacing from the baseline to the
> underline" effect.  Can you point to an example?
> 
> ~TJ

Sorry, my mistake.  That would be the underline-offset.

The “spacing-color” would actually be the fill color for the underlines, a second color for the background of the underline.  InDesign calls it the gap-color.  It is more important for dashed/dotted/wavy underlines.  Example:  http://blog.rockymountaintraining.com/wp-content/uploads/2010/02/SHOT0055.jpg

(eventually you will need full custom underline stroke styles, like you have with borders)

Also, I’m looking at your spec and it looks like there’s no way to specify distance from baseline to underline, as well as no way to specify width of the underline itself?  These would be the most important requirement, lots of designers need this, especially at large headline font sizes where some browsers (Firefox) have an unnaturally thick underline.  Firefox makes the underline thicker as the font gets bigger, which isn’t good, since underlines aren’t part of the font, but a border.

Designers need to be able to control every line drawn, and underlines styles are very important at large headline sizes.  (although it is less of an issue with smaller body text)

Here’s a good post on Medium on issues with underlines on the web:  https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9

-bobby
---
Bobby Mozumder
Editor-in-Chief
FutureClaw Magazine
mozumder@futureclaw.com <mailto:mozumder@futureclaw.com>
+1-240-745-5287
www.futureclaw.com <http://www.futureclaw.com/>
twitter.com/futureclaw <https://www.twitter.com/futureclaw>
www.linkedin.com/in/mozumder <http://www.linkedin.com/in/mozumder>