Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > underline in a different color

Reply
Thread Tools

underline in a different color

 
 
John F
Guest
Posts: n/a
 
      02-28-2008
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,
--
John Forkosh ( mailto: http://www.velocityreviews.com/forums/(E-Mail Removed) where j=john and f=forkosh )
 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-28-2008
John F wrote:

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


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

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

--
-bts
-Friends don't let friends drive Vista
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      02-28-2008
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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-28-2008
Beauregard T. Shagnasty wrote:
> John F wrote:
>
>> 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.


<snip>

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


Yep this is generally good:

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

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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      02-28-2008
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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-28-2008
Jonathan N. Little wrote:

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

--
-bts
-Friends don't let friends drive Vista
 
Reply With Quote
 
John F
Guest
Posts: n/a
 
      02-28-2008
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.

Jukka K. Korpela <(E-Mail Removed)> wrote:
> Scripsit John F:
>> I want to <u>underline in red</u> but leave
>> the original text color unchanged.

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

>> I don't really want "hard-coded" black.

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

>> incorrectly balanced construction like
>> <span><span> <p>... </span></span> ...</p>

>
> ... 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.
--
John Forkosh ( mailto: (E-Mail Removed) where j=john and f=forkosh )
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-28-2008
John F wrote:

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

--
-bts
-Friends don't let friends drive Vista
 
Reply With Quote
 
Andrew Bailey
Guest
Posts: n/a
 
      02-29-2008

"John F" <(E-Mail Removed)> wrote in message
news:fq6q6e$dsr$(E-Mail Removed)...
>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,
> --
> John Forkosh ( mailto: (E-Mail Removed) where j=john and f=forkosh )


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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-29-2008
In article <z7Qxj.22580$%(E-Mail Removed)>,
"Andrew Bailey" <(E-Mail Removed)> wrote:

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

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Underline's color Fulio Open HTML 2 01-24-2011 12:37 PM
Changing font color from current font color to black color Kamaljeet Saini Ruby 0 02-13-2009 04:58 PM
rounded corners in which my border color is different than the background color laredotornado@zipmail.com Javascript 1 02-14-2007 07:37 AM
Re: Firebird - html underline probs Kriss Watt Firefox 0 06-24-2003 11:41 PM
Re: Firebird - html underline probs Gnomalarta Firefox 0 06-24-2003 07:39 PM



Advertisments