{"id":654,"date":"2017-01-24T11:28:40","date_gmt":"2017-01-24T19:28:40","guid":{"rendered":"http:\/\/www.ibabbleon.com\/copywriter-translator\/?p=654"},"modified":"2018-03-17T10:23:34","modified_gmt":"2018-03-17T17:23:34","slug":"use-auto-layout-xcode-localized-apps","status":"publish","type":"post","link":"https:\/\/www.ibabbleon.com\/copywriter-translator\/2017\/01\/use-auto-layout-xcode-localized-apps\/","title":{"rendered":"Why use Auto Layout in Xcode for your localized apps"},"content":{"rendered":"<h2>Auto Layout saves the d\u00eda<\/h2>\n<p>As a developer, you may\u00a0have some legitimate reasons not to use Auto Layout. You may even think that Auto Layout is Apple&#8217;s version of\u00a0punching you in the gut. You may think it&#8217;s only about varying screen sizes. Mostly, maybe. But if the myriad\u00a0screen sizes of iOS devices haven&#8217;t persuaded you, maybe internationalization will be the straw that broke the camel&#8217;s back. Auto Layout is\u00a0downright essential for app localization and internationalization as well.<\/p>\n<figure id=\"attachment_658\" aria-describedby=\"caption-attachment-658\" style=\"width: 240px\" class=\"wp-caption alignnone center\"><a href=\"http:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-24-at-11.15.22-AM.png\"><img loading=\"lazy\" class=\"wp-image-658 size-medium\" src=\"http:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-24-at-11.15.22-AM-240x300.png\" alt=\"Turning on Auto Layout in Xcode\" width=\"240\" height=\"300\" srcset=\"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-24-at-11.15.22-AM-240x300.png 240w, https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-24-at-11.15.22-AM.png 524w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/a><figcaption id=\"caption-attachment-658\" class=\"wp-caption-text\">Turning on Auto Layout in Xcode<\/figcaption><\/figure>\n<p class=\"para\">The best defense of this localization unpredictability is Auto Layout. Let Xcode help flow the text as it should, because you can&#8217;t expect to anticipate what the Russian or Arabic text is going to do.\u00a0Auto Layout also makes it possible to have one set of\u00a0<code>.storyboard<\/code>\u00a0and\u00a0<code>.xib<\/code>\u00a0files for all the languages of your app. That&#8217;s a plus,\u00a0right?<\/p>\n<p>Don&#8217;t just take it from me. This is what Apple writes about Auto layout and internationalization in its <a href=\"https:\/\/developer.apple.com\/library\/content\/documentation\/UserExperience\/Conceptual\/AutolayoutPG\/index.html\">Auto Layout guide<\/a>. As a localizer myself, I will tell you\u00a0it&#8217;s all true (except the part about Japanese, which is often way longer than the English):<\/p>\n<blockquote>\n<p class=\"para\">Internationalization has three main effects on layout. First, when you translate your user interface into a different language, the labels require a different amount of space. German, for example, typically requires considerably more space than English. Japanese frequently requires much less.\u00a0Second, the format used to represent dates and numbers can change from region to region, even if the language does not change. \u2026Third, changing the language can affect not just the size of the text, but the organization of the layout as well. Different languages use different layout directions. English, for example, uses a left-to-right layout direction, and Arabic and Hebrew use a right-to-left layout direction.<\/p>\n<\/blockquote>\n<h3 class=\"para\">In other words, localizing into other languages is going to change the layout of the text in your app in ways you haven&#8217;t considered. And ways you probably shouldn&#8217;t have to care about \u2014 that&#8217;s what Auto Layout does for you!<\/h3>\n<p class=\"para\">What&#8217;s a localized app look like without Auto Layout? It&#8217;s sort of like Apple introducing a new mini-iPhone screen size and your app suddenly looks terrible on it.<\/p>\n<h2>Tips for using\u00a0Auto Layout when localizing\u00a0apps<\/h2>\n<ol>\n<li><strong>Remove all fixed-width constraints<\/strong>. If the German text is 30% longer, and you don&#8217;t provide room for it in your UI, this will at least let iOS change the font size to accommodate. Otherwise, your\u00a0localized text will get cropped.<\/li>\n<li><strong>Text fields should fit\u00a0to\u00a0contents<\/strong>.\u00a0Select <strong>Editor &gt; Size To Fit Content<\/strong>\u00a0so that text fields and labels resize automatically\u00a0for longer or shorter text.<\/li>\n<li><strong>Pin views to adjacent views.<\/strong>\u00a0This way, when one view resizes to fit your localized text, the other views will too. Otherwise, views may overlap in some languages<\/li>\n<li><strong>No minimums or maximums.\u00a0<\/strong>Allow each content\u00a0view to adjust in\u00a0size as\u00a0the language changes.<\/li>\n<li><strong>Use\u00a0<em>leading<\/em> and <em>trailing<\/em> attributes instead of <em>left<\/em> and <em>right<\/em>.<\/strong> This tip will make right-to-left languages (Arabic, Hebrew) flow properly.<\/li>\n<\/ol>\n<p>That&#8217;s it! With just a few tips you&#8217;re localized apps will look awesome.<\/p>\n<h2>What if my text is STILL too long?<\/h2>\n<p>I&#8217;m not going to lie. Auto Layout is not a panacea that solves all the world&#8217;s internationalization ills. But you&#8217;re working with <a href=\"https:\/\/www.ibabbleon.com\/app_localization.html\">Babble-on<\/a>, the localization pros, right?\u00a0When you&#8217;ve given as much room as you can in your UI and Auto Layout has tried its best, the only remaining option is to change the text itself. <strong>That&#8217;s why we offer a free QA service for our localization clients where you can upload your localized screenshots.<\/strong> Anything that doesn&#8217;t fit or doesn&#8217;t look right we&#8217;ll shorten or alter the text to make it work.<\/p>\n<p><a href=\"http:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-07-at-2.18.22-PM.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-636 size-full\" src=\"http:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-07-at-2.18.22-PM.png\" alt=\"Localized screenshots upload at Babble-on\" width=\"586\" height=\"343\" srcset=\"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-07-at-2.18.22-PM.png 586w, https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-content\/uploads\/2015\/04\/Screen-Shot-2015-04-07-at-2.18.22-PM-300x176.png 300w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><\/a><\/p>\n<p>Check it out for yourself by entering out <a href=\"https:\/\/www.ibabbleon.com\/register\">developer portal<\/a>! (It&#8217;s free and has great tools for localization.)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Auto Layout saves the d\u00eda As a developer, you may\u00a0have some legitimate reasons not to use Auto Layout. You may even think that Auto Layout is Apple&#8217;s version of\u00a0punching you in the gut. Yo","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":""},"categories":[85,86,31,74,4,84],"tags":[],"_links":{"self":[{"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/posts\/654"}],"collection":[{"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":4,"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/posts\/654\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/posts\/654\/revisions\/660"}],"wp:attachment":[{"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/categories?post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ibabbleon.com\/copywriter-translator\/wp-json\/wp\/v2\/tags?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}