Background
Chrome for Android doesn't support the CSS first-letter
selector for text
elements. I've created a very simple SVG to demonstrate the problem. On a desktop browser you'll see three sizes of text, created via the first-of-type
and first-letter
selectors. On Firefox for Android you'll see the same thing. On Chrome though, there will only be two sizes displayed.
CODE
CSS:
text {
font-size:50px;
}
text:first-of-type {
font-size:70px;
}
text:first-letter {
font-size:90px;
}
HTML:
<svg version="1.1" baseProfile="full" width="520" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<text x="0" y="80">MY WORDS</text>
<text x="0" y="160">MY WORDS</text>
</svg>
LIVE RESULT:
SCREENSHOT FROM CHROME (ANDROID):
Question
My question is this, is there any easy workaround other than just splitting the words into multiple text
elements and applying the size to each one?
<foreignObject>
tag.<foreignObject><div>
to replace<text>
and it works beautifully! However, it doesn't work in IE on the desktop. There is a<switch>
element though, which might let me use both? I'm going to investigate further. Appreciate the help.