HTML: font color=”red” becomes green | Hacker News Reader

HTML: font color=”red” becomes green

jsfiddle.net

142 pointslucb1e92 comments

http://www.whatwg.org/specs/web-apps/current-work/multipage/...

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

That makes a great lot of sense, well explained! This should be on top of the comments.

Edit: Heh

This neatly explains why `red` also becomes green.

#FF0000 also became green (with these quotes)

  = ”#FF0000”
  = 0#FF00000 (rule 10)
  = 00FF00000 (rule 10)
  = 00F F00 000 (rule 12)
  = 00 F0 00 (rule 15)
  = #00F000 (rule 16)

edit: fixed, was previously erroneously applying rule 14 which gave a result of #0FF000

And also explains why, "blue" is actually blue

= "blue" = 0blue0 = 0b00e0

"blue" is actually supposed to be blue. Like "yellow" or "green" or "black"

it's ”blue” that is interesting.

I prefer ”orange” to your ”blue” actually... much easier on the eyes.

Oh, nice explanation

http://jsfiddle.net/pPCmG/

superb

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.

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.

yeap

The quotes in my explanation are the 'curly' quotes. They just display differently on HN.

What's the point of having different quotation marks that are not ascii? Sounds like a formatting nightmare.

Typography, duh.

Wow. I haven't seen a 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!

Maybe something is wrong with me, but the first thing I noticed was the quotes. In fact, from the title posted on HN.

Same here.

Me too. I thought "can't be that, too easy", so I looked for another mistake.

I'd like to ask everyone saying "I saw the quotes right away," what OS do you use? Perhaps your OS uses a different font.

I've had bugs in websites where menus would be completely messed up because they didn't fit in their given space, just because the font of choice was not available on Linux and it fell back on something slightly larger.

Edit: Though in the HN title it is much clearer than in the jsfiddle, for me anyway. Might that be it?

I'm using Chrome on OSX and the color value was highlighted red in the source, so I immediately looked at that.

Chrome on Windows and Linux, on HN and jsFiddle, the quotes were very obvious to me.

_with_ ascii quotes, it works (it's red)

Green - with ascii quotes and an invisible seperator. http://jsfiddle.net/WGSNX/264/

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.

Between the r and the e there is a U+2063 "invisible separator"

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

Between the R and E of red there's some extra character.

My font shows it as a missing character box.

I'm guessing that it just breaks the 'red' into a value which is interpreted as whatever the hex is. (See the chuck norris links posted in this thread).

Red text in source code

http://jsfiddle.net/A6TQK/

   Wow. I haven't seen a <font> tag in years

You should check out the source code for HN more often. :)

Personally, I try to avoid looking at it. It reminds me too much of late 90's Geocities HTML.

   <blink>But pg made it!</blink>

<marquee>Awesome sauce!</marquee>

I made stuff with font tags too ... in 1995.

I think I still did, in an html email, recently :(

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

Exactly my first thought. This is one of the main reasons I frequent this site - I have tons of random tidbits like this cached in my head, so around half of the times someone introduces a problem to me, I am known to reply: "you know, X months back there was a post on Hacker News...".

Had exactly the same Heeeey moment :)

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

I fixed it for you: http://jsfiddle.net/WGSNX/170/

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/

By the way, the "font" tag is over, and setting color that way is also over. Like this please if you need to do inline styling.

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.

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

Yes, and that's the mechanism by which HTML gets confused and thinks that the curly quotes, which are not recognized as value bracketting, are part of the value.

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

Someone sent a friend of mine this code: ”Why is this not working?!” It was puzzling for a few minutes :)

With that font, it's obvious straight away; wouldn't want to debug this for sure.

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.

And Word.

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

[1]http://stackoverflow.com/questions/8318911/why-does-html-thi...

Everybody knows that you have to use `chucknorris` if you really need the red color: http://jsfiddle.net/WGSNX/1379/

Weird. On mine, it's blue: http://jsfiddle.net/Ta7xp/

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

”chucknorris” will make it red:

Red, anyone?

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

[2] https://stackoverflow.com/questions/8318911/why-does-html-th...

Wot? Didn't that use to work?

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

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

http://jsfiddle.net/WGSNX/122/

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/

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

Could be this?

EDIT: That was wrong:

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

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

I think it is a bug with jsfiddle. It render you code: Red, anyone? like this: Red, anyone? And if you try like: Red, anyone? it works.

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

color=”red”

and

color="red"

Note the difference between ” and "

"red" is in fact red.

”abc” is still green!

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

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

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.

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

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

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

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

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

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

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

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

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

so is "asdf"

http://asdf.com/asdfgreen.html

What the fuck kind of quotes are those?

Should put style="color: red"

I think were all just color blind.

try font color="crap"

Change to quote to "

wrong quotes used ” as opposed to "

it should be "red" not ”red”.

I changed ” to " and the text is red.

haha! Awesome thanks for this

Oops.

Mean!

another day, another XSS exploit vector

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

The tag is not supported in HTML5. Use CSS instead.

Source: http://www.w3schools.com/tags/tag_font.asp

Not the point...

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.

This is not related to the topic in question.

Reply on news.ycombinator.com