Issue with CSS - Problem with Text Stroke (-webkit-text-stroke)

Question

Issue with CSS - Problem with Text Stroke (-webkit-text-stroke)

I've been working on a personal project using NextJs and TailwindCSS. Upon completion, I decided to check my progress using different browsers only to discover that the text stroke effect is not displaying properly in all browsers except Chrome.

Here's what I'm experiencing:

https://i.sstatic.net/7lXgc.jpg

Here's the desired outcome:

https://i.sstatic.net/JxV6H.jpg

Below is the code snippet used:

<div className="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

CSS styling applied:

.outline-title {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

If anyone can explain this issue or provide guidance on how to resolve it, I would greatly appreciate it.

Current browser compatibility is shown here: https://i.sstatic.net/kN0te.jpg

css sass next.js frontend tailwind-css

Answer 1

Answer №1

`-webkit-text-stroke` and Variable Fonts Compatibility Issues

Update 2024: Solution with `paint-order`

Credit goes to HyoukJoon Lee's solution on "CSS Font Border?". The use of the SVG property paint-order for HTML text elements is supported by major rendering engines, resolving issues with variable fonts.

...

Reasoning Behind Rendering Challenges in Variable Fonts

The complexity of glyph construction in variable fonts leads to challenges with outline rendering using webkit-text-stroke, particularly due to seamless weight and width interpolations.

...

Solution: Opt for Static Font Versions

In cases of compatibility issues, consider using non-variable versions of the font like 'InterStatic' available on GitHub.

...

Workaround: JavaScript-Based Replacement Using SVG

An alternative method involves converting HTML elements to SVG text for greater control over stroke rendering, especially useful when facing challenges with -webkit-text-stroke.

...

Note:

Minor layout shifts may occur due to word splitting.
Changes to width-related properties won't automatically update without recalculating viewBox values.

Features:

Selectable text with retained formatting from parent elements
Responsive text behavior during resizing and font adjustments

Answer 2

`-webkit-text-stroke` and Variable Fonts Compatibility Issues

Update 2024: Solution with `paint-order`

Credit goes to HyoukJoon Lee's solution on "CSS Font Border?". The use of the SVG property paint-order for HTML text elements is supported by major rendering engines, resolving issues with variable fonts.

...

Reasoning Behind Rendering Challenges in Variable Fonts

The complexity of glyph construction in variable fonts leads to challenges with outline rendering using webkit-text-stroke, particularly due to seamless weight and width interpolations.

...

Solution: Opt for Static Font Versions

In cases of compatibility issues, consider using non-variable versions of the font like 'InterStatic' available on GitHub.

...

Workaround: JavaScript-Based Replacement Using SVG

An alternative method involves converting HTML elements to SVG text for greater control over stroke rendering, especially useful when facing challenges with -webkit-text-stroke.

...

Note:

Minor layout shifts may occur due to word splitting.
Changes to width-related properties won't automatically update without recalculating viewBox values.

Features:

Selectable text with retained formatting from parent elements
Responsive text behavior during resizing and font adjustments

Answer 3

Answer №2

Some browsers do not support the -webkit-text-stroke property due to compatibility issues. One alternative is to use text shadows to achieve a similar outline effect.

I hope this solution works for you!

.outline-title {
font-family: sans-serif;
   color: white;
   text-shadow:
       1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000;
      font-size: 50px;
}

<div class="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

---- UPDATE ---

https://i.sstatic.net/2HQLN.png

Answer 4

Some browsers do not support the -webkit-text-stroke property due to compatibility issues. One alternative is to use text shadows to achieve a similar outline effect.

I hope this solution works for you!

.outline-title {
font-family: sans-serif;
   color: white;
   text-shadow:
       1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000;
      font-size: 50px;
}

<div class="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

---- UPDATE ---

https://i.sstatic.net/2HQLN.png

Answer 5

Answer №3

One way to achieve this is by overlaying a duplicate of the text over the existing text. This method typically yields satisfactory outcomes:

By utilizing pseudo-elements, you can achieve the same result without adding an extra element to your HTML markup:

.broken {
  -webkit-text-stroke: 2px black;
}

.fixed {
  position: relative;
  /* The stroke width should be doubled to account for the covered area */
  -webkit-text-stroke: 4px black;
}
/* Display a second instance of the text on top of the original */
.fixed::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  -webkit-text-stroke: 0;
  pointer-events: none;
}


