voteliquid / demo

Interactive demo to visualize liquid democracy in action
https://demo.liquid.us
4 stars 0 forks source link

Name bg rectangles are not the correct width #16

Open dsernst opened 8 years ago

dsernst commented 8 years ago

The translucent white rectangles shown behind voter names are only approximately the correct width. But some of them are too wide and sometimes too narrow. It looks a bit buggy.

Too long:

too long

Too short:

too short
dsernst commented 8 years ago

This is because the width of the background rectangles is set by string.length * 5 pixels, but not all letters are the same width (iii vs www).

dsernst commented 8 years ago

Last night I tried to fix this with a monospace font (Lucida Console), but it did not look good, and didn't really work anyway. Perhaps a better monospace font could work, but browser compatibility is something to keep in mind.

dsernst commented 8 years ago

A better fix would be to properly grab the text's bounding box to use for width: http://stackoverflow.com/questions/32026194/how-to-add-a-background-color-to-d3-text-elements