Jump to content
Search Community

text-stroke hack

friendlygiraffe test
Moderator Tag

Recommended Posts

I'm looking for a reliable way to stroke text, without using text-stroke, because it's not cross-browser:

 



I found this thread from nearly 10 years ago, but it seems nothing much has moved on since then

 

Is there anything else I can try? 

 

I'm tried to use Daniel Riemer's text-shadow hack: 

See the Pen AvKvde by GreenSock (@GreenSock) on CodePen

 which is great, but not for overlapping letters

 

Thanks

See the Pen mdxXwXO by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

Even if it's prefixed, it seems to be very much cross-browser to me, as even FF uses -webkit-

 

There might be other options like going with svg or canvas, but you would need to help us understand what it is you want to achieve somewhat better to suggest something. 

Link to comment
Share on other sites

5 minutes ago, iDad5 said:

Even if it's prefixed, it seems to be very much cross-browser to me, as even FF uses -webkit-

 

There might be other options like going with svg or canvas, but you would need to help us understand what it is you want to achieve somewhat better to suggest something. 

oh really? I was just going by this https://caniuse.com/text-stroke

Link to comment
Share on other sites

Me too, 97.68% seems pretty high to me, and as the prefix is the same for all supporting browsers as far as I can see, it's not really 'standard' in a legal way, but it could be used I guess, especially as I don't expect it to be unusable if not displayed.

Link to comment
Share on other sites

12 minutes ago, iDad5 said:

Me too, 97.68% seems pretty high to me, and as the prefix is the same for all supporting browsers as far as I can see, it's not really 'standard' in a legal way, but it could be used I guess, especially as I don't expect it to be unusable if not displayed.

 

I just tried text-stroke, prefixed, in IE11. No luck for me

Link to comment
Share on other sites

I went down the -text-stroke route, even though it is experimental, but doesn't seem to like strokes on the outside of text.

However, I found a trick using pseudo-elements:

 

See the Pen MWVQGoN by friendlygiraffe (@friendlygiraffe) on CodePen

 

My question now is, can SplitText handle this method? Looks like it isn't a good approach

Link to comment
Share on other sites

I wouldn't put it behind @GreenSock that he could find a solution, but to us mere mortals, the elements generated via ::before etc. aren't usually accessible by script. 
You could try a workaround through changing the title attribute on the fly, and setting classes to the spilt elements (
newClass parameter) and maybe do a little CSS-custom-properties rain-dance. I would jut go back to your first solution if I where you, if it's still working four you....

  • Like 2
Link to comment
Share on other sites

7 minutes ago, friendlygiraffe said:

Really appreciate you having a go! But the letters overlap which was my original headache. Thanks though:

@Cassie You are a true legend Milady (seems to be a thing around here lately...) 

@friendlygiraffe That thing with overlapping letters made me do a little rain-dance....

 

See the Pen jOzZpRp by mdrei (@mdrei) on CodePen

  • Haha 1
Link to comment
Share on other sites

See the Pen GRxQXZO by mdrei (@mdrei) on CodePen

 

that's what --dist-correction is for. You could do a lot of fine-tunin of course by introducing mor complex logic.

And kernig as it is still is more or less whishful-thinking in web typography - but hey there as fine libraries out there and you could try to build your own kerning-table for each character, after all you can easily get the content of each div and fine-tune with a CSS custom property (or two) for each character.

:-)

Link to comment
Share on other sites

10 hours ago, iDad5 said:

 

 

 

that's what --dist-correction is for. You could do a lot of fine-tunin of course by introducing mor complex logic.

And kernig as it is still is more or less whishful-thinking in web typography - but hey there as fine libraries out there and you could try to build your own kerning-table for each character, after all you can easily get the content of each div and fine-tune with a CSS custom property (or two) for each character.

:-)

 

Alas, that overlaps too 🤔

 

 

 test2.jpg

 

Link to comment
Share on other sites

4 minutes ago, friendlygiraffe said:

Alas, that overlaps too 🤔

Well that depends on your tween, and will likely look the same (during animation) with any other variant where you tween lets the characters grow without moving them apart first. Or you could animate the stroke width too....
The expectation that everything is readable during animation is somewhat strange in my thinking.

But it is you project and no one wants to convince you of anything - we just provided ideas.

@Cassie's way of solving your pseudo-element solution is really a great prove of a concept, that probably wasn't (in her own words) a 'good' approach from the start. But it is working quite well in my eyes. If you have specific questions I can help with, feel free to ask, but with comments like you last one, I don't really know what to do. :-)
 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...