metacran / metacranweb

Web pages for metacran
http://www.r-pkg.org
13 stars 6 forks source link

"Not published" badge has too much horizontal padding #85

Open hadley opened 7 years ago

hadley commented 7 years ago

e.g. http://www.r-pkg.org/badges/version/pkgdown

gaborcsardi commented 7 years ago

Wait, when you say vertical padding, is that horizontal padding? I mean, padding on the left and right?

Because the height of the badge is (should be) exactly the same as other badges, 20px. The text font and size is also the same as for other https://shields.io badges: 11pt, DejaVu Sans, Verdana, Geneva, sans-serif.

Or maybe the SVG rendering is not right in your browser? If you suspect that this is the case, can you post a PNG screenshot with this and other badges, instead of the SVG?

hadley commented 7 years ago

Sorry, yes, there's excess padding to the left and right of "not published"

gaborcsardi commented 7 years ago

OK, I think it is better now. Spacing is quite hacky, unfortunately, I am trying to set the width based on a string...

hadley commented 7 years ago

You might be able to use gdtools::str_metrics() to help

gaborcsardi commented 7 years ago

@hadley The SVG is rendered in the browser, with the fonts you have, so imo the only solution is a server side SVG library that converts the text to paths. Then padding will be correct and the SVG will look the same everywhere.

I should just look at what shields.io is doing, really....

hadley commented 7 years ago

But you're presumably choosing a common font that most browsers have. You can also set the svg textWidth property