
HTML: font color=”red” becomes green - lucb1e
http://jsfiddle.net/WGSNX/7/
======
supermatt
[http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/common-microsyntaxes.html#rules-for-parsing-a-legacy-color-
value)

    
    
      = ”red” 
      = 0red0 (" is not ascii so make 0)
      = 00ed0 (r is not hex so make 0)
      = 00ed00 (pad)

~~~
JohnHaugeland
Sorry, this isn't correct. Red is a perfectly valid color value. This is not
about property expansion.

This is because the source uses curly quotes, which are not recognized as a
parameter bracketing, and so the curly quotes are trying to be interpreted as
part of the value.

Change the quotes to actual quotes and it starts working as expected.

~~~
ender7
No, the OP is correct. You're right that <red> is a valid CSS color keyword,
but <”red”> is not. Because of this, the CSS spec treats it as a "legacy color
value" and attempts to interpret it as a string of characters (including the
quotes) rather than a keyword.

~~~
beyti
yeap

------
quarterto
Wow. I haven't seen a <font> tag in years. My thought processes loading this:

• Ok, that is in fact green.

• I wonder if this is related to the colour name parsing weirdness that was on
HN a couple of weeks ago?

• Heeeey, those aren't ASCII quotes!

~~~
gprasanth
Green - with ascii quotes and an invisible seperator.
[http://jsfiddle.net/WGSNX/264/](http://jsfiddle.net/WGSNX/264/)

~~~
tempestn
Maybe it's just late at night, but how does this work? I understand the words
"invisible separator", but for lack of better phrasing, I don't see an
invisible separator.

~~~
surreal
Between the _r_ and the _e_ there is a U+2063 "invisible separator"

~~~
tempestn
Ahh, thanks, that's the actual name of the character! 3am and I've already
learned something new for the day.

------
dan1234
There was a big Stack Overflow post on HTML color rendering[0].

Basically, the browser thinks it's looking at a malformed hex number and
strips the invalid chars, in this case turning “red” into 00ED0. This is
padded with 0s until it's divisible by 3, giving 00ED00.

[0][http://stackoverflow.com/questions/8318911/why-does-html-
thi...](http://stackoverflow.com/questions/8318911/why-does-html-think-
chucknorris-is-a-color)

------
biot
I fixed it for you:
[http://jsfiddle.net/WGSNX/170/](http://jsfiddle.net/WGSNX/170/)

------
JohnHaugeland
1) Curly quotes are not a valid surrounding for values.

2) <foo bar=baz> will usually be interpreted as a value by browsers, even
though it's illegal, because everything on the web is wrong

3) The browser sees curly quotes as part of baz

4) For lord only knows what reason, the most basic interpretation of that
curly quote appears to be the color green. That'll be somewhere in the CSS
spec. I don't care to look it up.

If you change those to straight quotes, suddenly it'll start working. Notice
that JSFiddle also highlights the source differently.

