{"id":39,"date":"2009-01-24T20:07:08","date_gmt":"2009-01-24T17:07:08","guid":{"rendered":"http:\/\/nike.fixme.fi\/blag\/?p=39"},"modified":"2011-12-29T18:07:37","modified_gmt":"2011-12-29T15:07:37","slug":"drawing-i18ned-text-in-images","status":"publish","type":"post","link":"https:\/\/laxstrom.name\/blag\/2009\/01\/24\/drawing-i18ned-text-in-images\/","title":{"rendered":"Drawing i18ned text in images."},"content":{"rendered":"<p>A picture is worth a thousand words, but drawing a word can be harder than one expects.<\/p>\n<p>Usually it is a good idea to avoid text in images for multiple reasons. Foremost, images make localisation hard. It requires tools, some skill in image manipulation and handwork. Another benefit is the need to store only one copy of the image.<\/p>\n<p>In some cases it is unavoidable to use text in images. In other cases&#8230; it is just used for lesser reasons. In this post I will not talk about layout issues, like limited space and inflexibility in image size. In <a href=\"http:\/\/translatewiki.net\">Betawiki<\/a> we have hundreds of languages, of which many of them are using poorly supported scripts.<\/p>\n<p>PHP GD library provides two methods to draw text. <span class=\"methodname\"><strong><strong><a href=\"http:\/\/php.net\/imagestring\">imagestring<\/a> <\/strong><\/strong><\/span>can be used only to draw text in latin-2, so we can forget it immediately. The other one is <a href=\"http:\/\/php.net\/manual\/en\/function.imagettftext.php\"><span class=\"methodname\"><strong><strong>imagettftext<\/strong><\/strong><\/span><\/a>, which since PHP 5.2.0 allows to use UTF-8. Great, now we can pass all translations we have to it. The next problem is choosing a suitable font, since <span class=\"methodname\"><strong><strong>imagettftext<\/strong><\/strong><\/span> specifically needs path to one in its parameters. As we know, there is no font to cover all scrips, and too many fonts manually map language codes to them and require everyone using the code to install just those fonts.<\/p>\n<p>The only way to automatically choose a proper font for a language (script) code is <a href=\"http:\/\/fontconfig.org\/wiki\/\">fontconfig<\/a>. I have written a <a href=\"http:\/\/svn.wikimedia.org\/viewvc\/mediawiki\/trunk\/extensions\/Translate\/utils\/Font.php?revision=44771&amp;view=markup\">wrapper<\/a>, which calls command line utilities of fontconfig to fetch the most suitable font. This does not solve the <a href=\"http:\/\/translatewiki.net\/w\/i.php?title=Special:TranslationStats&amp;graphit=1&amp;count=edits&amp;scale=hours&amp;uselang=zh-hans\">missing font problem,<\/a> but if there is a <a href=\"http:\/\/translatewiki.net\/w\/i.php?title=Special:TranslationStats&amp;graphit=1&amp;count=edits&amp;scale=hours&amp;uselang=el\">suitable font<\/a> in the system and fontconfig knows about it, it will be used. And yet, there is still problems like wrong rotation for <a href=\"http:\/\/translatewiki.net\/w\/i.php?title=Special:TranslationStats&amp;graphit=1&amp;count=edits&amp;scale=hours&amp;uselang=ja\">Japanese<\/a>.<\/p>\n<p><strong>The big question: is there any better way to do this?<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A picture is worth a thousand words, but drawing a word can be harder than one expects. Usually it is a good idea to avoid text in images for multiple reasons. Foremost, images make localisation hard. It requires tools, some skill in image manipulation and handwork. Another benefit is the need to store only one [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,2,9],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-english","category-mediawiki","category-translatewiki-net"],"_links":{"self":[{"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":5,"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/posts\/39\/revisions\/216"}],"wp:attachment":[{"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laxstrom.name\/blag\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}