search

inspirobot / jester

0 stars 0 forks source link

Pips on cards are not centred #2

Open inspirobot-npross opened 2 years ago

inspirobot-npross commented 2 years ago

Need someone who knows CSS to make the pips on the card all render from centers. The current positions seem to be aligned to the left of the glyph and the glyphs all have different amounts of padding so different suits appear at different positions...

simonthomson commented 2 years ago

I propose switching to the PNGs I created. They are all exactly 256 by 256 pixels.

jeffro426 commented 2 years ago

PNG images will not scale gracefully. Perhaps we could create perfectly square SVG files instead?

simonthomson commented 2 years ago

Yes, I'm good with that. I don't really know how to create svgs properly though

simonthomson commented 2 years ago

If you're interested Jeff, you could create some svgs for the suit symbols. These were the ones I came up with, but they are open to modification/discussion: cloud_symbol_256 club_symbol_256 cross_symbol_256 diamond_symbol_256 flower_symbol_256 heart_symbol_256 moon_symbol_256 spade_symbol_256 star_symbol_256 tree_symbol_256

jeffro426 commented 2 years ago

Happy to help! Yes, I can export these from Illustrator in SVG format and attach them to this thread.

jeffro426 commented 2 years ago

I will make sure they are perfectly square. I will use 256px by 256px artboards unless you'd prefer a different size.

jeffro426 commented 2 years ago

Please take a look at these SVG icons and let me know if they look OK. These are scaled to a square resolution 256px by 256px. Archive.zip

inspirobot-npross commented 2 years ago

@jeffro426 Is there a way they can be converted to vectors? I think these are just pngs in svg clothing. from inside the svg :(xlink:href="data:image/png;base64,)

jeffro426 commented 2 years ago

Definitely! Yes, I can convert the graphics to vector first and export new SVG files.

jeffro426 commented 2 years ago

I converted the artwork to vector and saved them in square SVG files Suits.zip

inspirobot-npross commented 2 years ago

@jeffro426 ok i know I'm getting picky but I uned to work in a company whose sole reason for existing was to make graphics and text look good on television for 2 decades...
When these get drawn by the browser at small sizes the anti-aliasing looks terrible.
I'm not sure why. Maybe the browser just sucks at antialiasing at small sizes. Font renders have all kinds of hinting and are optimized for drawing vectors at small sizes... so maybe there is no fixing it. Some of the svgs seem extra complicated (ie likely more lines and curves than actually necessary). Is there an option in illustrator to simplify curves and to make sure that it is using curves instead of a lot of line segments? I have no idea if this will improve the rendering or not...

Of course this is not a showstopper or anything... I am going to see how hard it is to make the cards render with these svgs and if it really drives me crazy in the future there is always the option to just render all the cards as pixel-perfect images...

jeffro426 commented 2 years ago

That's an interesting observation @inspirobot-npross !

I'd be glad to fix these vector images. Of course they look fine in my system .

Yes, I can remove any extra geometry. I let Illustrator convert the GIF to vector and deleted the white background tiles.

Do any of the icons scale properly or do they all show anti-aliasing?

I ask because some appeared to be vector based without background tiles (e.g., the spade, heart, club, and diamond suits).

inspirobot-npross commented 2 years ago

@jeffro426 I already manually removed the backgrounds. I'm not sure it made much difference. I will experiment some more.

jeffro426 commented 2 years ago

I tried a smaller scale version of the Suit icons at 52x52px which won't need to be rescaled as aggressively. Perhaps that will look cleaner.

I double checked for any extra geometry and the objects are clean and simple. The Blue Cloud had an artifact which I removed which likely wasn't visible in the Browser.

Suits_52x52.zip