underline in a different color

Discussion in 'HTML' started by John F, Feb 28, 2008.

  1. John F

    John F Guest

    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: where j=john and f=forkosh )
    John F, Feb 28, 2008
    #1
    1. Advertising

  2. 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
    Beauregard T. Shagnasty, Feb 28, 2008
    #2
    1. Advertising

  3. 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/
    Jukka K. Korpela, Feb 28, 2008
    #3
  4. 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
    Jonathan N. Little, Feb 28, 2008
    #4
  5. 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/
    Jukka K. Korpela, Feb 28, 2008
    #5
  6. 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
    Beauregard T. Shagnasty, Feb 28, 2008
    #6
  7. John F

    John F Guest

    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 <> 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: where j=john and f=forkosh )
    John F, Feb 28, 2008
    #7
  8. 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
    Beauregard T. Shagnasty, Feb 28, 2008
    #8
  9. "John F" <> wrote in message
    news:fq6q6e$dsr$...
    >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: 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
    Andrew Bailey, Feb 29, 2008
    #9
  10. John F

    dorayme Guest

    In article <z7Qxj.22580$%>,
    "Andrew Bailey" <> 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
    dorayme, Feb 29, 2008
    #10
  11. 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 29, 2008
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sunil
    Replies:
    1
    Views:
    416
    Nicolas LeBlanc
    Jul 15, 2003
  2. Jag
    Replies:
    2
    Views:
    8,381
    Randy Rahbar
    Nov 14, 2003
  3. Fulio Open

    Underline's color

    Fulio Open, Jan 23, 2011, in forum: HTML
    Replies:
    2
    Views:
    539
    Fulio Open
    Jan 24, 2011
  4. Kamaljeet Saini
    Replies:
    0
    Views:
    389
    Kamaljeet Saini
    Feb 13, 2009
  5. Replies:
    1
    Views:
    258
    marss
    Feb 14, 2007
Loading...

Share This Page