underline in a different color

[John F]

I want to <u>underline in red</u> but leave
the original text color unchanged. This is for
"redlining" text that's been changed between drafts.

The best googling solution I found was of the form
<span style="display:inline; border-bottom:thin solid red;">
stuff to be underlined </span>
which has various and sundry problems, e.g.,
o if there's a <ul>...</ul> inside the span,
the border goes all the way across the window,
like an <hr>. I want it to just underline the text.

After playing around, I came up with the variant
nesting two spans
<span style="display:inline; text-decoration:underline; color:red;">
<span style="color:black;"> stuff to be underlined </span></span>
which seems to leave the underlining in red, but the text
becomes black. This works fine in all cases I tested, but
has (at least) two problems I haven't been able to solve:
o I don't really want "hard-coded" black. I want to inherit
the color from what it was originally, before the first span
(I don't want to inherit the red from the first span).
Black's a good default guess, but not always right.
Any way to inherit from "two levels up"?
o Accidentally using those two <span>'s with an incorrectly
balanced construction like
<span><span> <p>... </span></span> ...</p>
either (1) does no underlining at all in SeaMonkey,
or (2) underlines and keeps underlining beyond
both closing </span>'s and beyond the </p> in Konqueror.
People besides me will be using these redlining tags,
so I'd like them to behave/recover nicely as often as
possible.

Are there any solutions to these problems (for either the
"border" tags redlining procedure or the "decoration" tags
procedure)? Or is there some standard html procedure
for redlining changed text? Thanks,

 

[Beauregard T. Shagnasty]

I want to <u>underline in red</u> but leave the original text color
unchanged. This is for "redlining" text that's been changed between
drafts.

The best googling solution I found was of the form
<span style="display:inline; border-bottom:thin solid red;">
stuff to be underlined </span>
which has various and sundry problems, e.g.,
o if there's a <ul>...</ul> inside the span,
the border goes all the way across the window,
like an <hr>. I want it to just underline the text.

You can't place a block-level element inside an inline element. That
would not validate.

o Accidentally using those two <span>'s with an incorrectly
balanced construction like
<span><span> <p>... </span></span> ...</p>

Same as above: no block inside an inline.

.. Or is there some standard html procedure
for redlining changed text? Thanks,

Here is how I would do it:

del { color: red; }

<p>Someone wants to <del>mark this text</del> in red, as "changed
text."</p>

 

[Jukka K. Korpela]

Scripsit John F:

I want to <u>underline in red</u> but leave
the original text color unchanged.

Just stop wanting that. People are used to underlining indicating a
link. Playing with colors doesn't really help.

This is for
"redlining" text that's been changed between drafts.

Using a distinctive (but not too distinctive) background color might be
a better idea.

The best googling solution I found was of the form
<span style="display:inline; border-bottom:thin solid red;">
stuff to be underlined </span>

The display:inline part is redundant. Otherwise, the style sheet creates
a bottom _border_, which simulates underlining in some situation, though
it's placed lower.

If you use this approach, dashed or dotted bottom border would probably
look better (less misleading) than a solid border.

Somewhat more logically, <ins> markup could be used instead of <span>,
but then you need text-decoration: none to prevent the (clueless)
default underlining in many browsers.

which has various and sundry problems,
Indeed.

e.g.,
o if there's a <ul>...</ul> inside the span,

Then it's invalid markup, and all bets are off. Use valid markup.

After playing around, I came up with the variant
nesting two spans
<span style="display:inline; text-decoration:underline; color:red;">
<span style="color:black;"> stuff to be underlined </span></span>
which seems to leave the underlining in red, but the text
becomes black. This works fine in all cases I tested,

You didn't test sufficiently. The specifications are obscure in this
issue, and browser behavior varies.

but has (at least) two problems I haven't been able to solve:
o I don't really want "hard-coded" black.

You could use a class.

I want to inherit
the color from what it was originally, before the first span

You cannot. You can't make an element inherit from its grandparent
directly, only via its parent.

o Accidentally using those two <span>'s with an incorrectly
balanced construction like
<span><span> <p>... </span></span> ...</p>

.... is a syntax error. Just don't.

 

[Jonathan N. Little]

Here is how I would do it:

del { color: red; }

<p>Someone wants to <del>mark this text</del> in red, as "changed
text."</p>

Yep this is generally good:

del { color: red; }
ins { color: green; }

<p>A Sheriff can employ <del>3</del><ins>5</ins> deputies.</p>

 

[Jukka K. Korpela]

Scripsit Beauregard T. Shagnasty:

Wouldn't <del>...</del> be the proper code for marking text that has
changed?

No, by definition it indicates _deleted_ text. The common default
rendering has a strike-thru line over the text; set text-decoration:
none to prevent this.

There's no really adequate markup for _changed_ text, but if you want to
play with "logical" markup, use <del> for the old text and <ins> for the
new text. They are not commonly used, however, and the default rendering
is poor.

 

[Beauregard T. Shagnasty]

Yep this is generally good:

del { color: red; }
ins { color: green; }

<p>A Sheriff can employ <del>3</del><ins>5</ins> deputies.</p>

Ah yes. I was remiss in forgetting to mention the companion <ins>.
Thanks, Jonathan.

(I'd leave a space between the </del> <ins>, though. <g>)

 

[John F]

Firstly, thanks Beauregard, Jonathan, Jukka
for all your help, and for the heads-up about those
<del> and <ins> tags, which I wasn't aware of.
That definitely gives me a few more good toys to play
with.

Scripsit John F:

Just stop wanting that.

That'll work! But of the alternatives I've tried,
the "industry standard" red underlining seems to
have gotten the most thumbs-up. And it's typically
pretty long strings of text that will be redlined,
so they're not likely to be mistaken for links.

You could use a class.

Yes, but if I understand your suggestion, that means
the author of the text has to use the same class as
the "redline" tag, to ensure all text is colored the
same way. Unfortunately, I've got zero control over
what the author does, so that "same class" assumption
won't fly. Or do I mis-understand what you're
suggesting?

You can't make an element inherit from its grandparent
directly, only via its parent.

Well, if that's not possible, it looks like I can either
(1) underline the text in its own color, or
(2) use red underlining, but force the text to some fixed
color that might not be the same color as surrounding
text.
The quandary is that the second choice is aesthetically better,
but the first is more "robust" against syntax errors like...

... is a syntax error. Just don't.

Well, again, I've got zero control over authors' behavior,
mistaken or not. It's true that I can correctly say, "That's
your error." That'll cover my behind, but won't win any friends.
Tags that gracefully (as gracefully as possible) recover
from errors would definitely be preferable.

 

[Beauregard T. Shagnasty]

Tags that gracefully (as gracefully as possible) recover
from errors would definitely be preferable.

Using <del> and <ins> (which underlines) will be standard (as far as web
pages go) regardless of color styling that you have no control over. So
it will still mean something to the reader.

I remember printed documents from many years ago that used the
strike-out for old text and the underline as the replacement new text.
And long prior to computers and word processors.

 

[Andrew Bailey]

I want to <u>underline in red</u> but leave
the original text color unchanged. This is for
"redlining" text that's been changed between drafts.

The best googling solution I found was of the form
<span style="display:inline; border-bottom:thin solid red;">
stuff to be underlined </span>
which has various and sundry problems, e.g.,
o if there's a <ul>...</ul> inside the span,
the border goes all the way across the window,
like an <hr>. I want it to just underline the text.

After playing around, I came up with the variant
nesting two spans
<span style="display:inline; text-decoration:underline; color:red;">
<span style="color:black;"> stuff to be underlined </span></span>
which seems to leave the underlining in red, but the text
becomes black. This works fine in all cases I tested, but
has (at least) two problems I haven't been able to solve:
o I don't really want "hard-coded" black. I want to inherit
the color from what it was originally, before the first span
(I don't want to inherit the red from the first span).
Black's a good default guess, but not always right.
Any way to inherit from "two levels up"?
o Accidentally using those two <span>'s with an incorrectly
balanced construction like
<span><span> <p>... </span></span> ...</p>
either (1) does no underlining at all in SeaMonkey,
or (2) underlines and keeps underlining beyond
both closing </span>'s and beyond the </p> in Konqueror.
People besides me will be using these redlining tags,
so I'd like them to behave/recover nicely as often as
possible.

Are there any solutions to these problems (for either the
"border" tags redlining procedure or the "decoration" tags
procedure)? Or is there some standard html procedure
for redlining changed text? Thanks,

Hi,

I just tried this...

<html>
<body>
<style>
span.redline { border-bottom: red solid 1px }
</style>

This is some text that needs to be <span class="redline">underlined</span>
by a red line.

</body>
</html>

.... and it worked perfectly.

Hope this helps.

Andy

 

[dorayme]

Hi,

I just tried this...

<html>
<body>
<style>
span.redline { border-bottom: red solid 1px }
</style>

This is some text that needs to be <span class="redline">underlined</span>
by a red line.

</body>
</html>

... and it worked perfectly.

Neither the above markup nor the result *looks* good at all,
never mind perfect. Can a thing like this work well if it does
not look well?

 

[Jukka K. Korpela]

Scripsit Andrew Bailey:

[fullquote, including the sig, always a useful cluelessness indicator]

Hi,

I just tried this...

But you didn't try reading other people's answers before posting
your -0.02 cents worth.

<style>
span.redline { border-bottom: red solid 1px }
</style>

Invalid syntax and stupid class names are useful indicators, too.