Syntax for line through a price

[Frederick Cole]

How do I place a line through a number, as if I were "slashing" a price?

Preferably a diagonal line because a strict horizontal line can make an "8"
look like a "0" sometimes making it appear as if you might be raising a
price.

Thanks,

Fred

 

[Weyoun the Dancing Borg]

How do I place a line through a number, as if I were "slashing" a price?

Preferably a diagonal line because a strict horizontal line can make an "8"
look like a "0" sometimes making it appear as if you might be raising a
price.

Thanks,

Fred

you make an image of it.

--

Quiet, Pinky; I'm pondering.
_ _
/~\\ \ //~\
| \\ \ // |
[ || || ]
] Y || || Y [
| \_|l,------.l|_/ |
| >' `< |
\ (/~`--____--'~\) /
`-_>-__________-<_-'
/(_#(__)#_)\
\___/__\___/
/__`--'__\
/\(__,>-~~ __)
/\//\\( `--~~ )
'\/ <^\ /^>
_\ >-__-< /_
(___\ /___)

 

[Neal]

How do I place a line through a number, as if I were "slashing" a price?

Preferably a diagonal line because a strict horizontal line can make an
"8"
look like a "0" sometimes making it appear as if you might be raising a
price.

For a horizontal strike-through, use the CSS property text-decoration.

span.oldprice {text-decoration: line-through;}

For diagonal, there's no simple way. If the price is 7 characters or 4
characters, the line will need to vary, right? You could use an image like
span.oldprice {background-image: url("redslash.gif");} but it would of
course be behind the price, not over. Still might be OK.

 

[Jukka K. Korpela]

For a horizontal strike-through, use the CSS property text-decoration.

span.oldprice {text-decoration: line-through;}

A problem with this is that when CSS is off, there is no indication of
the price being "out". The same applies to any non-visual presentation.
Moreover, as the OP mentioned, the line might be misleading - browsers
implement striking rather poorly.

A more logical approach is something like

<div>Widgets for sale,
<span class="change"><del>$88</del> <ins>$87.95</ins></span>
each!</div>

Since browsers may underline <ins> content by default, I would add
ins { text-decoration: none; }
into the stylesheet, and then consider whether some other, less
misleading indication of "insertion" is needed (different color, or maybe
a red dotted bottom border - probably would not be misunderstood as link
indication).

It might help a little to make the line colored. The simplest way is
probably to add extra markup inside <del>, using
<del><span>$88</span></del>
and a style sheet like
del { color: red; background: transparent; }
del span { color: black; background: transparent; }

For diagonal, there's no simple way.

Yeah, I'd strick to horizontal - or use an image for the entire
expression.

<div>Widgets for sale,
<img alt="old price $88, new price" src="old88.gif">
$87.95 each!</div>

but using an image would have several drawbacks, of course, e.g. fixed
size in pixels, not adapting to text size.

(If such expressions are used a lot, it would make sense to try and find,
or write, a program that generates such images, with the price or other
text passed as data to it. It might be installed as a server-side script,
so that you would use something like <img ... src="/cgi-bin/del?88">.)

 

[Neal]

A problem with this is that when CSS is off, there is no indication of
the price being "out". The same applies to any non-visual presentation.

Very true. Neglected that.

A more logical approach is something like

<div>Widgets for sale,
<span class="change"><del>$88</del> <ins>$87.95</ins></span>
each!</div>

Since browsers may underline <ins> content by default, I would add
ins { text-decoration: none; }
into the stylesheet, and then consider whether some other, less
misleading indication of "insertion" is needed (different color, or maybe
a red dotted bottom border - probably would not be misunderstood as link
indication).

Perhaps ins.price {color: text-decoration: none; #f00; font-size: 110%;}
would be rather emphatic.

I'll restrain myself from recommending ins.price:after {content:
"!!!!1!!WOW!11!!";}

 

[Frederick Cole]

Thanks, guys.

Excellent suggestions and they will be used.

Regards,

Fred

 

[Neal]

Perhaps ins.price {color: text-decoration: none; #f00; font-size: 110%;}
would be rather emphatic.

And perhaps this would actually be correst:

ins.price {color: #f00; text-decoration: none; font-size: 110%;}