{"id":539,"date":"2009-06-27T09:35:25","date_gmt":"2009-06-27T14:35:25","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2009\/06\/27\/oh-the-things-youll-learn\/"},"modified":"2009-06-27T09:35:25","modified_gmt":"2009-06-27T14:35:25","slug":"oh-the-things-youll-learn","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2009\/06\/27\/oh-the-things-youll-learn\/","title":{"rendered":"Oh The Things You&#8217;ll Learn"},"content":{"rendered":"<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/html.svgz\"><span\/><\/object>I was playing around with a <a href=\"http:\/\/jgraduate.googlecode.com\/\">new project<\/a> recently and wanted to figure out the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Complementary_color\">complementary color<\/a> of a given color.  All you need for this are the RGB values of the color for which you want to find the complement.<\/p>\n<p>There are lots of ways of specifying a color on the Open Web:<\/p>\n<ul>\n<li>rgb(255,0,0)<\/li>\n<li>rgb(100%,0,0)<\/li>\n<li>#FF0000<\/li>\n<li>#F00<\/li>\n<li>\"red\"<\/li>\n<\/ul>\n<p>And it's not just the <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/syndata.html#color-units\">17 CSS color names<\/a>, there are 147 cool-sounding extended color names like <a href=\"http:\/\/www.w3.org\/TR\/SVG\/types.html#ColorKeywords\">papayawhip<\/a>.  So given that a user can input a color in all sorts of ways, what's the right way to do this? <!--more--><\/p>\n<h3>The Hard Way<\/h3>\n<p>You can build a parser that determines the color format, parses hex and rgb strings and has a table that maps 147 strings to rgb triplets.  It turns out there are a lot of JavaScript libraries that already do this.  <a href=\"http:\/\/code.google.com\/p\/jquery-color-utils\/\">Here's one<\/a>.<\/p>\n<p>But then I thought:  why am I including yet another JavaScript library to do this parsing when the browser must already know how to map from hex, rgb or color name to an RGB triplet (or equivalent) in order to render the color in the first place?  Surely there's a way to extract this directly out of the DOM?<\/p>\n<h3>The DOM Way<\/h3>\n<p>It turns out there is.  It's called the <a href=\"http:\/\/www.w3.org\/TR\/DOM-Level-2-Style\/Overview.html\">CSS DOM<\/a> and I always seem to forget about this document.  Piecing together information from the <a href=\"http:\/\/www.w3.org\/TR\/SVG11\/types.html#InterfaceSVGStylable\">SVG<\/a> <a href=\"http:\/\/www.w3.org\/TR\/SVG11\/types.html#InterfaceSVGColor\">DOM<\/a> and the <a href=\"http:\/\/www.w3.org\/TR\/DOM-Level-2-Style\/css.html#CSS-RGBColor\">CSS<\/a> <a href=\"http:\/\/www.w3.org\/TR\/DOM-Level-2-Style\/css.html#CSS-CSSPrimitiveValue\">DOM<\/a>, this is how you would get the red value of a fill attribute on a circle:<\/p>\n<p><code>var red = someCircle.getPresentationAttribute(\"fill\").rgbColor.red.getFloatValue(1);<\/code><\/p>\n<p>That's just a bit perverse, but at least it's possible.<\/p>\n<p>In testing this I was delighted to discover that Opera and WebKit let me do it.  Sadly, <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=500888\">Firefox does not<\/a>.<\/p>\n<h3>The Best-Laid Plans...<\/h3>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/facepalm.svgz\"><span\/><\/object>Here's where the plot thickens.  Seems like the CSS Working Group was chartered to produce a new version of the CSS DOM to make the interfaces less clunky.  Seems like the CSS WG sent out a notice <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-style\/2003Oct\/0347.html\">strongly warning browsers<\/a> not to implement certain DOM interfaces in the CSS DOM.  Seems like it's six years later and there's no new document.<\/p>\n<p>Unfortunately this is where my sad little tale ends.  <a href=\"http:\/\/twitter.com\/erikdahlstrom\/status\/2357983806\">Erik of Opera<\/a> suggests that the SVGT 1.2 uDOM is really the right way to do this.  It doesn't matter that I agree with him because I don't think Webkit or Mozilla have any interest in implementing this any time soon.<\/p>\n<p>It seems kind of sad that folks have to write JavaScript libraries to do color parsing when the browsers already do this natively.  It also seems really weird that the SVG DOM interfaces extend obsolete CSS DOM interfaces (SVGColor extends CSSValue which Bert Bos mentions in his email).<\/p>\n<p>#DOMFAIL ?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was playing around with a new project recently and wanted to figure out the complementary color of a given color. All you need for this are the RGB values of the color for which you want to find the complement. There are lots of ways of specifying a color on the Open Web: rgb(255,0,0) [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,46,11,28],"tags":[74,114,198,154],"class_list":["post-539","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology","category-web","tag-css","tag-mozilla","tag-svg","tag-w3c"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=539"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/539\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}