div { font-family: 'Inter var'; color: white; }
/* (optional) tweaks to align the shapes produced by both methods better */
.broken { font-weight: 800; font-size: 40px; }
.fixed { font-weight: 600; font-size: 39px; letter-spacing: 1.2px; }

<link href="https://rsms.me/inter/inter.css" rel="stylesheet">

Before:
<div class="broken">
  Values &amp; Process
</div>

After:
<div class="fixed" data-text="Values &amp; Process">
  Values &amp; Process
</div>

It's worth noting that using an additional element may be more beneficial for accessibility compared to employing a pseudo-element. With a separate element, you can apply aria-hidden to prevent screen readers from reading the text multiple times.

An example illustrating the concept:

.broken {
  -webkit-text-stroke: 2px black;
}

.fixed {
  position: relative;
  /* The stroke width should be doubled as half will be hidden under the original text */
  -webkit-text-stroke: 4px black;
}
/* Overlay the duplicated text atop the original one */
.fixed span {
  position: absolute;
  left: 0;
  -webkit-text-stroke: 0;
  pointer-events: none;
}


div { font-family: 'Inter var'; color: white; }
/* (optional) adjustments to make the two approaches produce more similar shapes */
.broken { font-weight: 800; font-size: 40px; }
.fixed { font-weight: 600; font-size: 39px; letter-spacing: 1.2px; }

<link href="https://rsms.me/inter/inter.css" rel="stylesheet">

Before:
<div class="broken">
  Values &amp; Process
</div>

After:
<div class="fixed">
  Values &amp; Process
  <span aria-hidden="true">Values &amp; Process</span>
</div>

Answer 6

One way to achieve this is by overlaying a duplicate of the text over the existing text. This method typically yields satisfactory outcomes:

By utilizing pseudo-elements, you can achieve the same result without adding an extra element to your HTML markup:

.broken {
  -webkit-text-stroke: 2px black;
}

.fixed {
  position: relative;
  /* The stroke width should be doubled to account for the covered area */
  -webkit-text-stroke: 4px black;
}
/* Display a second instance of the text on top of the original */
.fixed::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  -webkit-text-stroke: 0;
  pointer-events: none;
}


div { font-family: 'Inter var'; color: white; }
/* (optional) tweaks to align the shapes produced by both methods better */
.broken { font-weight: 800; font-size: 40px; }
.fixed { font-weight: 600; font-size: 39px; letter-spacing: 1.2px; }

<link href="https://rsms.me/inter/inter.css" rel="stylesheet">

Before:
<div class="broken">
  Values &amp; Process
</div>

After:
<div class="fixed" data-text="Values &amp; Process">
  Values &amp; Process
</div>

It's worth noting that using an additional element may be more beneficial for accessibility compared to employing a pseudo-element. With a separate element, you can apply aria-hidden to prevent screen readers from reading the text multiple times.

An example illustrating the concept:

.broken {
  -webkit-text-stroke: 2px black;
}

.fixed {
  position: relative;
  /* The stroke width should be doubled as half will be hidden under the original text */
  -webkit-text-stroke: 4px black;
}
/* Overlay the duplicated text atop the original one */
.fixed span {
  position: absolute;
  left: 0;
  -webkit-text-stroke: 0;
  pointer-events: none;
}


div { font-family: 'Inter var'; color: white; }
/* (optional) adjustments to make the two approaches produce more similar shapes */
.broken { font-weight: 800; font-size: 40px; }
.fixed { font-weight: 600; font-size: 39px; letter-spacing: 1.2px; }

<link href="https://rsms.me/inter/inter.css" rel="stylesheet">

Before:
<div class="broken">
  Values &amp; Process
</div>

After:
<div class="fixed">
  Values &amp; Process
  <span aria-hidden="true">Values &amp; Process</span>
</div>

Answer 7

Answer №4

Dealing with a similar issue involving the 'Nunito' font, I found a solution that worked for me:

First step is to download a font editor -
Once you have the font editor, open your font in it
Select all by pressing Ctrl + A
In the editor's menu, go to Element > Overlap > Union
After making the necessary changes, save the new version of the font

You can see an example of how the font looks after these modifications here: https://i.sstatic.net/zgPbd.png

To learn more about why this bug occurs and how to fix it, check out this post: https://github.com/rsms/inter/issues/292#issuecomment-674993644

Answer 8

Dealing with a similar issue involving the 'Nunito' font, I found a solution that worked for me:

