I am using this solution:
Text Stroke (-webkit-text-stroke) css Problem
To solve an issue where certain fonts do not display the -webkit-text-stroke properly.
The solution involves overlaying an CSS ::after tag with basically a copy of the text to cover up the inconsistencies.
Here is an example:
.test {
font-family: "Arial";
font-weight: 800;
font-size: 60px !important;
color: rgb(0,0,0);
-webkit-text-stroke: 5.75px rgb(255,9,0) !important;
background-color: null;
text-shadow: 1.68px 1.68px rgb(255 208 130);
text-transform: inherit !important;
top: 0px;
position:relative;
}
.test::after {
content: attr(data-text);
position: absolute;
left: 0;
-webkit-text-stroke: 0;
color: rgb(0,0,0);
pointer-events: none;
margin: inherit;
padding: inherit;
font-size: inherit;
text-shadow: none;
top: inherit;
}<div class="test" data-text="Pickles">
Pickles
</div>This works fine until a quote is put into the attribute which will break it.
Here is what happens when you add a quote:
.test {
font-family: "Arial";
font-weight: 800;
font-size: 60px !important;
color: rgb(0,0,0);
-webkit-text-stroke: 5.75px rgb(255,9,0) !important;
background-color: null;
text-shadow: 1.68px 1.68px rgb(255 208 130);
text-transform: inherit !important;
top: 0px;
position:relative;
}
.test::after {
content: attr(data-text);
position: absolute;
left: 0;
-webkit-text-stroke: 0;
color: rgb(0,0,0);
pointer-events: none;
margin: inherit;
padding: inherit;
font-size: inherit;
text-shadow: none;
top: inherit;
}<div class="test" data-text=""Pickles">
"Pickles
</div>How can I add a quote into the data attribute or any other special characters for that matter so that the CSS will read it properly?
I have tried escaping it and I have tried to use encodeURI(); but neither of these is working for me.
