{"id":169,"date":"2008-03-10T16:50:37","date_gmt":"2008-03-10T22:50:37","guid":{"rendered":"http:\/\/www.regnskygge.net\/?p=94"},"modified":"2008-03-10T16:50:37","modified_gmt":"2008-03-10T22:50:37","slug":"sxsw2008-notes-client-side-code-and-internationalization","status":"publish","type":"post","link":"http:\/\/techory.com\/sxsw\/?p=169","title":{"rendered":"SXSW2008 notes – Client-Side Code and Internationalization"},"content":{"rendered":"
\n

Monday, 10 March 2008 - 3:30PM<\/h4>\n

Abstract:
\nThis presentation will cover tips, techniques, best practices, and gotchas for designers working with XHTML, CSS, and JavaScript in multiple languages. Special attention will be given to right-to-left and bidirectional content. XHTML + CSS + JS + UTF8 + LTR + RTL = client-side i18n fun<\/p>\n

Jon Wiley - User Experience Designer, Google<\/a>\n<\/p><\/blockquote>\n

Google is localized into 117 languages. <\/p>\n

Does internationalization = translation? No.<\/p>\n

It is enabling your product for localisation. Adaptation of product’s cultural content (including language).<\/p>\n

globalization: carries too much baggage to be precise in this context.<\/p>\n

translaiton is not transliteration.<\/p>\n

Localization is more than translation
\n - local content
\n - legal compliance
\n - marketing is culturally dependent
\n - keyboards
\n - currency formats
\n - date formats
\n - cultural appropriateness<\/p>\n

This session will not focus on those - only markup.<\/p>\n

Character encoding<\/strong>
\n - In the beginning, there was ASCII and it was limited to our character set.
\n - Unicode attempts to bring all language character set together.
\n - UTF-8 is what we want to use (vs. UTF-16 or UTF 32) because it is backwards compatible with ASCII. ASCII is a subset of UTF-8<\/p>\n

Since there are thousands of Unicode characters then no font has all of them. Test everything.<\/p>\n

Possible to present a mix of scripts at one time.<\/p>\n

Another advantage of UTF-8 is that it is smaller than UTF-16 except for CJK (Chinese-Japanese-Korean) languages.<\/p>\n

No need to use character escapes since special characters are just in UTF except…
\nreserved chars: > < &
\nhard to see characters  <\/p>\n

Telling the browser what to do in the content-type, meta or css. Priority is given to the meta.<\/p>\n

Specifying a languages<\/strong>
\nYou really want to serve in the right language since they need to know how to pronounce the words.
\nSpeciifying a lang does NOTHING to specify encoding and direction.
\n<html lang=\"en\" xml:lang=\"en\"...
\nAgain, meta and repsonse header can be used, but the html header is best.<\/p>\n

Direction:
\nLTR = left to right text
\nRTL = right to left
\nbidi = bidirectional (e.g., Hebrew and English in the same document)<\/p>\n

Logical order in the source<\/p>\n

visual hebrew: literally coded bacwards<\/p>\n

Scripts have a default direction and need not be specified
\nmarkup is LTR, numbers are always LTR
\nspaces and punctuation are inherently directionally neutral and they inherit the surrounding script. exception: pucntuation inbetween two scripts and then it defaults to document spec. This can be handled in markup<\/p>\n

Avoid changing direction in CSS because direction is not primarily a layout aspect.<\/p>\n

Text expansion<\/strong>
\nEnglish is a compact language. Small words form English can expand easily to 200%-300% in other languages. This hits the hardest in nav tabs and areas designed to be snug.
\nUse 40% for a rule of thumb.
\nSome languages eliminate spaces (e.g., German) and this causes wordwrap issues
\nSome scripts have wider or taller characters.<\/p>\n

Whatch out for abbreviations
\nthey are not as common in other languages<\/p>\n

Tools<\/strong>
\nGoogle translation service (translate.google.com) can be used for machine checks for text expansion. Do not use this for production because you will get crap.
\nCSS Janus - script for flipping CSS-based layouts. Table-based layouts do not have this problem. However, this is more difficult in CSS. http:\/\/cssjanus.commoner.com\/<\/p>\n

Javascript<\/strong>
\nEmbedded text will render as written regardless of of direction.<\/p>\n

IE actually flips the scrollbar to the other side. FF does not.<\/p>\n

There needs to be a bidi acid test.<\/p>\n","protected":false},"excerpt":{"rendered":"

Monday, 10 March 2008 – 3:30PM
\nAbstract:
\nThis presentation will cover tips, techniques, best practices, and gotchas for designers working with XHTML, CSS, and JavaScript in multiple languages. Special attention will be given to right-to-left and bidirectional content. XHTML + CSS + JS + UTF8 + LTR + RTL = client-side i18n fun
\nJon Wiley – User Experience […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/169"}],"collection":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=169"}],"version-history":[{"count":0,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions"}],"wp:attachment":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}