friendlygiraffe Posted August 2, 2022 Share Posted August 2, 2022 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 More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 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 More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 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 More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 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 More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 I found a pretty good way of doing it by duplicating the text into 2 layers: See the Pen ExEQvmK by friendlygiraffe (@friendlygiraffe) on CodePen Separate question really, but I would like to run split1 and split2 on one line of code. I tried [split1.chars, split2.chars] but it ran them one after the other.... 1 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 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 More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 Yup, IE 11 Is dead for me., for Microsoft and largely the rest of the world. If you feel or have to feel otherwise that's tough for you. 1 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 Perhaps I should've posted this in Banner forum, but isn't IE11 still available to Google DCM / Doubleclick studio? Link to comment Share on other sites More sharing options...
Cassie Posted August 2, 2022 Share Posted August 2, 2022 I mean it's deprecated now - Microsoft declared it dead and unsupported so I'd hope not? But yeah - probably a question for the banner people. 2 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 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 More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 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.... 2 Link to comment Share on other sites More sharing options...
Cassie Posted August 2, 2022 Share Posted August 2, 2022 This was a good bedtime challenge. That was fun 😂 I don't know if I'd call this a 'good' approach though. See the Pen VwXQBmw?editors=1111 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 6 minutes ago, Cassie said: This was a good bedtime challenge. That was fun 😂 I don't know if I'd call this a 'good' approach though. Really appreciate you having a go! But the letters overlap which was my original headache. Thanks though 2 Link to comment Share on other sites More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 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 1 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 3 minutes ago, iDad5 said: @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.... Thanks again, but the outer stroke needs to be bigger and retain tight kerning Link to comment Share on other sites More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 You can manipulate the values of --bold-stroke: 0.25em; --stroke: 0.11em; --dist-correction: .1em; That should get you close (enough) to what you need Link to comment Share on other sites More sharing options...
friendlygiraffe Posted August 2, 2022 Author Share Posted August 2, 2022 5 minutes ago, iDad5 said: You can manipulate the values of --bold-stroke: 0.25em; --stroke: 0.11em; --dist-correction: .1em; That should get you close (enough) to what you need Yes, unfortunately it pushes the letter apart Link to comment Share on other sites More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 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 More sharing options...
friendlygiraffe Posted August 3, 2022 Author Share Posted August 3, 2022 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 🤔 Link to comment Share on other sites More sharing options...
iDad5 Posted August 3, 2022 Share Posted August 3, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now