{"action":"created","issue":{"url":"https://api.github.com/repos/pkraker/Headstart/issues/67","repository_url":"https://api.github.com/repos/pkraker/Headstart","labels_url":"https://api.github.com/repos/pkraker/Headstart/issues/67/labels{/name}","comments_url":"https://api.github.com/repos/pkraker/Headstart/issues/67/comments","events_url":"https://api.github.com/repos/pkraker/Headstart/issues/67/events","html_url":"https://github.com/pkraker/Headstart/issues/67","id":171752797,"number":67,"title":"viewBox continously scales text in foreignObject as if it were an image","user":{"login":"pkraker","id":6399997,"avatar_url":"https://avatars.githubusercontent.com/u/6399997?v=3","gravatar_id":"","url":"https://api.github.com/users/pkraker","html_url":"https://github.com/pkraker","followers_url":"https://api.github.com/users/pkraker/followers","following_url":"https://api.github.com/users/pkraker/following{/other_user}","gists_url":"https://api.github.com/users/pkraker/gists{/gist_id}","starred_url":"https://api.github.com/users/pkraker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pkraker/subscriptions","organizations_url":"https://api.github.com/users/pkraker/orgs","repos_url":"https://api.github.com/users/pkraker/repos","events_url":"https://api.github.com/users/pkraker/events{/privacy}","received_events_url":"https://api.github.com/users/pkraker/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/pkraker/Headstart/labels/bug","name":"bug","color":"fc2929"},{"url":"https://api.github.com/repos/pkraker/Headstart/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":{"login":"pkraker","id":6399997,"avatar_url":"https://avatars.githubusercontent.com/u/6399997?v=3","gravatar_id":"","url":"https://api.github.com/users/pkraker","html_url":"https://github.com/pkraker","followers_url":"https://api.github.com/users/pkraker/followers","following_url":"https://api.github.com/users/pkraker/following{/other_user}","gists_url":"https://api.github.com/users/pkraker/gists{/gist_id}","starred_url":"https://api.github.com/users/pkraker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pkraker/subscriptions","organizations_url":"https://api.github.com/users/pkraker/orgs","repos_url":"https://api.github.com/users/pkraker/repos","events_url":"https://api.github.com/users/pkraker/events{/privacy}","received_events_url":"https://api.github.com/users/pkraker/received_events","type":"User","site_admin":false},"assignees":[{"login":"pkraker","id":6399997,"avatar_url":"https://avatars.githubusercontent.com/u/6399997?v=3","gravatar_id":"","url":"https://api.github.com/users/pkraker","html_url":"https://github.com/pkraker","followers_url":"https://api.github.com/users/pkraker/followers","following_url":"https://api.github.com/users/pkraker/following{/other_user}","gists_url":"https://api.github.com/users/pkraker/gists{/gist_id}","starred_url":"https://api.github.com/users/pkraker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pkraker/subscriptions","organizations_url":"https://api.github.com/users/pkraker/orgs","repos_url":"https://api.github.com/users/pkraker/repos","events_url":"https://api.github.com/users/pkraker/events{/privacy}","received_events_url":"https://api.github.com/users/pkraker/received_events","type":"User","site_admin":false},{"login":"Bubblbu","id":6946077,"avatar_url":"https://avatars.githubusercontent.com/u/6946077?v=3","gravatar_id":"","url":"https://api.github.com/users/Bubblbu","html_url":"https://github.com/Bubblbu","followers_url":"https://api.github.com/users/Bubblbu/followers","following_url":"https://api.github.com/users/Bubblbu/following{/other_user}","gists_url":"https://api.github.com/users/Bubblbu/gists{/gist_id}","starred_url":"https://api.github.com/users/Bubblbu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bubblbu/subscriptions","organizations_url":"https://api.github.com/users/Bubblbu/orgs","repos_url":"https://api.github.com/users/Bubblbu/repos","events_url":"https://api.github.com/users/Bubblbu/events{/privacy}","received_events_url":"https://api.github.com/users/Bubblbu/received_events","type":"User","site_admin":false},{"login":"tanteuschi","id":19272712,"avatar_url":"https://avatars.githubusercontent.com/u/19272712?v=3","gravatar_id":"","url":"https://api.github.com/users/tanteuschi","html_url":"https://github.com/tanteuschi","followers_url":"https://api.github.com/users/tanteuschi/followers","following_url":"https://api.github.com/users/tanteuschi/following{/other_user}","gists_url":"https://api.github.com/users/tanteuschi/gists{/gist_id}","starred_url":"https://api.github.com/users/tanteuschi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tanteuschi/subscriptions","organizations_url":"https://api.github.com/users/tanteuschi/orgs","repos_url":"https://api.github.com/users/tanteuschi/repos","events_url":"https://api.github.com/users/tanteuschi/events{/privacy}","received_events_url":"https://api.github.com/users/tanteuschi/received_events","type":"User","site_admin":false}],"milestone":null,"comments":2,"created_at":"2016-08-17T20:29:54Z","updated_at":"2016-08-18T00:21:42Z","closed_at":null,"body":"The current implementation of responsive design uses the viewBox attribute of SVG to scale the map. This works well for SVG elements, but it doesn't work well for foreignObjects, which hold all the text in the visualization. The problem is that viewBox continously scales the text from its starting value (e.g. 14px). Per this [Stackoverflow issue](http://stackoverflow.com/questions/26115053/is-it-possible-to-escape-an-svg-viewbox-or-how-to-position-html-div-over-scale): \r\n\r\n> \r\n\"The content in <foreignObject> is rendered to a screen buffer (temporary image) the same width and height in px as the foreignObject's width and height is in the local SVG coordinate system, and then the result is transformed to fit on the screen, the same as if you'd drawn a (JPEG or PNG) image in a transformed SVG coordinate system.\"\r\n\r\nThis has several problematic implications:\r\n\r\n1. Text looks never quite right as it is simply rescaled - and it some cases, especially when the visualization becomes smaller, the text is almost unreadable.\r\n1. Text cannot be properly resized using CSS anymore\r\n1. Whatever the first value for text size that is being set, is used as starting value. This means that different screen sizes result in different text sizes, depending on what size the browser window had, when the visualization was loaded.\r\n\r\nHere are two ways to overcome this issue:\r\n- [Superimpose absolutely positioned divs over the SVG elements](http://stackoverflow.com/questions/26115053/is-it-possible-to-escape-an-svg-viewbox-or-how-to-position-html-div-over-scale)\r\n- [Manually define how the visualization should be resized when the window is resized](http://cagrimmett.com/til/2016/04/26/responsive-d3-bar-chart.html)\r\n\r\nThe third option would be to use svg:text instead of foreignObjects.\r\n\r\nAll three ways seem to be quite a lot of effort. The question is, which road do we want to go down? Or whether there is indeed an easier solution?"},"comment":{"url":"https://api.github.com/repos/pkraker/Headstart/issues/comments/240589097","html_url":"https://github.com/pkraker/Headstart/issues/67#issuecomment-240589097","issue_url":"https://api.github.com/repos/pkraker/Headstart/issues/67","id":240589097,"user":{"login":"pkraker","id":6399997,"avatar_url":"https://avatars.githubusercontent.com/u/6399997?v=3","gravatar_id":"","url":"https://api.github.com/users/pkraker","html_url":"https://github.com/pkraker","followers_url":"https://api.github.com/users/pkraker/followers","following_url":"https://api.github.com/users/pkraker/following{/other_user}","gists_url":"https://api.github.com/users/pkraker/gists{/gist_id}","starred_url":"https://api.github.com/users/pkraker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pkraker/subscriptions","organizations_url":"https://api.github.com/users/pkraker/orgs","repos_url":"https://api.github.com/users/pkraker/repos","events_url":"https://api.github.com/users/pkraker/events{/privacy}","received_events_url":"https://api.github.com/users/pkraker/received_events","type":"User","site_admin":false},"created_at":"2016-08-18T00:21:42Z","updated_at":"2016-08-18T00:21:42Z","body":"Another solution using ResizeSensor and CSS is described here: http://www.billdwhite.com/wordpress/2014/11/11/responsive-d3-charts-in-single-page-web-applications/"}}
{"actor":{"display_login":"pkraker"}}