{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/4231","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/4231/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/4231/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/4231/events","html_url":"https://github.com/WordPress/gutenberg/issues/4231","id":285452416,"number":4231,"title":"Test the interface in languages other than English (especially on mobile)","user":{"login":"afercia","id":1682452,"avatar_url":"https://avatars1.githubusercontent.com/u/1682452?v=4","gravatar_id":"","url":"https://api.github.com/users/afercia","html_url":"https://github.com/afercia","followers_url":"https://api.github.com/users/afercia/followers","following_url":"https://api.github.com/users/afercia/following{/other_user}","gists_url":"https://api.github.com/users/afercia/gists{/gist_id}","starred_url":"https://api.github.com/users/afercia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/afercia/subscriptions","organizations_url":"https://api.github.com/users/afercia/orgs","repos_url":"https://api.github.com/users/afercia/repos","events_url":"https://api.github.com/users/afercia/events{/privacy}","received_events_url":"https://api.github.com/users/afercia/received_events","type":"User","site_admin":false},"labels":[{"id":596965480,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/i18n","name":"i18n","color":"655104","default":false}],"state":"open","locked":false,"assignee":{"login":"jasmussen","id":1204802,"avatar_url":"https://avatars3.githubusercontent.com/u/1204802?v=4","gravatar_id":"","url":"https://api.github.com/users/jasmussen","html_url":"https://github.com/jasmussen","followers_url":"https://api.github.com/users/jasmussen/followers","following_url":"https://api.github.com/users/jasmussen/following{/other_user}","gists_url":"https://api.github.com/users/jasmussen/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmussen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmussen/subscriptions","organizations_url":"https://api.github.com/users/jasmussen/orgs","repos_url":"https://api.github.com/users/jasmussen/repos","events_url":"https://api.github.com/users/jasmussen/events{/privacy}","received_events_url":"https://api.github.com/users/jasmussen/received_events","type":"User","site_admin":false},"assignees":[{"login":"jasmussen","id":1204802,"avatar_url":"https://avatars3.githubusercontent.com/u/1204802?v=4","gravatar_id":"","url":"https://api.github.com/users/jasmussen","html_url":"https://github.com/jasmussen","followers_url":"https://api.github.com/users/jasmussen/followers","following_url":"https://api.github.com/users/jasmussen/following{/other_user}","gists_url":"https://api.github.com/users/jasmussen/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmussen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmussen/subscriptions","organizations_url":"https://api.github.com/users/jasmussen/orgs","repos_url":"https://api.github.com/users/jasmussen/repos","events_url":"https://api.github.com/users/jasmussen/events{/privacy}","received_events_url":"https://api.github.com/users/jasmussen/received_events","type":"User","site_admin":false}],"milestone":null,"comments":3,"created_at":"2018-01-02T15:08:14Z","updated_at":"2018-03-01T12:23:29Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Ideally, a large application like Gutenberg that is meant to be translated and used in several languages should be designed with localization in mind and continuously tested in other languages during development iterations.\r\n\r\nI'd like to take this opportunity to suggest to everyone, especially the ones who are not native English speakers, to start testing Gutenberg in their language now, even though the interface is not fully translated yet.\r\n\r\nI feel this is an area where, historically, WordPress hasn't always done its best. Of course, most of the development has always been made in English (not arguing that) and testing in other languages has been often an afterthought, if that ever happened. Yes, _some_ additional space is generally reserved to longer strings that may come from other languages, but that's not enough.\r\n\r\nThis applies to all the interface, on any screen size, but let's consider just the mobile view for now, and just the top toolbar.\r\n\r\nWhat is the minimum display size Gutenberg is optimizing for?\r\n\r\nAt a 320 pixels viewport, the top toolbar starts being cutted off on the right, even in English (see in the screenshot below: editing a draft):\r\n\r\n![screen shot 2018-01-02 at 15 09 47](https://user-images.githubusercontent.com/1682452/34487209-95583b0c-efd3-11e7-8e15-52ec3c26a142.png)\r\n\r\nOther languages typically have longer strings. Actually, English is one of the Western languages with the shorter words. Let's consider, for example, German:\r\n\r\n![screen shot 2018-01-02 at 15 12 21](https://user-images.githubusercontent.com/1682452/34487237-bf056768-efd3-11e7-9a5a-e912a71d5ae7.png)\r\n\r\nSee how there's no space to display the ellipsis button. Notice the word \"Saved\" is not translated yet. I _think_ it's \"Gespeichert\"? Anyways, I'm pretty sure it's longer than \"Saved\" 🙂  \r\n\r\nEven at a 375 pixels viewport, the toolbar is cutted off on the right:\r\n\r\n![screen shot 2018-01-02 at 15 12 33](https://user-images.githubusercontent.com/1682452/34487319-24a638f4-efd4-11e7-9f48-c3be7f352b24.png)\r\n\r\nThere are several ways to address these issues, more related to design so I'm not the best person to give suggestions. However, I'd like to mention a few things:\r\n\r\n- other languages may have strings even longer than the German ones\r\n- plugins may add UI controls so designing on a \"fixed\" amount of space maybe is not the best idea in the first place\r\n- hiding UI controls just because there's not enough space is not the best approach, and it's a sign of a problem in the interface itself. For example, how I \"Undo\" or \"Redo\" under a 600 pixels viewport?\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/369575427","html_url":"https://github.com/WordPress/gutenberg/issues/4231#issuecomment-369575427","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/4231","id":369575427,"user":{"login":"moorscode","id":2005352,"avatar_url":"https://avatars0.githubusercontent.com/u/2005352?v=4","gravatar_id":"","url":"https://api.github.com/users/moorscode","html_url":"https://github.com/moorscode","followers_url":"https://api.github.com/users/moorscode/followers","following_url":"https://api.github.com/users/moorscode/following{/other_user}","gists_url":"https://api.github.com/users/moorscode/gists{/gist_id}","starred_url":"https://api.github.com/users/moorscode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/moorscode/subscriptions","organizations_url":"https://api.github.com/users/moorscode/orgs","repos_url":"https://api.github.com/users/moorscode/repos","events_url":"https://api.github.com/users/moorscode/events{/privacy}","received_events_url":"https://api.github.com/users/moorscode/received_events","type":"User","site_admin":false},"created_at":"2018-03-01T12:23:29Z","updated_at":"2018-03-01T12:23:29Z","author_association":"CONTRIBUTOR","body":"In line of the comment above, this issue is a bit too specific in my opinion.\r\n\r\nMaking it broader; an issue to determine usability of all elements with dynamic length (translatable strings) instead of language-specific tests/checks.\r\n\r\nI can imagine a testing method of overriding the translations globally with just random words and seeing which buttons/elements are being obscured or overflowed."}}
{"actor":{"display_login":"moorscode"}}