{"id":203,"date":"2013-04-09T20:55:37","date_gmt":"2013-04-09T18:55:37","guid":{"rendered":"http:\/\/www.2glyph.com\/blog\/?p=203"},"modified":"2017-03-29T17:46:44","modified_gmt":"2017-03-29T15:46:44","slug":"building-translations-from-images-with-glyphviewer","status":"publish","type":"post","link":"https:\/\/www.2glyph.com\/blog\/building-translations-from-images-with-glyphviewer\/","title":{"rendered":"Building Translations with GlyphViewer"},"content":{"rendered":"

GlyphViewer <\/a>application allows the user to create translations from text in images so that you can internationalize your content in images. You\u00a0may use them in the HTML format to add them to your site, or publish them at 2glyph.com and use the direct link.<\/p>\n

At the moment GlyphViewer supports many modern languages and some ancient one. In this article I will guide you through the steps of building translations from text in image from a modern language.<\/p>\n

Let’s suppose we want to add the following image to your website. What you want is to allow non-German speaking to actually understand the content. As said GlyphViewer is not just about creating translation’s, it’s about creating quality translations<\/strong> that you want your users to check out. You may as well add your own content for each specific language, that said, cultural expressions that people who speak a different language can relate and understand. So let’s take the following image:
\n<\/p>\n

1. Add the image in GlyphViewer<\/h2>\n
First of all you will have to open the original image in the application. Create a project and add your image to the project from Project->Add Image<\/em> menu.<\/p>\n
$\"\"$ <\/a><\/p>\n
2. Recognize the text<\/h2>\n
The next thing you will need to do is to actually get\u00a0 the text from the image in order to use the stream of characters to paste into an online translator, or even send them to your Chinese friend. Of course you could enter them manually by using the New Translation<\/em> button, but this would mean that you can actually read and understand the language, and have a keyboard layout set for it. The easiest thing to do right now is to use GlyphViewer’s OCR technology to get the text. But you should be aware that any OCR technology is not\u00a0100%\u00a0accurate so you should always proofread the result.\u00a0All you need to do now\u00a0is to select the correct language(1.<\/strong><\/span>), click Select Area<\/em> (2.<\/span><\/strong>) and drag a select area across the text (3.<\/strong><\/span>)\u00a0then click on Recognize <\/em>(4.<\/strong><\/span>), \u00a0as you can see below:<\/p>\n
\u00a0 $\"select_ocr\"$ <\/a><\/p>\n
3. Build translation<\/h2>\n
You will notice that the OCR engine will create a new translation shown on the image that you can move around and edit. This by default is a translation element that currently has only one translation, in our case Chinese text. What we want is to add more languages to it, such as English, as shown below:<\/p>\n
$\"translation\"$ <\/a>\u00a0Notice the Language combo box that appears when you hover over the translation. You may use it to switch between different translation that you have made, so that you may see them in real life how they look over the image. Also please keep in mind that each translation can have a different font an color, so you might want to change them for different languages.<\/p>\n
You can also move the translation element across the screen to position it in a right place, for example a place in a image that has nothing interesting.<\/p>\n
Also you can build as many translations as you like in an image, if you purchased GlyphViewer application.<\/p>\n
Now when you are ready to add a new translation, you will notice that when you click on the translation element, the Edit<\/em> button in Translation Builder<\/em> becomes enabled. As well as Remove<\/em> if you’d like to delete it.<\/p>\n
Clicking on Edit<\/em> will open a new dialog that you will use to create your translations:<\/p>\n
$\"tredit\"$ <\/a>The Translation Builder dialog is designed for creating translations from Ancient Languages. But it might be very easily be used for modern languages as well. All you need to do is to choose a translation language to create (1.<\/strong><\/span>), choose the desired font and color (2.<\/strong><\/span>) then actually write the translation in the text edit box (3.<\/strong><\/span>). If you intend to write a translation in a non-Latin language, such as Arabic, you should first choose a correct keyboard before starting to write in the text box, as you would do in notepad for example.<\/p>\n
That’s it, very simple. And you can create as many translation per a translation element as you like, as long as they are in the Translated To:<\/em> combo-box. Also you can assign different languages to different translation elements in the image.\u00a0 When you will publish them if the selected language does not exists in what the user will select, nothing will be shown, but read further to see what I’m talking about.<\/p>\n
4. Publish your content<\/h2>\n
You are done creating translation (hopefully you saved your project by now) now it’s time to let your users check your work. GlyphViewer allows you to get a snapshot of the image with the current active translations, by clicking on Export As Image…<\/em> menu. But the thing that you will be interested in is to actually export the image in a HTML format so that a user can select the translation he wants in order to understand the text. This is done from Export As HTML…<\/em> menu:<\/p>\n
$\"export_html\"$ <\/a>\u00a0The Default Language<\/em> allows you to choose which translations will be shown by default when the HTML is loaded.<\/p>\n
You will notice on the right upper side of the generated HTML that there is a select combo box that the user can choose to show which translation he wants to,<\/p>\n
Destination<\/em> text box will be the path to your generated HTML document.<\/p>\n
Clicking on Export<\/em> button will create this file and also open the newly created HTML document in the tab bar.<\/p>\n
You may use the HTML document to publish it at 2Glyph.com <\/a>, using Publish HTML… menu (it will become enabled once you selected the HTML document in the tab bar), or to manually add the data to your site. All you need to do is replace the file:\/\/\/ <\/em><\/strong>entries from the\u00a0HTML file to your server’s\u00a0URL. Eg: Replace\u00a0tag<\/p>\n
<IMG src=”file:\/\/\/C:\/GlyphViewer\/projects\/Images\/direction.jpg” width=”1209″ height=”680″ useMap=”#features”> with<\/p>\n
<IMG src=”www.your_site_url\/direction.jpg” width=”1209″ height=”680″ useMap=”#features”> where the image is accessible on that address.<\/p>\n
When you Publish to 2Glyph.com <\/a>, we do the same fix-up of the loaded Translation Map or HTML document. You can check out a sample of this translation here: https:\/\/www.2glyph.com\/pub?ID=340ab1b7c9035727cda504d8e0a77287cb1dde9c<\/a><\/p>\n
Have fun using GlyphViewer and remember we always appreciate any feedback<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
GlyphViewer application allows the user to create translations from text in images so that you can internationalize your content in images. You\u00a0may use them in the HTML format to add them to your site, or publish them at 2glyph.com and use the direct link.<\/p>\n
At the moment GlyphViewer supports many modern languages and some ancient one. In this article I will\u00a0[…]<\/p>\n","protected":false},"author":1,"featured_media":207,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[17,15,14,16],"_links":{"self":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts\/203"}],"collection":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":45,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":366,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions\/366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/media\/207"}],"wp:attachment":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}