Unwanted Different Strokes for Individual Letters - Chrome Only

Discuss SVG code, accessible via the XML Editor.
pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

Unwanted Different Strokes for Individual Letters - Chrome Only

Postby pipingdesigner » Thu Feb 16, 2017 4:12 am

I've searched for SVG forums but not having much success. Am I using the wrong keywords or something?

Anyway, I hope this is the right forum to post this question...

The stroke on only some letters is heavier than the other letters, and this occurs only with Google Chrome (Firefox and Safari look OK).

svg-text-stroke-oddity.jpg
svg-text-stroke-oddity.jpg (53.12 KiB) Viewed 964 times


Code is below, I realize it's, umm, "less than optimal" and I plan to clean it up later, but if I can't find a solution I'll drop this presentation:

CSS


Code: Select all

@font-face {
    font-family: 'Padaloma'; 'Impact';
    src: url('Padaloma.ttf');
    font-stretch:ultra-expanded;
    font-weight: bold;
}

a:active {color: yellow;}
a:focus {color: yellow;}

.text:focus {
  fill: yellow;
  text-decoration: none;
  stroke: #EEEEEE;
  stroke-width: 1;
  stroke-opacity: 1;
  text-shadow: 5px 5px 5px #000000;
}
.text:active {
  fill: yellow;
  text-decoration: none;
  stroke: #EEEEEE;
  stroke-width: 1;
  stroke-opacity: 1;
  text-shadow: 5px 5px 5px #000000;
}
.text:hover {
  fill: url(#p-fire);
  text-decoration: none;
  stroke: yellow;
  stroke-width: 1;
  stroke-opacity: 1;
  text-shadow: 5px 5px 5px #000000;
}
.text {
  fill: red;
  text-decoration: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-opacity: .5;
  text-shadow: 5px 5px 5px #666666;
}

body {
  background: #FFFFFF;
  background-size: .2em 100%;
  font: 2.5em/1 Padaloma;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}




HTML

Code: Select all

<a href="portfolio.html">
  <svg viewBox="0 0 600 300">

  <!-- Pattern -->
  <pattern
           id="p-fire"
           viewBox="30 100 186 200"
           patternUnits="userSpaceOnUse"
           width="216" height="400"
           x="-70" y="35">

    <!-- Fire -->
    <image xlink:href="jlr-bg.gif" width="256" height="300"/>
  </pattern>

  <!-- Text -->
  <a href="portfolio.html"><text text-anchor="middle"
        x="50%"
        y="50%"
        dy=".35em"
        class="text">PORTFOLIO</text></a>

</svg>

</a>

pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

Re: Unwanted Different Strokes for Individual Letters - Chrome Only

Postby pipingdesigner » Thu Feb 16, 2017 5:56 am

Aaarrrghhh! Please disregard this question. I had some text-shadow properties wrong, then corrected them for this post and then fell victim to server caching (i.e., I'd fixed it but was still seeing the cache).

I do wonder why this part isn't working, though, but that's probably not related to SVG:

Code: Select all

a:active {color: yellow;}
a:focus {color: yellow;}

Sorry,

Paul

PS http://shouldiblamecaching.com/

pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

Re: Unwanted Different Strokes for Individual Letters - Chrome Only

Postby pipingdesigner » Thu Feb 16, 2017 6:29 am

Aaaaaand, now I look like an idiot, because the weirdness is back with the text stroke issue!

WTF?

tylerdurden
Posts: 1830
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Unwanted Different Strokes for Individual Letters - Chrome Only

Postby tylerdurden » Thu Feb 16, 2017 7:17 am

I'd convert the text to paths and see how it looks.

(I'm wary of using actual stylized fonts in webpages and out of house print jobs, you never know if the viewer/printer has the same fonts.)
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

Re: Unwanted Different Strokes for Individual Letters - Chrome Only

Postby pipingdesigner » Thu Feb 16, 2017 8:08 am

Thanks, I'll give that a try, it's worth a shot. And that's where Inkscape comes in!

And the new odd thing is now that I've added the word 'view' to the original text, different letters ('V' and 'W') are acting badly!

view-portfolio.jpg
view-portfolio.jpg (32.54 KiB) Viewed 911 times

Since it only occurs with Chrome, maybe Google doesn't like the font and is randomly punishing it.

pipingdesigner
Posts: 12
Joined: Sat Nov 12, 2016 11:27 pm

Re: Unwanted Different Strokes for Individual Letters - Chrome Only

Postby pipingdesigner » Fri Feb 17, 2017 2:58 am

Aaaaand...

On a different (non-Retina) Mac laptop all the text looks fine with Chrome.

If I move the Chrome browser window from my own Mac laptop's (Retina) screen to a second external (non-Retina) monitor, the text shows up fine. When I move the Chrome window back to the laptop's screen - the text stroke weirdness returns. I clear the 'Cached Images and Files' on the Chrome browser and now yet another set of letters are wonky.

I now have NO IDEA what's going on. Rebooting didn't fix it so I'm blaming this on Russian Hackerz.

Moini
Posts: 2236
Joined: Mon Oct 05, 2015 10:44 am

Re: Unwanted Different Strokes for Individual Letters - Chrome Only

Postby Moini » Fri Feb 17, 2017 3:03 am

Aliasing, maybe?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

tylerdurden
Posts: 1830
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Unwanted Different Strokes for Individual Letters - Chrome Only

Postby tylerdurden » Fri Feb 17, 2017 3:59 am

Maybe a bit dated, but some interesting reading on font rendering (extensive):
https://www.smashingmagazine.com/2012/0 ... rendering/

PS: AIUI, a common fallback is to convert the text to an image.
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/


Return to “SVG / XML Code”

Who is online

Users browsing this forum: No registered users and 1 guest