{"id":6532,"date":"2025-07-24T14:44:54","date_gmt":"2025-07-24T19:44:54","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6532"},"modified":"2025-08-22T10:05:10","modified_gmt":"2025-08-22T15:05:10","slug":"the-figcaption-problem","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-figcaption-problem\/","title":{"rendered":"The Figcaption Problem"},"content":{"rendered":"\n<p>There is this <em>problem<\/em> with this, when it comes to layout:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"image.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"good description of image\"<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>This is a pretty long caption that I want for the image. It's such a long bit of text that it's likely going to wrap in the layout.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figcaption<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figure<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The problem isn&#8217;t with the HTML, that&#8217;s fine. <\/p>\n\n\n\n<p>The problem is when the <em>image<\/em> is less wide than the <em>container<\/em> and we want the <em>figcaption<\/em> to only be as wide as the <em>image<\/em> is. <\/p>\n\n\n\n<p>We want this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"667\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/browser.png?resize=1024%2C667&#038;ssl=1\" alt=\"\" class=\"wp-image-6628\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/browser.png?resize=1024%2C667&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/browser.png?resize=300%2C195&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/browser.png?resize=768%2C500&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/browser.png?resize=1536%2C1001&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/browser.png?resize=2048%2C1334&amp;ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>We want that orange buddy. That&#8217;s the <code>&lt;figure&gt;<\/code> element sitting in the middle of this article, centered, with an <code>&lt;img&gt;<\/code> inside that isn&#8217;t the full width of the article, and a <code>&lt;figcaption&gt;<\/code> inside that wraps at the edges of the image.<\/p>\n\n\n\n<p><strong><em>How hard can that be?!<\/em><\/strong><\/p>\n\n\n\n<p>Well \u2014&nbsp;it certainly is weird. <\/p>\n\n\n\n<p>This all started with a post from Jeff Bridgforth that piqued my interest:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-bluesky-social wp-block-embed-bluesky-social\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"bluesky-embed\" data-bluesky-uri=\"at:\/\/did:plc:utlp7fxh7z3wen245wkp7awq\/app.bsky.feed.post\/3lr6kitns5k2o\" data-bluesky-cid=\"bafyreib37xplg6keqgqqfychfa4g6yjzzr2cmamqdguvag466nskqh27tm\"><p lang=\"en\">Has anyone come up with a trick to make the width of a figure element fit the content of contained image even when figcaption has more width? I want figcaption to wrap. @kevinpowell.co @bell.bz @ishadeed.com @michelleb.bsky.social @chriscoyier.net @5t3ph.bsky.social<\/p>&mdash; <a href=\"https:\/\/bsky.app\/profile\/did:plc:utlp7fxh7z3wen245wkp7awq?ref_src=embed\">Jeff Bridgforth (@jeffbridgforth.com)<\/a> <a href=\"https:\/\/bsky.app\/profile\/did:plc:utlp7fxh7z3wen245wkp7awq\/post\/3lr6kitns5k2o?ref_src=embed\">2025-06-09T14:08:35.238Z<\/a><\/blockquote><script async src=\"https:\/\/embed.bsky.app\/static\/embed.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>See, I&#8217;d run into this myself. On my own blog, I often post photos that are not the full width of the page and want to center them or float them to a side or something. <strong>And the thing that limits the width of the <code>&lt;figcaption&gt;<\/code> is the parent <code>&lt;figure&gt;<\/code> itself, not the <code>&lt;img&gt;<\/code>. So how do you limit the <code>&lt;figcaption&gt;<\/code> width?<\/strong><\/p>\n\n\n\n<p>On my own blog, I was just like <em>screw it<\/em> and set a <code>max-inline-size<\/code> on them. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"997\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-8.15.00-AM.png?resize=997%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-6629\" style=\"width:702px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-8.15.00-AM.png?resize=997%2C1024&amp;ssl=1 997w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-8.15.00-AM.png?resize=292%2C300&amp;ssl=1 292w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-8.15.00-AM.png?resize=768%2C789&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-8.15.00-AM.png?resize=1496%2C1536&amp;ssl=1 1496w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-8.15.00-AM.png?resize=1995%2C2048&amp;ssl=1 1995w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><figcaption class=\"wp-element-caption\">Me going, eh, screw it: <code>figcaption { max-inline-size: 300px; }<\/code><\/figcaption><\/figure>\n<\/div>\n\n\n<p>For the most part I chalked it up as a design decision that had kind of a cool look. But it still bugged me. Like the image above where the figcaption still ends up <em>wider<\/em> than the image.<\/p>\n\n\n\n<p>There is a proper solution here. <\/p>\n\n\n\n<p>Jeff was smart enough to <a href=\"https:\/\/jeffbridgforth.com\/having-figure-match-width-of-contained-image\/\">blog the entire conversation and solutions that came out of his post<\/a>. And frankly he did a good job and this blog post probably isn&#8217;t entirely necessary. But hey if it helps more people when they run into this, that&#8217;s cool.<\/p>\n\n\n\n<p>Allow me to jump straight to the end and showcase the best solution, by Stephanie Eckles:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JodpOOR\" src=\"\/\/codepen.io\/anon\/embed\/JodpOOR?height=550&amp;theme-id=1&amp;slug-hash=JodpOOR&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JodpOOR\" title=\"CodePen Embed JodpOOR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>There it is, the perfect solution here. <\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">figure<\/span> {\n  <span class=\"hljs-attribute\">inline-size<\/span>: fit-content;\n  <span class=\"hljs-attribute\">margin-inline<\/span>: auto;\n}\n<span class=\"hljs-selector-tag\">figcaption<\/span> {\n  <span class=\"hljs-attribute\">contain<\/span>: inline-size;\n}\n\n<span class=\"hljs-comment\">\/* Probably in your reset stylesheet, which is good. *\/<\/span>\n<span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>; \n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Wouldn&#8217;t you think you could just <code>min-content<\/code> the <code>&lt;figure&gt;<\/code>?<\/h2>\n\n\n\n<p>Like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">figure<\/span> {\n  <span class=\"hljs-attribute\">inline-size<\/span>: min-content;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>That&#8217;s what my brain does and I heard from others the same. The image would be the smallest content within the figure (otherwise it would be just a word), so the figure should kinda shrink-wrap around the image.<\/p>\n\n\n\n<p>The thing is&#8230; <em>you can and it works<\/em>&#8230; unless&#8230; you use the classic reset stylesheet thing:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>I&#8217;m a fan of this. It&#8217;s protection against a too-wide image busting out of a container. It&#8217;s a classic, and it&#8217;s important. This is more like reality, where <code>width<\/code> and <code>height<\/code> attributes are on the image, because that&#8217;s a best-practice for maintaining aspect ratio space as the image is loading.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"...\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"...\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"4000\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"2000\"<\/span> \/&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-comment\">\/* prevent blowouts *\/<\/span>\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n\n  <span class=\"hljs-comment\">\/* maintain aspect ratio *\/<\/span>\n  <span class=\"hljs-attribute\">height<\/span>: auto;\n\n  <span class=\"hljs-comment\">\/* opinionated, but removes line-height space below block images *\/<\/span>\n  <span class=\"hljs-attribute\">display<\/span>: block;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>But if we do this, we&#8217;re essentially wiping away the intinstic size of the image and the <code>min-content<\/code> width becomes based on the <code>figcaption<\/code> instead and we get smashy-smashy thin time:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"770\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-9.57.51-AM.png?resize=1018%2C770&#038;ssl=1\" alt=\"A small image of flowers with a caption below describing the content.\" class=\"wp-image-6632\" style=\"width:504px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-9.57.51-AM.png?w=1018&amp;ssl=1 1018w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-9.57.51-AM.png?resize=300%2C227&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-24-at-9.57.51-AM.png?resize=768%2C581&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Nope.<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"learn-more\">What&#8217;s with mixing logical properties like <code>inline-size<\/code> in some places and non-logical properties like <code>max-width<\/code> in others? I&#8217;m a fan of almost <em>always<\/em> using logical properties, but for most images, even changing to a vertical writing mode shouldn&#8217;t rotate images, so properties like <code>width<\/code> make sense.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Best Tricks Are About Using The Images Intrinsic Size Instead Of The Figcaption<\/h2>\n\n\n\n<p>The core of the trick is:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">figcaption<\/span> {\n  <span class=\"hljs-attribute\">contain<\/span>: inline-size;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>That says: <em>don&#8217;t factor in the figcaption in determining the intrinsic inline-size of the parent.<\/em><\/p>\n\n\n\n<p>There was a way to do this before, as Temani Afif pointed out, with weirder trickery:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">figcaption<\/span> {\n  <span class=\"hljs-attribute\">inline-size<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-comment\">\/* or width *\/<\/span>\n  <span class=\"hljs-attribute\">min-inline-size<\/span>: <span class=\"hljs-number\">100%<\/span>; *\/ or min-width *\/\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Combined Demos<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QwjENQj\" src=\"\/\/codepen.io\/editor\/anon\/embed\/QwjENQj?height=450&amp;theme-id=1&amp;slug-hash=QwjENQj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QwjENQj\" title=\"CodePen Embed QwjENQj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Video<\/h2>\n\n\n\n<p>While I was wrapping my mind around all this, I <a href=\"https:\/\/www.twitch.tv\/chriscoyier\">popped on a stream<\/a> to do it. This isn&#8217;t like a straightforward tutorial, it&#8217;s the exploratory poking around and trying stuff that lead to my own better understanding (and the demos and this blog post).<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"That figure\/figcaption width issue\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Tsumy1v3zk4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>When an image isn&#8217;t &#8220;full width&#8221;, but you want that caption underneath to wrap at the end of the image.<\/p>\n","protected":false},"author":1,"featured_media":6634,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7,133],"class_list":["post-6532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-images"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/07\/The-Figcaption-Problem.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=6532"}],"version-history":[{"count":7,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6532\/revisions"}],"predecessor-version":[{"id":6856,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/6532\/revisions\/6856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/6634"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=6532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=6532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=6532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}