[css-text] Enhanced underline options

Hi everyone,

Please consider addition further options for text-decoration: underline

We do need the ability to adjust the spacing, thickness, color, and style of the underline.  This would be for enhanced stylistic effects.  InDesign has the ability to style these things, as well as the spacing from the underline to the text baseline.

I also noticed that Firefox and Webkit doesn’t have different underline spacing when font scales in size, which I believe is because there’s not a clear definition of underline style in CSS.

A possible long-form syntax:

.underline-text {
  text-decoration: underline;
  color: black;
  underline-width: 2px;
  underline-color: blue;
  underline-style: dotted;
  underline-spacing-width: 4px;
  underline-spacing-color: rgba(1, 1, 0, .65);
}

inDesign doesn’t have an underline-spacing-style, so I didn’t include that here, but it could be an option.  

Underlines should have a gap behind descenders (which might need it’s own css-definition), and they are supposed to appear behind the text.  You could also do this with overlies as well.

InDesign does have line-through/strikethrough options, which is like a second underline with negative spacing that appears in front of the text, and that could take the following syntax:

.strikethrough-text {
  text-decoration: line-through;
  color: black;
  linethrough-width: 1px;
  linethrough-color: red;
  linethrough-style: dotted;
  linethrough-spacing-width: -.8em;
  linethrough-spacing-color: transparent;
}

Please consider this.  Thank you!

-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>