First step is to download a font editor -
Once you have the font editor, open your font in it
Select all by pressing Ctrl + A
In the editor's menu, go to Element > Overlap > Union
After making the necessary changes, save the new version of the font

You can see an example of how the font looks after these modifications here: https://i.sstatic.net/zgPbd.png

To learn more about why this bug occurs and how to fix it, check out this post: https://github.com/rsms/inter/issues/292#issuecomment-674993644

Answer 9

Answer №5

This problem arises when variable-width fonts are used in specific browsers. The reason behind this issue remains unclear to me

Explore more about this topic here.

Answer 10

This problem arises when variable-width fonts are used in specific browsers. The reason behind this issue remains unclear to me

Explore more about this topic here.

Answer 11

Answer №6

My strategy for handling this situation is as follows:

Include 2 texts, with one overlapping the other using absolute positioning
Enclose both texts in a relative container

Here is an example code snippet (suitable for use with NextJs and TailwindCSS):

import { ComponentProps } from 'react'

export const TextWithStroke = ({ text, ...props }: ComponentProps<'div'> & { text: string }) => {
      return (
        <div
          {...props}
          style={{
            position: 'relative',
            ...props.style
          }}>
          <p className="text-stroke">{text}</p>
          <p className="top-0 absolute">{text}</p>
        </div>
      )
    }

The class text-stroke refers to the property -webkit-text-stroke, which I have defined in a global CSS file like this:

@layer utilities {
    .text-stroke {
        -webkit-text-stroke: 5px #4DDE4D;
    }
}

This setup produces the following result:
https://i.sstatic.net/2iAZ6.png

Answer 12

My strategy for handling this situation is as follows:

Include 2 texts, with one overlapping the other using absolute positioning
Enclose both texts in a relative container

Here is an example code snippet (suitable for use with NextJs and TailwindCSS):

import { ComponentProps } from 'react'

export const TextWithStroke = ({ text, ...props }: ComponentProps<'div'> & { text: string }) => {
      return (
        <div
          {...props}
          style={{
            position: 'relative',
            ...props.style
          }}>
          <p className="text-stroke">{text}</p>
          <p className="top-0 absolute">{text}</p>
        </div>
      )
    }

The class text-stroke refers to the property -webkit-text-stroke, which I have defined in a global CSS file like this:

@layer utilities {
    .text-stroke {
        -webkit-text-stroke: 5px #4DDE4D;
    }
}

This setup produces the following result:
https://i.sstatic.net/2iAZ6.png

Answer 13

Answer №7

The issue lies in the default font (inter) that is included with next.js. Unfortunately, Google Inter font is not compatible with this. The solution is to simply switch to a different font family.

For example, you can use font-serif like so:

<div className="outline-title pb-2 text-9xl font-bold text-center mb-12 mt-8 font-serif">
      Values &amp; Process
    </div>

Answer 14

The issue lies in the default font (inter) that is included with next.js. Unfortunately, Google Inter font is not compatible with this. The solution is to simply switch to a different font family.

For example, you can use font-serif like so:

<div className="outline-title pb-2 text-9xl font-bold text-center mb-12 mt-8 font-serif">
      Values &amp; Process
    </div>

Answer 15

Answer №8

When I encountered similar difficulties while utilizing Montserrat, I found myself in need of displaying the background instead of the text color with a white stroke. The information provided by @herrstrietzel was quite beneficial. Initially, I was uncertain about how to render the text color transparent without revealing awkward joints in the font. My solution involved using the paint-order property.

paint-order: stroke fill;

Subsequently, I discovered that by specifying an RGBA color and adjusting the opacity to a level that accentuates the background while maintaining a sense of transparency in the text color, I was able to achieve my desired outcome.

https://i.sstatic.net/oJIoY8tA.png

In this case, I selected a color from the background and fine-tuned its opacity to ensure that the background is perceptible to some extent.

Utilizing the RGBA color prevented the peculiar curves that appear when employing the transparent color value.

https://i.sstatic.net/wjZZco9Y.png

Answer 16

When I encountered similar difficulties while utilizing Montserrat, I found myself in need of displaying the background instead of the text color with a white stroke. The information provided by @herrstrietzel was quite beneficial. Initially, I was uncertain about how to render the text color transparent without revealing awkward joints in the font. My solution involved using the paint-order property.

paint-order: stroke fill;

Subsequently, I discovered that by specifying an RGBA color and adjusting the opacity to a level that accentuates the background while maintaining a sense of transparency in the text color, I was able to achieve my desired outcome.

