{"id":14117,"date":"2011-09-06T18:44:57","date_gmt":"2011-09-07T01:44:57","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14117"},"modified":"2021-08-02T11:13:45","modified_gmt":"2021-08-02T18:13:45","slug":"text-stroke","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","title":{"rendered":"text-stroke"},"content":{"rendered":"\n<p><code>text-stroke<\/code> is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> or <abbr title=\"Web Hypertext Application Technology Working Group\">WHATWG<\/abbr> specification. As of June 2013, it is only implemented behind a <code>-webkit<\/code> vendor prefix, though future versions of Firefox and Internet Explorer may support the property (likely under their own prefixes).<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mark {\n  text-stroke: 2px red;\n}<\/code><\/pre>\n\n\n\n<p>The <code>text-stroke<\/code> property is actually shorthand for two other properties:<\/p>\n\n\n\n<ol><li><code>text-stroke-width<\/code>, which takes unit value (1px, 0.125em, 4in, etcetera) and describes the thickness of the stroke effect.<\/li><li><code>text-stroke-color<\/code>, which takes a color value (hex, rgb\/rgba, hsl\/hsla, etcetera).<\/li><\/ol>\n\n\n\n<p><code>text-stroke<\/code> also has a companion property, <code>text-fill-color<\/code>, which will override the <code>color<\/code> property, allowing for a graceful fallback to a different text color in browsers that do not support <code>text-stroke<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_CBLnG\" src=https://css-tricks.com/"////codepen.io//anon//embed//CBLnG?height=350&amp;theme-id=1&amp;slug-hash=CBLnG&amp;default-tab=result\%22 height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed CBLnG\" title=\"CodePen Embed CBLnG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"points-of-interest\">Points of interest<\/h3>\n\n\n<ul><li>The stroke drawn by <code>text-stroke<\/code> is aligned to the center of the text shape (as is the default in Adobe Illustrator), and there is currently no option to set the alignment to the inside or outside of the shape. Unfortunately this makes it much less usable, as no matter what now the stroke interferes with the shape of the letter destroying the original type designers intent. A setting would be ideal, but if we had to pick one, outside stroke would have been much more useful.<\/li><li>in Webkit, <code>text-stroke<\/code> is animatable with CSS Transitions and Animations \u2013 but only the stroke color, not the stroke width.<\/li><li>A more browser-compatible (and arguably robust) stand-in for the <code>text-stroke<\/code> effect is using <code>text-shadow<\/code>, which is outlined in <a href=https://css-tricks.com/"https:////css-tricks.com//adding-stroke-to-web-text///">this CSS-Tricks article<\/a>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=https://css-tricks.com/"http:////caniuse.com//#feat=text-stroke\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">49*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">15*<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">3.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">126*<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127*<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">4.0-4.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////www.webkit.org//blog//85//introducing-text-stroke///" rel=\"noopener\">Surfin\u2019 Safari: Introducing Text-Stroke<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//adding-stroke-to-web-text///">Adding Stroke to Web Text<\/a><\/li><li><a href=https://css-tricks.com/"http:////www.westciv.com//tools//textStroke///" rel=\"noopener\">Live Editor<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>text-stroke is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14117"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14117"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14117\/revisions"}],"predecessor-version":[{"id":345854,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14117\/revisions\/345854"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14117"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}