{"id":15,"date":"2015-01-22T18:03:05","date_gmt":"2015-01-22T18:03:05","guid":{"rendered":"http:\/\/habett.fr\/wordpress\/?p=15"},"modified":"2015-01-22T18:03:05","modified_gmt":"2015-01-22T18:03:05","slug":"scale-to-fit","status":"publish","type":"post","link":"https:\/\/habett.fr\/blog\/2015\/01\/scale-to-fit\/","title":{"rendered":"Scale to fit"},"content":{"rendered":"<p>Je voulais jouer avec un composant qui serait space to fit mais pas mal de bugs li\u00e9s au fait que les browser mettent le letter-spacing entre le lettres mais aussi apr\u00e8s la derni\u00e8re lettre. Donc ma formule devient pour une node hq sans enfants:<\/p>\n<div><\/div>\n<div>\n<div>\u00a0 \u00a0 hq.style.margin = hq.style.padding = &lsquo;0&rsquo;;<\/div>\n<div>\u00a0 \u00a0 var spana = document.createElement(&lsquo;span&rsquo;);<\/div>\n<div>\u00a0 \u00a0 spana.appendChild(document.createTextNode(hq.firstChild.nodeValue));<\/div>\n<div>\u00a0 \u00a0 hq.replaceChild(spana,hq.firstChild);<\/div>\n<div>\u00a0 \u00a0 hq.style.letterSpacing = &lsquo;0&rsquo;;<\/div>\n<div>\u00a0 \u00a0 hq.style.textAlign = &lsquo;center&rsquo;;<\/div>\n<div>\u00a0 \u00a0 v = (hq.offsetWidth &#8211; hq.getElementsByTagName(&lsquo;span&rsquo;)[0].offsetWidth) \/ (hq.getElementsByTagName(&lsquo;span&rsquo;)[0].firstChild.nodeValue.length);<\/div>\n<div>\u00a0 \u00a0 hq.style.letterSpacing = ~~(v)+&rsquo;px&rsquo;;<\/div>\n<div>\u00a0 \u00a0 hq.style.marginRight = ~~(-1*v)+&rsquo;px&rsquo;;<\/div>\n<\/div>\n<div><\/div>\n<div>Merci.<\/div>\n<div class=\"zemanta-pixie\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Je voulais jouer avec un composant qui serait space to fit mais pas mal de bugs li\u00e9s au fait que les browser mettent le letter-spacing entre le lettres mais aussi apr\u00e8s la derni\u00e8re lettre. Donc ma formule devient pour une node hq sans enfants: \u00a0 \u00a0 hq.style.margin = hq.style.padding = &lsquo;0&rsquo;; \u00a0 \u00a0 var spana &hellip; <a href=\"https:\/\/habett.fr\/blog\/2015\/01\/scale-to-fit\/\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Scale to fit<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-archives"],"_links":{"self":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":1,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/habett.fr\/blog\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}