Text Stroke: When And How To Use It

Text-stroke is an experimental CSS 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 W3C or WHATWG specification. The stroke property in CSS only works on SVG elements. However, there is a -webkit-text-stroke property that can be applied to regular text elements, but it is non-standard and not supported by Internet Explorer. As of 2024, Chrome, Firefox, Safari, and Edge support the -webkit-text-stroke property.

Text-stroke is an experimental property that provides text decoration options

Text-stroke is an experimental CSS property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It allows users to specify the width and colour of strokes for text characters, creating a decorative outline effect. This property is particularly useful when trying to achieve a specific text effect that cannot be accomplished with traditional text-shadow or text-underline properties.

The text-stroke property is a shorthand for two other properties: text-stroke-width and text-stroke-color. The text-stroke-width property describes the thickness of the stroke effect, while the text-stroke-color property specifies the colour of the stroke. Additionally, text-stroke has a companion property called text-fill-color, which allows for a graceful fallback to a different text colour in browsers that do not support text-stroke. This ensures that the text remains legible and aesthetically pleasing even when the text-stroke property is not applied.

While text-stroke provides a unique text decoration option, it is important to note that it is not currently included in any W3C or WHATWG specification. As of 2024, it is only implemented behind a -webkit vendor prefix, meaning it is only supported by web browsers that use the WebKit engine, such as Chrome and Safari. However, future versions of Firefox and Internet Explorer may support the property, likely under their own prefixes.

For cross-browser compatibility, developers can use a combination of CSS properties, such as text-shadow or -webkit-text-stroke, to achieve a similar text stroke effect. Additionally, there are JavaScript plugins, such as strokeText.js, that can be used to apply a text stroke to a wider range of browsers. It is worth noting that these alternative methods may not produce the exact same results as the text-stroke property, and some experimentation may be required to achieve the desired effect.

It is not included in any W3C or WHATWG specification

The CSS text-stroke property is not included in any W3C or WHATWG specification. It was briefly included in a specification as the "text-outline" property, but this was removed.

The text-stroke property is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It allows users to specify the outline (stroke) width and colour for text.

As of June 2013, text-stroke is only implemented behind a -webkit vendor prefix. This means that it is not supported by all browsers and requires a prefix to work in some browsers, such as Firefox and Internet Explorer.

While text-stroke is not included in any W3C or WHATWG specification, there are some workarounds and alternatives available. For example, users can use the non-standard -webkit-text-stroke property or wrap their text in an SVG element. Additionally, there are JavaScript plugins, such as strokeText.js, that can be used to add text strokes.

It's important to note that the stroke drawn by text-stroke is aligned to the centre of the text shape, which can interfere with the shape of the letters and the original type designer's intent. There is currently no option to set the alignment to the inside or outside of the shape.

It is supported by Chrome, Safari, Firefox, and Edge

Text-stroke is an experimental CSS property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is a method of declaring the outline width and colour for text.

While text-stroke is not currently included in any W3C or WHATWG specification, it is supported by Chrome, Safari, Firefox, and Edge. However, it is only implemented behind a -webkit vendor prefix. This means that to use the text-stroke property in these browsers, you need to use the -webkit-text-stroke property as follows:

Css

#example {

Font-size: 3em;

Margin: 0;

Webkit-text-stroke: 2px red;

}

In the code above, the -webkit-text-stroke property is used to specify a red text stroke with a width of 2px for text with a font size of 3em and a margin of 0.

It's important to note that the stroke drawn by text-stroke is aligned to the centre of the text shape, and there is currently no option to set the alignment to the inside or outside of the shape. This can make it less usable, as the stroke can interfere with the shape of the letters, destroying the original type designer's intent.

It is shorthand for text-stroke-width and text-stroke-colour

The text-stroke property is shorthand for text-stroke-width and text-stroke-colour. It 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 W3C or WHATWG specification. However, it can be implemented using a -webkit vendor prefix.

The text-stroke-width property describes the thickness of the stroke effect and takes unit values such as 1px, 0.125em, 4in, etc. The text-stroke-colour property, on the other hand, takes a colour value such as hex, rgb/rgba, hsl/hsla, etc.

For example, to add a 2px red stroke to text, you can use the following CSS:

Css

Mark { text-stroke: 2px red; }

In addition to text-stroke-width and text-stroke-color, there is also a companion property called text-fill-color. This property allows you to specify a fallback text colour for browsers that do not support text-stroke.

It is worth noting that the stroke drawn by text-stroke is aligned to the centre of the text shape, and there is currently no option to set the alignment to the inside or outside of the shape. This can make it less usable, as the stroke can interfere with the shape of the letter, destroying the original type designer's intent.

While text-stroke is not yet widely supported by browsers, it is expected that future versions of Firefox and Internet Explorer may support it, likely under their own prefixes.

It can be animated with CSS Transitions and Animations

The text-stroke property is an experimental feature that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any W3C or WHATWG specification.

The text-stroke property is actually shorthand for two other properties: text-stroke-width and text-stroke-color. The former describes the thickness of the stroke effect, while the latter determines the colour of the stroke.

In Webkit, text-stroke is animatable with CSS Transitions and Animations – but only the stroke colour, not the stroke width. This means that you can use CSS to animate the transition from one CSS style configuration to another.

CSS animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress.

For example, the animation-timing-function sub-property specifies how an animation transitions through keyframes by establishing acceleration curves. Meanwhile, the animation-direction sub-property specifies whether an animation should play forward or backward and whether subsequent iterations should alternate direction or reset to the start point and repeat.

By using CSS Transitions and Animations, you can make the text-stroke property dynamic and interactive, allowing you to change the colour of the stroke over time or in response to user interactions.

Frequently asked questions