[http://jsfiddle.net/WGSNX/1876/](http://jsfiddle.net/WGSNX/1876/)

By the way, the "font" tag is over, and setting color that way is also over.
<span style="color:red">Like this please</span> if you need to do inline
styling.

~~~
russellsprouts
I believe that HTML 5 allows for unquoted values. As long as the attribute
doors not contain HTML special characters or spaces, it's legal to omit them.

~~~
reissbaker
Correct. The HTML5 spec includes "unquoted attribute values," which have some
special restrictions (no spaces, can't be the empty string, can't use HTML
characters like >, <, or =, and — duh — no quotes).
[http://www.w3.org/TR/html-markup/syntax.html#attr-value-
unqu...](http://www.w3.org/TR/html-markup/syntax.html#attr-value-unquoted)

------
shdon
Cute. Use normal quotes ;) HTML colour parsing for invalidly specified colours
is odd to say the least.

~~~
andybak
Hard to spot. I can imagine this happening in the real world.

Several blogs engines seem to like automatically converting normal quotes to
curly quotes in an attempt to prettify their text rendering. I remember copy
and pasting code snippets in the and having to fix this.

~~~
mattmanser
And Word.

------
vincentmilliken
"chucknorris" is also a colour, it will turn the text redish.[1]

[1][http://stackoverflow.com/questions/8318911/why-does-html-
thi...](http://stackoverflow.com/questions/8318911/why-does-html-think-
chucknorris-is-a-color)

------
paulmcpazzi
Everybody knows that you have to use `chucknorris` if you really need the red
color: [http://jsfiddle.net/WGSNX/1379/](http://jsfiddle.net/WGSNX/1379/)

------
nicholaides
Weird. On mine, it's blue:
[http://jsfiddle.net/Ta7xp/](http://jsfiddle.net/Ta7xp/)

------
izietto
LOL I love it. I would never find out the trick without read the comments
here.

------
moozeek
”chucknorris” will make it red:

<font color=”chucknorris”>Red, anyone?</font>

------
nmc
A recent HN discussion [1] on a less recent Stackoverflow thread [2] has some
more examples, and some good answers.

[1]
[https://news.ycombinator.com/item?id=6662342](https://news.ycombinator.com/item?id=6662342)

[2] [https://stackoverflow.com/questions/8318911/why-does-html-
th...](https://stackoverflow.com/questions/8318911/why-does-html-think-
chucknorris-is-a-color)

------
captainmuon
Wot? Didn't that use to work?

I remember that HTML had named colors, like "goldenrod" and "peachpuff". Or
was that just css?

~~~
captainmuon
Hah, got it. The snipped used curly quotes instead of regular ones :-)

[http://jsfiddle.net/WGSNX/122/](http://jsfiddle.net/WGSNX/122/)

------
cientifico
I don't know why is considering that as a RGB notation instead of the color
red, but following this progression seems correct:
[http://jsfiddle.net/7ACky/2/](http://jsfiddle.net/7ACky/2/)

red => #red => #0ed => #ed => #ed0 => #eedd00

Could be this?

EDIT: That was wrong:

red => #red => #0ed => #00ed00 seems the correct one.

~~~
rb2e
Thats odd but I see it all light green on Chrome, Windows 7.
[http://i.imgur.com/0mRarjC.png](http://i.imgur.com/0mRarjC.png)

------
harishanchu
I think it is a bug with jsfiddle. It render you code: <font color=”red”>Red,
anyone?</font> like this: <font color="”red”">Red, anyone?</font> And if you
try like: <font color=red>Red, anyone?</font> it works.

------
frogpelt

       <font color=”green”>Green, anyone?</font><br>
       <font color=”blue”>Blue, anyone?</font><br>
       <font color=”red”>Red, anyone?</font><br>

------
hmottestad
color=”red”

and

color="red"

Note the difference between ” and "

"red" is in fact red.

”abc” is still green!

------
jheriko
hmm... if i set colour to #000000 and use the correct quotes it changes the
background and not the foreground.

isn't this just a case of using something incorrectly and getting an undefined
result? just leaves me wondering why errors like this aren't reported or at
least warned about by the browser.

if this was the compiler for any language that wasn't HTML (cringes at the
thought of that being a language and not just a data format) it would never
ship in such a poor state...

------
rbosinger
Now I'm positive that we're all wasting our lives.

------
krob
the reason it didn't work is you were not using ASCI values. HTML even though
it supports multi-byte strings, the constructs which power the html spec do
not support multi-byte strings. Also smart-quotes are note part of that spec
and will be interpreted incorrectly. replace smart-quotes with normal quotes
will make it work correctly.

------
munimkazia
CSS has spoiled us! It took me a while to realize that the font tag's color
attribute only accepts hex color codes.

------
bbunix
I just can't believe this made it to the front page of hacker news... oh well,
Black Friday.

------
ushi
Obviously, it was implemented by a developer suffering from red–green color
blindness.

------
ramigb
Changing the curly quotes to normal double quotes will make it behave
normally.

------
augustolg
This works: (font color='red'>Red, anyone?</font)

------
ariejan
You're not using "-quotes, but the fancy styled ones.

------
Aloha
I swear something like this was posted about a month ago.

------
timinman
This is exactly the kind of post we need more of on HN!

------
niqmk
Not only "red" it's #ff0000 or #ffff00

------
bmaeser
so is "asdf"

[http://asdf.com/asdfgreen.html](http://asdf.com/asdfgreen.html)

------
calvintennant
What the fuck kind of quotes are those?

------
vs4vijay
Should put style="color: red"

------
mrpickles
I think were all just color blind.

------
hernan604
try font color="crap"

------
anupshinde
Change to quote to "

------
hugofonseca
wrong quotes used ” as opposed to "

------
readnews
it should be "red" not ”red”.

------
forlorn
I changed ” to " and the text is red.

------
xer0x
haha! Awesome thanks for this

------
hawkw
Oops.

------
BostX
Mean!

------
anon_java_hater
another day, another XSS exploit vector

------
nbrogi
OP, you didn't realize you had the wrong quotes?

------
ma2xd
The <font> tag is not supported in HTML5. Use CSS instead.

Source:
[http://www.w3schools.com/tags/tag_font.asp](http://www.w3schools.com/tags/tag_font.asp)

~~~
cinitriqs
Lol, truism, yet, for older frameworks, layers of code that are always "in
front" of the css (for whatever damned reason) this might still become an
issue in some form or another. That said, it should obviously show through
when the "test-phase" is there to verify every line of code. nice find though,
nice find.