https://i.sstatic.net/oJIoY8tA.png

In this case, I selected a color from the background and fine-tuned its opacity to ensure that the background is perceptible to some extent.

Utilizing the RGBA color prevented the peculiar curves that appear when employing the transparent color value.

https://i.sstatic.net/wjZZco9Y.png

Answer 17

Answer №9

There was a similar issue I encountered in the past, I had initially set 'Montserrat' as my main font but then mistakenly applied Another font to one of the elements. However, switching from 'Montserrat' to 'Poppins' resolved the problem :P

Answer 18

There was a similar issue I encountered in the past, I had initially set 'Montserrat' as my main font but then mistakenly applied Another font to one of the elements. However, switching from 'Montserrat' to 'Poppins' resolved the problem :P

Issue with CSS - Problem with Text Stroke (-webkit-text-stroke)

Answer №1

`-webkit-text-stroke` and Variable Fonts Compatibility Issues

Update 2024: Solution with `paint-order`

Reasoning Behind Rendering Challenges in Variable Fonts

Solution: Opt for Static Font Versions

Workaround: JavaScript-Based Replacement Using SVG

Note:

Features:

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Issue: A problem occurred with the function (0, USe.isError) during the initialization of Prisma in a NEXT.js application with PostgreSQL

Explore a variety of themes for the antd design token

Oops! There seems to be a server error with the PDFDownloadLink API. It appears that you are trying to use this web-specific API on Node, or perhaps your bundler is not loading react-pdf properly

The title attribute in Vue3 is updated through props, but computed properties remain unaffected

The Vercel Edge Runtime's Notion API is returning a 400 status code

Error with Firebase. Make sure the URL for your Firebase Realtime Database instance is set up correctly

Tips on presenting our data using JSON structure

Using img-fluid in CSS to dynamically resize database-supplied images, providing a consistent and optimized viewing

Can an error be thrown from a catch block within a Promise in a NodeJs environment?

Is there a way to align this button perfectly with the textboxes?

Shifting and implementing various styles across numerous elements at the same time

Bug with the button and text input feature in Firefox

What is the solution to eliminating the horizontal scroll bar on a responsive website?

Invoke a function using the output of a different function

Can the React Context API in a NextJS application disrupt the Static Site Generator functionality?

Issue with importing CSS file in Vaadin Java

What steps can be taken to address the build problem with Angular version 13?

The hover effect disappears when the mouse is on the edge

Switch the CSS class for the currently selected link

"Mastering the art of CSS: when the cascade goes

Issue with CSS - Problem with Text Stroke (-webkit-text-stroke)

Answer №1

-webkit-text-stroke and Variable Fonts Compatibility Issues

Update 2024: Solution with paint-order

Reasoning Behind Rendering Challenges in Variable Fonts

Solution: Opt for Static Font Versions

Workaround: JavaScript-Based Replacement Using SVG

Note:

Features:

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Issue: A problem occurred with the function (0, USe.isError) during the initialization of Prisma in a NEXT.js application with PostgreSQL

Explore a variety of themes for the antd design token

Oops! There seems to be a server error with the PDFDownloadLink API. It appears that you are trying to use this web-specific API on Node, or perhaps your bundler is not loading react-pdf properly

The title attribute in Vue3 is updated through props, but computed properties remain unaffected

The Vercel Edge Runtime's Notion API is returning a 400 status code

Error with Firebase. Make sure the URL for your Firebase Realtime Database instance is set up correctly

Tips on presenting our data using JSON structure

Using img-fluid in CSS to dynamically resize database-supplied images, providing a consistent and optimized viewing

Can an error be thrown from a catch block within a Promise in a NodeJs environment?

Is there a way to align this button perfectly with the textboxes?

Shifting and implementing various styles across numerous elements at the same time

Bug with the button and text input feature in Firefox

What is the solution to eliminating the horizontal scroll bar on a responsive website?

Invoke a function using the output of a different function

Can the React Context API in a NextJS application disrupt the Static Site Generator functionality?

Issue with importing CSS file in Vaadin Java

What steps can be taken to address the build problem with Angular version 13?

The hover effect disappears when the mouse is on the edge

Switch the CSS class for the currently selected link

"Mastering the art of CSS: when the cascade goes

`-webkit-text-stroke` and Variable Fonts Compatibility Issues

Update 2024: Solution with `paint-order`