[{"data":1,"prerenderedAt":299},["ShallowReactive",2],{"project-3010970":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":43,"post_text":45,"what":46,"said":75,"maker_in_thread":172,"shape":181,"grid":185,"attempts":261,"same_week":262,"maker_shows":32,"maker_hidden":292,"reader_version":293,"card":294},"3010970","Kerning.js","Take control of your web typography","title","Show HN: Kerning.js — Take control of your web typography","http:\u002F\u002Fendtwist.github.com\u002Fkerning.js\u002F","endtwist.github.com","endtwist",1316372374,2011,154,30,55,1097,6,"notable","languages","javascript library","library",[24,25,26,21],"web typography","kerning","css","roasted",-0.5,{"positive":30,"neutral":31,"mixed":32,"critical":33},0,5,3,13,21,{"idea":36,"execution":37,"design":39,"performance":40,"pricing":42},{"positive":30,"critical":32},{"positive":30,"critical":38},4,{"positive":30,"critical":38},{"positive":30,"critical":41},2,{"positive":30,"critical":30},[44,32,30,32,44,30,44,30,32,30,44,44,30,44,32,44,44,44,32,32,30,32,44,30,44,44,32,30,44,30],1,null,{"problem":47,"audience":45,"pricing":45,"motivation":45,"time_to_build":45,"stack":59,"openness":74,"stage":74,"team_size":74},{"value":48,"source":49,"evidence":50},"Lack of fine-grained typography control on the web","inferred",[51,55],{"id":52,"by":53,"text":54},"3011282","socratic","Do people use things like this? I recently read Robert Bringhurst's excellent Elements of Typographic Style, but have no idea how to apply it to the web. (There is an effort to…",{"id":56,"by":57,"text":58},"3011580","celoyd","You’re asking excellent questions. Basically, your doubts are well founded: you don’t have very much reliable control over typography on the web.[0] Things like kerning.js are…",[60,67],{"value":61,"source":49,"evidence":62},"JavaScript",[63],{"id":64,"by":65,"text":66},"3011036","paulirish","Nice work. I like how it all stays declarative in the CSS too. I would recommend outsourcing your parsing though. It's a tough job and things like CSS hacks can really take your…",{"value":68,"source":69,"evidence":70},"CSS parsing via jQuery CSS parser","maker",[71],{"id":72,"by":11,"text":73},"3011050","I evaluated JSCSSP (didn't know about Parser-lib), but was trying to keep the file size down to a minimum. Though perhaps not the most robust, the library I'm using now…","unknown",{"praise":76,"objections":86,"requests":140,"questions":145,"alternatives":157},[77],{"value":78,"source":79,"evidence":80},"Nice work and declarative CSS approach","commenter",[81,82],{"id":64,"by":65,"text":66},{"id":83,"by":84,"text":85},"3013517","josscrowcroft","Great library, great work - kudos to you for tackling a very tricky subject (I'm staying well away from CSS parsing and typography ... for now) My only concern is whether this is…",[87,102,113,124,132],{"value":88,"source":79,"evidence":89},"Performance cost from wrapping characters in spans",[90,94,98],{"id":91,"by":92,"text":93},"3011338","tambourine_man","What's the performance penalty for wrapping every character in a span? Is it meant for titles only (honest question)?",{"id":95,"by":96,"text":97},"3011715","joshfraser","Pretty sure everything about this library is terrible for performance. I cringe to say this, but I might even recommend using images of text over this.",{"id":99,"by":100,"text":101},"3013168","kevingadd","Completely broken in Firefox, takes ages to load in Chrome. Can't imagine why anyone sane would want to use this library if the cost is so severe. Doing it declaratively through…",{"value":103,"source":79,"evidence":104},"Flash of unstyled content and reliance on JavaScript",[105,109],{"id":106,"by":107,"text":108},"3011470","voidfiles","Yea, but there is flash of un-styled content. There is no way around it because the style has to be applied by the javascript. That is not production ready in my opinion. The way…",{"id":110,"by":111,"text":112},"3013695","loup-vaillant","Apparently doesn't work with no-script, even when allowing the whole page. I suppose there is some cross scripting going on? Or is it because my iceweasel 3.5.16 from…",{"value":114,"source":79,"evidence":115},"Breaks screen readers and SEO",[116,120],{"id":117,"by":118,"text":119},"3043263","joelanman","While pretty, this really messes up screen readers: as each letter gets wrapped in a span, the letters are read out one at a time.",{"id":121,"by":122,"text":123},"3011848","darylteo","Does wrapping everything in spans and divs impede SEO in any way? i.e. Google aside, does Bing and other crawlers interpret: \u003Cspan>Perfect\u003C\u002Fspan> To be the same as: \u003Cspan> \u003Cspan…",{"value":125,"source":79,"evidence":126},"Misuses vendor prefixes",[127,131],{"id":128,"by":129,"text":130},"3011144","saurik","This library is misusing vendor prefixes :(... -webkit-* should be an area for WebKit to define custom CSS property, not for this library to tag things \"only if using WebKit\". If…",{"id":99,"by":100,"text":101},{"value":133,"source":79,"evidence":134},"Poor cross-browser support",[135,139],{"id":136,"by":137,"text":138},"3012728","skrebbel","Not very cross-browser, is it? Even the page itself lays out entirely wrong on Opera.",{"id":99,"by":100,"text":101},[141],{"value":142,"source":79,"evidence":143},"Simpler syntax and copy-paste examples",[144],{"id":83,"by":84,"text":85},[146,153],{"value":147,"source":79,"evidence":148},"How it differs from kernjs.com",[149],{"id":150,"by":151,"text":152},"3011172","audionerd","How does this differ from http:\u002F\u002Fwww.kernjs.com\u002F ?",{"value":154,"source":79,"evidence":155},"Whether wrapping in spans affects SEO",[156],{"id":121,"by":122,"text":123},[158,162,166],{"value":159,"source":79,"evidence":160},"kernjs.com",[161],{"id":150,"by":151,"text":152},{"value":163,"source":79,"evidence":164},"lettering.js",[165],{"id":52,"by":53,"text":54},{"value":167,"source":79,"evidence":168},"text-rendering: optimizeLegibility",[169],{"id":170,"by":151,"text":171},"3015533","Speaking of kerning, here's a simple CSS declaration for modern browsers: ``` text-rendering: optimizeLegibility; ``` ... which will give you improved handling of kerning pairs…",{"comments":32,"answered":30,"key":173},[174,175,178],{"id":72,"text":73},{"id":176,"text":177},"3011339","Actually, there's no reason you can't use this on a real site. Sure, you don't want to use it on a long block of text, but it's great for headers and short copy. It doesn't break…",{"id":179,"text":180},"3011705","I should note this in the documentation, but if you add \"visibility: hidden\" to your content, it will automatically be set to \"visibility: inherit\" after it's ready.",{"commenters":182,"max_depth":31,"maker_replies":32,"first_comment_mins":183,"lifespan_hours":184},25,28,211,[186,188,190,192,194,196,198,200,201,203,207,211,214,216,218,220,221,225,228,231,234,238,241,243,246,248,250,251,255,258],[128,30,44,187,129,30],"project\u002Fcritical\u002Fidea",[64,44,32,189,65,30],"project\u002Fmixed\u002Fexecution",[72,44,30,191,11,44],"maker\u002Fneutral\u002Fexecution",[52,41,32,193,53,30],"project\u002Fneutral\u002Fidea",[195,41,44,187,107,30],"3011332",[176,41,30,197,11,44],"project\u002Fpositive\u002Fidea",[106,41,44,199,107,30],"project\u002Fcritical\u002Fexecution",[179,41,30,191,11,44],[56,41,32,202,57,30],"project\u002Fmixed\u002Fidea",[204,41,30,205,206,30],"3011733","other\u002Fneutral\u002Fdocs","btn",[208,32,44,209,210,30],"3011299","project\u002Fcritical\u002Fdesign","Haraldson",[212,32,44,209,213,30],"3011793","micheljansen",[170,38,30,215,151,30],"other\u002Fneutral\u002Fnone",[99,31,44,217,100,30],"project\u002Fcritical\u002Fperformance",[91,18,32,219,92,30],"project\u002Fneutral\u002Fperformance",[95,18,44,217,96,30],[222,223,44,209,224,30],"3013546",7,"DieBuche",[226,223,44,209,227,30],"3014005","bmelton",[121,229,32,230,122,30],8,"project\u002Fneutral\u002Fexecution",[232,229,32,230,233,30],"3011937","peterjmag",[235,229,30,236,237,30],"3012584","commenter\u002Fneutral\u002Fexecution","robtoo",[83,239,32,240,84,30],9,"project\u002Fmixed\u002Fpricing",[136,242,44,199,137,30],10,[244,242,30,236,245,30],"3012769","secoif",[110,247,44,199,111,30],11,[117,249,44,199,118,30],12,[150,33,32,193,151,30],[252,33,30,253,254,30],"3011188","commenter\u002Fneutral\u002Fidea","dangrossman",[256,33,44,187,257,30],"3013687","lean",[259,260,30,215,257,30],"3013691",14,[],[263,268,273,278,283,287],{"id":264,"name":265,"points":266,"category":267},"3002117","Hacker News Mobile",209,"consumer_social",{"id":269,"name":270,"points":271,"category":272},"3003794","Fluid iPad App Concept",179,"productivity",{"id":274,"name":275,"points":276,"category":277},"3009307","Pulse",163,"dev_tools",{"id":279,"name":280,"points":281,"category":282},"3022245","martin.drashkov.com",160,"hardware",{"id":284,"name":285,"points":286,"category":272},"3008450","ClassMetric",133,{"id":288,"name":289,"points":290,"category":291},"3013292","Crowd²",106,"web_saas",false,"v2",{"id":295,"name":5,"line":6,"ai":292,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":28,"top":18,"kw":296,"maker":11,"domain":10,"tier":19,"attempts":30,"strip":297,"url":9,"mix":298,"praise":78,"objection":88,"sub":21},3010970,[24,25,26,21],"130310103011013111330310113010",[30,31,32,33],1794036490335]