{"id":6533,"date":"2014-05-04T23:35:10","date_gmt":"2014-05-05T03:35:10","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=6533"},"modified":"2014-05-28T13:31:52","modified_gmt":"2014-05-28T17:31:52","slug":"fixing-typography-inside-of-2-d-css-transforms","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2014\/05\/04\/fixing-typography-inside-of-2-d-css-transforms\/","title":{"rendered":"Fixing Typography Inside of 2-D CSS Transforms"},"content":{"rendered":"\r\n<div class=\"importantNotes\">\r\nThis article has been <a href=\"http:\/\/ksesocss.blogspot.com\/2014\/05\/arreglo-distorsion-texto-2D-transform-css.html\">translated into Spanish<\/a> by <a href=\"http:\/\/ksesocss.blogspot.com\/\">Ramajero Argonauta<\/a> and has also been reposted on <a href=\"http:\/\/flippinawesome.org\/\">Flippin' Awesome<\/a>.\r\n<\/div>\r\n\r\n<!-- \r\nNotes: http:\/\/stackoverflow.com\/questions\/12148012\/what-exact-parts-of-css3-are-gpu-accelerated\r\nhttp:\/\/nicolasgallagher.com\/css-typography-experiment\/demo\/bugs.html\r\nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter\r\nhttp:\/\/demosthenes.info\/blog\/689\/More-Tricks-and-Tips-For-CSS-3D-Smoothing-Transforms-amp-Fixing-Floated-Elements\r\n-->\r\n<p><strong>If you&#8217;ve been using CSS3 Transforms<\/strong>, you have probably seen that sometimes, <strong>transformed text that is not spaced correctly<\/strong>, is rendered with <strong>jagged edges<\/strong>, and <strong>letters are placed correctly on the transformed baseline<\/strong>.  I have seen these quirks a lot since playing CSS transforms were introduced in Firefox 3.6 was released, and they were documented on the web back then by people such as <a href=\"http:\/\/nicolasgallagher.com\/css-typography-experiment\/demo\/bugs.html#transformrotate\">Nicolas Gallagher<\/a>. If you don&#8217;t know what I am talking about, take a look at the following example in Firefox, Chrome, Safari or Opera:<\/p>\n\r\n        <div class=\"transforms-container\">\r\n            <blockquote class=\"animation-example regular-transform\">\r\n             <p class=\"animation-example-quote\">I have cherished the ideal of a democratic and free society in which all persons will live together in harmony and with equal opportunities. It is an ideal for which I hope to live for and to see realised. But, My Lord, if it needs be, it is an ideal for which I am prepared to die.<\/p>\r\n             <footer><cite>Nelson Mandela<\/cite><\/footer>\r\n            <\/blockquote>\r\n        <\/div>\r\n<p>If you hover over the green block, you will see that <strong>transformed text becomes smoother when animating<\/strong>, but about a second <strong>after the animation stops<\/strong>, you&#8217;ll see it <strong>reverts back to its former jaggedy self<\/strong>.<\/p>\n<p>As seen from the screenshots below <strong>this effect is really pronounced in Windows<\/strong>.  It happens to a much lesser extent on OS X and Linux, and is almost unnoticable on iOS and Android mobile devices that I have tested with. (Note that <strong>this effect doesn&#8217;t seem to happen at all in Internet Explorer 9+<\/strong> &#8230; <em>Yes kids! For once, IE is doing something right for a change!<\/em>)<\/p>\n\r\n<table class=\"dataTable\">\r\n<thead>\r\n<tr>\r\n<th>Firefox<\/th>\r\n<th>Chrome \/ Opera<\/th>\r\n<th>IE 9+<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2013\/12\/firefox-windows-before.png\" alt=\"chrome-windows-before\" width=\"150\" height=\"150\"\/>\r\n<\/td>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2013\/12\/chrome-windows-before.png\" alt=\"chrome-windows-before\" width=\"150\" height=\"150\"\/><\/td>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2013\/12\/ie9-windows-before.png\" alt=\"chrome-windows-before\" width=\"150\" height=\"150\"\/><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<p>In addition, <strong>all Mac, Windows and Linux version of Firefox, Chrome and Opera<\/strong>, as well as OSX Safari will <strong>&#8220;flash&#8221; into a smooth font while animating<\/strong>, and will <strong>&#8220;flash&#8221; out of the smooth font when the animation is finished<\/strong> (the font&#8217;s color in Safari is also much brighter when it isn&#8217;t animating).  In all cases, it&#8217;s quite distracting and really noticeable! <\/p>\n<p><strong>So how do we fix this?<\/strong><\/p>\n<h2>Solution 1: Add Some Perspective!<\/h2>\n<p>For WebKit\/Blink browsers (i.e. Chrome, Safari and Opera): the solution is easy &mdash; throw it on the GPU.  Let&#8217;s say you are rotating am element -10&deg;.  The CSS to do would be as follows:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#rotated-element {\r\n  -webkit-transform: rotate(-10deg);\r\n  -moz-transform: rotate(-10deg);\r\n  -ms-transform: rotate(-10deg);\r\n  -o-transform: rotate(-10deg);\r\n  transform: rotate(-10deg);\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>A lot of developers would proceed the <code>-webkit-transform<\/code> transform value with a <code>translateZ(0)<\/code> in order to force the GPU to render the element<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#rotated-element {\r\n  <span class=\"hilite\">-webkit-transform: translateZ(0) rotate(-10deg);<\/span>\r\n  -moz-transform: rotate(-10deg);\r\n  -ms-transform: rotate(-10deg);\r\n  -o-transform: rotate(-10deg);\r\n  transform: rotate(-10deg);\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>Developers have been doing this for a while to speed up animating the element (especially on mobile devices).  <strong>This also seems to improve text rendering as well<\/strong>.  Unfortunately,  this does not work with Firefox, even when swapping <code>-webkit-tranform<\/code> for <code>-moz-transform<\/code> or just plain <code>transform<\/code>.  Fortunately, there is a fix that will work with both Firefox and Webkit browsers: instead of using <code>translateZ(0)<\/code>, use <code>perspective(1px)<\/code> (which still throws rendering of the object to the GPU).  Here is the code:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#rotated-element {\r\n  -webkit-transform: <span class=\"hilite\">perspective(1px)<\/span> rotate(-10deg);\r\n  -moz-transform: <span class=\"hilite\">perspective(1px)<\/span> rotate(-10deg);\r\n  -ms-transform: rotate(-10deg);\r\n  -o-transform: rotate(-10deg);\r\n  transform: <span class=\"hilite\">perspective(1px)<\/span> rotate(-10deg);\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>Note that I did not use the <code>perspective(1px)<\/code> fix for all the vendor prefixes, since it actually breaks IE9 and Opera 12.10 and lower (which uses the Presto layout engine), due to their lack of 3D Transform support (<code>perspective()<\/code> is used <a href=\"http:\/\/desandro.github.io\/3dtransforms\/docs\/perspective.html\">to determine the intensity of the 3D effect<\/a>, but since we are using only 2D transforms, it doesn&#8217;t really have any other effect besides improving font-rendering).  If you look at the example below in Safari, Chrome, Opera and Firefox, you will see the difference in typography with the first example:<\/p>\n\r\n        <div class=\"transforms-container\">\r\n            <!-- Add your site or application content here -->\r\n            \r\n\r\n            <blockquote class=\"animation-example with-perspective\">\r\n             <p class=\"animation-example-quote\">I have cherished the ideal of a democratic and free society in which all persons will live together in harmony and with equal opportunities. It is an ideal for which I hope to live for and to see realised. But, My Lord, if it needs be, it is an ideal for which I am prepared to die.<\/p>\r\n             <footer><cite>Nelson Mandela<\/cite><\/footer>\r\n            <\/blockquote>\r\n        <\/div>\r\n<p>Here are a bunch of screenshots to show the rendering difference in the various browsers:<\/p>\n\r\n<table class=\"dataTable\">\r\n<thead>\r\n<tr>\r\n<th><\/th>\r\n<th>Firefox<\/th>\r\n<th>Chrome \/ Opera<\/th>\r\n<th>IE 9+<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<th>Before<\/th>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2013\/12\/firefox-windows-before.png\" alt=\"chrome-windows-before\" width=\"150\" height=\"150\"\/>\r\n<\/td>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2013\/12\/chrome-windows-before.png\" alt=\"chrome-windows-before\" width=\"150\" height=\"150\"\/><\/td>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2013\/12\/ie9-windows-before.png\" alt=\"chrome-windows-before\" width=\"150\" height=\"150\"\/><\/td>\r\n<\/tr>\r\n<tr>\r\n<th>After<\/th>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/firefox-windows-after.png\" alt=\"chrome-windows-after\" width=\"150\" height=\"150\"\/>\r\n<\/td>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/chrome-windows-after.png\" alt=\"chrome-windows-after\" width=\"150\" height=\"150\"\/><\/td>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/ie9-windows-after.png\" alt=\"chrome-windows-after\" width=\"150\" height=\"150\"\/><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n<p>Most people would agree that IE9 and up still renders the text better than the other browsers under Windows 7, but it is better than what it was without it, and it also doesn&#8217;t trigger a sudden change of anti-aliasing when the object animates using CSS animations, transitions, or JavaScript.<\/p>\n<h2>Solution 2: Use an SVG <code>filter<\/code> and <code>backface-visibility<\/code><\/h2>\n<p>If you take a look at the border with the <code>perspective(1px)<\/code> fix <strong>in Firefox only<\/strong>, you&#8217;ll see an unintended side-effect: the border is now jaggedy:<\/p>\n\r\n<table class=\"dataTable\">\r\n<thead>\r\n<tr>\r\n<th>Firefox\/Win 7<\/th>\r\n<th>Close up<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/firefox-border-jagged.png\" alt=\"firefox-border-jagged\" width=\"150\" height=\"150\" class=\"alignleft size-full wp-image-6624\" \/>\r\n<\/td>\r\n<td>\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/firefox-border-jagged-detail.png\" alt=\"firefox-border-jagged-detail\" width=\"150\" height=\"150\" class=\"alignleft size-full wp-image-6625\" \/><\/a>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<p>After a bit of playing around, I noticed that using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Applying_SVG_effects_to_HTML_content\">SVG filters on the HTML content<\/a> instead of the <code>perspective()<\/code> fix smooths the font the same way and fixes our jaggedy border issue.  In this instance, I chose to blur it with a blur radius of 0 &mdash; this doesn&#8217;t actually blur the element, but it does give us the desired effect.  I use data URI directly in the CSS to apply the SVG filter so that I don&#8217;t have to make the browser download a separate SVG object.  <\/p>\n<p>The combined code looks like this:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#rotated-element {\r\n\r\n  \/* Perform the rotation *\/\r\n  -webkit-transform: rotate(-10deg);\r\n  -moz-transform: rotate(-10deg);\r\n  -ms-transform: rotate(-10deg);\r\n  -o-transform: rotate(-10deg);\r\n  transform: rotate(-10deg);\r\n\r\n  \/*\r\n   * The fix for WebKit\/Blink browsers.\r\n   *\/\r\n  -webkit-backface-visibility: hidden;\r\n\r\n  \/*\r\n   * The fix for Firefox ... yes, it has to be on one, huge line.\r\n   *\/\r\n  filter: url('data:image\/svg+xml;utf8,&lt;svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"&gt;&lt;defs&gt;&lt;filter id=\"gaussian_blur\"&gt;&lt;feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"0\" \/&gt;&lt;\/filter&gt;&lt;\/defs&gt;&lt;\/svg&gt;#gaussian_blur');\r\n}\r\n\r\n<\/pre>\n<\/blockquote>\n<p>Yeah, the Firefox CSS is a rather large line, but it works!  Take a look at the live example below. (Note that I used <code>-webkit-backface-visibility: hidden;<\/code> instead of prepending <code>perspective(1px)<\/code> in the <code>-webkit-transform<\/code> property &mdash; it is just another way of throwing rendering of a DOM element to the GPU in WebKit and Blink).<\/p>\n\r\n        <div class=\"transforms-container\">\r\n            <!-- Add your site or application content here -->\r\n            \r\n\r\n            <blockquote class=\"animation-example regular-transform with-border-fix\">\r\n             <p class=\"animation-example-quote\">I have cherished the ideal of a democratic and free society in which all persons will live together in harmony and with equal opportunities. It is an ideal for which I hope to live for and to see realised. But, My Lord, if it needs be, it is an ideal for which I am prepared to die.<\/p>\r\n             <footer><cite>Nelson Mandela<\/cite><\/footer>\r\n            <\/blockquote>\r\n        <\/div>\r\n<p>Here are some screenshots, in case you are viewing this page in something other than Firefox:<\/p>\n\r\n<table class=\"dataTable\">\r\n<thead>\r\n<tr>\r\n<th><\/th>\r\n<th>Firefox\/Win 7<\/th>\r\n<th>Close up<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<th><code>perspective(1x)<\/code> fix<\/th>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/firefox-border-jagged.png\" alt=\"firefox-border-jagged\" width=\"150\" height=\"150\" class=\"alignleft size-full wp-image-6624\" \/>\r\n<\/td>\r\n<td>\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/firefox-border-jagged-detail.png\" alt=\"firefox-border-jagged-detail\" width=\"150\" height=\"150\" class=\"alignleft size-full wp-image-6625\" \/><\/a>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<th><code>filter<\/code> fix<\/th>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/firefox-border-unjagged.png\" alt=\"firefox-border-jagged\" width=\"150\" height=\"150\" class=\"alignleft size-full wp-image-6624\" \/>\r\n<\/td>\r\n<td>\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/firefox-border-unjagged-detail.png\" alt=\"firefox-border-jagged-detail\" width=\"150\" height=\"150\" class=\"alignleft size-full wp-image-6625\" \/><\/a>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n<a class=\"exampleLink\" href=\"\/tests\/transform-typography\/\">See a clean room example of this fix in action<\/a>\r\n\r\n<h2>An <code>outline<\/code> for another fix:<\/h2>\r\n\r\nNote that you can also use the CSS <code>outline<\/code> property to fix the blocky border as well:\r\n\r\n<blockquote class=\"code\">\r\n<pre>\r\n#rotated-element {\r\n  -webkit-transform: perspective(1px) rotate(-10deg);\r\n  -moz-transform: perspective(1px) rotate(-10deg);\r\n  -ms-transform: rotate(-10deg);\r\n  -o-transform: rotate(-10deg);\r\n  transform: perspective(1px) rotate(-10deg);\r\n  outline: <span class=\"hilite\">1px solid transparent<\/span>;\r\n}\r\n<\/pre>\r\n<\/blockquote>\r\n\r\nThis fix may be better if performing animations, since SVG filters in Firefox are currently pretty CPU intensive. I have, however, not done any performance testing on this yet, and will post an update to this post if I find any information either way.\r\n\r\n<h2>Other Notes<\/h2>\r\n\r\n<ol>\r\n<li>Fonts don't seem jaggedy as in Firefox and IE in Windows 8 without these fixes on some computers.  However, there may be cases where all font rendering may look worse.  For more information about Windows 8 font rendering, read <a href=\"http:\/\/www.istartedsomething.com\/20120303\/cleartype-takes-a-back-seat-for-windows-8-metro\/\">ClearType takes a back seat for Windows 8 Metro<\/a> by Long Zheng and <a href=\"http:\/\/www.neowin.net\/news\/users-keep-reporting-blurry-text-in-windows-8-and-81\">Users keep reporting blurry text in Windows 8 and 8.1<\/a> by John Callaham.<\/li>\r\n<li>Just for completeness, I have made the demos above work in IE8 and below using Visual Filters with a little help of my <a href=\"https:\/\/www.useragentman.com\/IETransformsTranslator\/\">IE Transforms Translator<\/a>.  The typography is a little thicker than IE9 under Windows 7, but decent enough.  Here are some screenshots to compare:\r\n\r\n<table class=\"dataTable\">\r\n<thead>\r\n<tr>\r\n<th>IE8<\/th>\r\n<th>IE 9+<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/ie8-windows-after.png\" alt=\"chrome-windows-after\" width=\"150\" height=\"150\"\/><\/td>\r\n<td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/01\/ie9-windows-after.png\" alt=\"chrome-windows-after\" width=\"150\" height=\"150\"\/><\/td>\r\n<\/tr>\r\n<\/thead>\r\n<\/table>\r\n<\/li>\n<\/ol>\n<h2>Further Reading<\/h2>\n<ul>\n<li><a href=\"http:\/\/nicolasgallagher.com\/css-typography-experiment\/demo\/bugs.html\">New CSS2.1 and CSS3 bugs in modern browsers<\/a> by <a href=\"http:\/\/nicolasgallagher.com\/\">Nicolas Gallagher<\/a><\/li>\n<li>MDN articles on the CSS <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter\">filter<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/outline\">outline<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/perspective\">perspective<\/a> properties.<\/li>\n<p><a href=\"http:\/\/demosthenes.info\/blog\/689\/More-Tricks-and-Tips-For-CSS-3D-Smoothing-Transforms-amp-Fixing-Floated-Elements\">More Tricks and Tips For CSS 3D: Smoothing Transforms &#038; Fixing Floated Elements<\/a> by <a href=\"http:\/\/demosthenes.info\/blog\">Dudley Storey<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/05\/teaser.png\"  \/> <strong>If you&#8217;ve been using CSS3 Transforms<\/strong>, you have probably seen that sometimes, <strong>transformed text that is not spaced correctly<\/strong>, is rendered with <strong>jagged edges<\/strong>, and <strong>letters are placed correctly on the transformed baseline<\/strong>.  Furthermore, transformed text becomes <strong>smoother when animating<\/strong>, but about a second <strong>after the animation stops<\/strong>, you&#8217;ll see it <strong>reverts back to its former jaggedy self<\/strong>. This effect is really pronounced in Windows, but also appears in Mac OS X and Linux browsers.  What is a typography nut to do? In this article, I present three fixes to this issue using the CSS <code>perspective<\/code>, <code>filter<\/code> and <code>outline<\/code> properties.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6533","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/6533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=6533"}],"version-history":[{"count":114,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/6533\/revisions"}],"predecessor-version":[{"id":6686,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/6533\/revisions\/6686"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=6533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=6533"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=6533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}