I have a requirement to be able to provide a flex component in English and several asian languages. I have looked at the flex documentation and it seems that I have to build several swf's, which feels wrong.
Does anyone know of a straightforward and practical way of bundling string resources in different languages and handling the fonts?
I guess you know the basics of how to localize a Flex application, but if you would like to know more there's a good and thorough description here: Runtime Localization.
In Flex 3 you have three options on how to solve your problem:
compile all languages into the SWF and switch language at runtime
compile a separate SWF for each language
compile no, or a default, language into the SWF and load additional languages at runtime
The first option is probably the most common, the least complex and doesn't have many drawbacks. The other two can be used if you have special needs, like having to keep down the size of the SWF at all cost, or need to load all strings from a database at runtime.
To implement the first option you create a resource bundle for each language (basically a number of .properties files that lives in a directory named after the locale, for example en_US for US English or sv_SE for Swedish). In the code you refer to strings by calling the resource manager:
<Label text="{resourceManager.getString('mybundle', 'mystring")'}/>
That will retrieve a string called "mystring" in the resource bundle compiled from "mybundle.properties" in the current locale.
To make sure each locale is actually compiled into the application you add -locale=en_US,sv_SE to the compiler flags (but change the en_US,sv_SE part to the languages you have resource bundles for). You also need to add the location of the directories to the source path: -source-path+=locale/{locale} (the "{locale}" part will automatically be replaced by the values of the -locale flag).
Now you have compiled all your languages into the SWF and can change languages at runtime. The way to do that is to modify the localeChain property of the resource manager:
resourceManager.localeChain = ["sv_SE", "en_US"];
With the settings shown above the resource manager will first look in the Swedish resource bundle, and secondly in the one for US English. You can set another order at any time, and doing so will change all texts in the application then and there.
I encourage you to read the description I referred to above, it explains this in greater detail, and most likely in a more understandable way. It also explains how to do some preparations you need to do before you can compile applications with locales other than en_US.
The other problem you have is with fonts. That one is trickier. The best thing would be to have a font that had the full Unicode range of characters, that way you would only need to embed that and any text could be displayed. However, that means that your options are a bit more limited. I know that there is at least one version of Aria in Windows that has an enourmous number of characters, and on the Mac there is a Helvetica (I think, or it might be Lucida Grande, or both) that also has most of the ones you need to display many asian languages.
Embedding all languages into the same SWF usually does very little to increase the file size, because text is very lightweight, but fonts are definitely not. Embedding a the whole Unicode version of Arial can increase the file size of a SWF by several megabyte, which kind of sucks for web applications. Depending on the situation you may have to compile one SWF per language, just because the font data would otherwise make the SWF unwieldy.
Beware of fonts. System fonts aren't the prettiest but Asian fonts are too large to embed. We resorted to embedding Latin fonts for English and switching to system fonts for Chinese.
Be careful about rotating system fonts - your text will disappear. I think Flash 10 might have fixed this.
Also, be very careful with the font string you specify for Chinese.
Most OSes have nifty fall-back logic - if you specify Trebuchet and try to render a Chinese character, your OS might decide to use some Asian font instead. Flash seems to mess up this fall-back logic and switch between two or more Asian fonts dynamically. We had cases where mousing over a text block would switch the font.
To fix this, specify a font which includes all the characters you need (without falling back to some other font). You will need to test this across OSes, etc.
We use Flex for the client part of our application and support I18N via ResourceBundles.
In Flex 2.01 the language has to be built into the SWF - you can't change it at runtime. In Flex 3 you can switch language at runtime.
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization
An important step left out above is to run the command:
copylocale.exe en_US sv_SE
from the bin folder of the sdk. This is in the article though.
Related
Im implementing a language plugin on a site, you know the sort click and it changes all the content into Arabic, Russian.. ect (im aware that modern browsers have built in features for this, but we've chosen to go this way.)
What i was wandering is how we deal with fonts, if our normal site is running using
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
Would it just fall back to the browser defaults if it couldn't render the new text in the above fonts?
Or is there a way of specifying fonts after the translation has taken place?
When characters on a page cannot be found in the font listed first in the applicable font-family list, then browsers are expected to scan the list further and eventually, when needed, fall back to scanning other fonts in the system, in browser-dependent manner. However, browsers (especially IE) are known to fail here and, moreover, the process may result in a mix fonts, even characters from different fonts in a single word.
Thus, you should make a reasonable effort to ensure that any font listed in your font-family list is as such sufficient for the text of the page, at least for letters (special symbols may often be picked up from different fonts without stylistic mess). This is virtually impossible for a widget that translates into “any” language.
I suppose you are referring to the use of a service like Google Website Translator. In addition to producing generally bad translations for business purposes, it may mess up the markup of the page, possibly affecting font issues too. For example, it seems to insert rather pointless font markup which may prevent your font settings from working. Moreover, it does not properly set the lang attribute in the translation result (but leaves the original lang attribute!), so you cannot even expect browsers to use their language-specific defaults for fonts right.
I'm not sure what do you refer to when you say "im aware that modern browsers have built in features for this, but we've chosen to go this way" - browsers don't really provide language selection.
There is, however, a reusable JavaScript library that my team developed, that does this, and it takes care of fonts, too:
https://github.com/wikimedia/jquery.uls
https://github.com/wikimedia/jquery.webfonts
You can use it, or take ideas from it to your implementation.
I have some buttons on a tabwidget. These buttons need to have some icon on top of them.
I am aware of QPixmap that will allow me to put an image on top of a button, but I see that these constructors take a filepath as a parameter. I want to avoid dragging icons around in a file after I build. I would like to embed these icons in the executeable somehow, so as to reduce the baggage that I need to lug around in order to make it work.
How can I accomplish this?
I am interested in hearing ways to accomplish my goal of not needing to drag icon files around with the executable; please focus on this aspect if you are confused about some terminology I may have used, as I am still learning Qt.
Of course you can embed icons, images and all other custom resources into your application.
Please read The Qt 4's Resource System (or click here for Qt 5)
You will have a resource file named something like ProjectName.qrc and these list the icons (usually PNGs). With Qt Creator it already starts out with a blank QRC file for you. When specifying the "file" you use the syntax in the manner of ":/Images/MyCrazyIcon.png" and the icon is loaded from the resource that is embedded into your executable. Note that Qt does not manage resources in the very most perfect way, which is to have them loadable upon demand but not always hogging up system memory; they ALWAYS hog up system memory, which really is not such a big deal if they are small. For the big graphics you want flushed out later, just specify a real file name (e.g., "MyBigFile.png" instead of ":/MyBigFile.png", which the latter points to a resource within the executable).
With the resource syntax the power is in the colon character ":", so you could even have ":MyFile.png", providing the QRC file is located in the same directory as the resources. That is how I am doing it, and so far see no downside of this syntax. I hate including ".../Images/..." in the syntax, so my resource names are addressed with ":MyPic.png" without the longer ":/Images/MyPic.png" and all works fine.
The Qt documentation states that AT THIS TIME they do not support true resource handling that Windows and Mac supports, but that things could change in the future. Remember, "true resource support" refers to that nice thing where you can place multi-megabyte graphics and sounds within your executable and never worry about them loading into memory until the magic time you request them. The QRC resources are loaded into memory when the executable is loaded up. The skinning by loadable file support more than makes up for this weakness. Qt is improving rapidly and one day they could very well support both the Windows and Mac resource systems. I am getting redundant and must go. Ta ta. Everybody mod me up, I need the points.
Maybe you should try this:
add a single line to your .pro project file:
RC_ICONS = myappico.ico
More Information: Setting the Application Icon
I have a Flex application that seems larger than it should be. There is a lot of code in it, but not a lot of assets and it just seems large, but I'm not sure how to go about figuring out where the space is going.
I know about the –link-report option, but it only gives the sizes of externally linked library classes. I'm very interested in seeing a report of the sizes of all the classes and resources in my application and it would be a huge bonus if I could also view their dependencies. Not knowing how the code is compiled I'm not sure if this is even possible, but it seems like it should since the compiler can give me the sizes of individual classes linked from other libraries.
I did some searching around, but couldn't find anything helpful. Everything points to the optimization techniques of modularizing and externally linking libraries, which I understand and will implement, but I would really love some more detailed reports of what my compiled application looks like.
To be clear, I'm not really interested in tips on how to reduce the file size, just a report on what is used for and which classes are referencing what.
Anybody have any ideas?
CORRECTION - The link report does show all classes. My particular project in Flex Builder had several CSS files set to compile to swfs. My link report for the main app was being overwritten by these css compiles!
The link report actually contains all compiled classes and not just the ones in external libraries (at least with the Flex 4 SDK). There is an xsl available that will generate an html file of the link report so it is easier to read.
Check this post: http://blog.iconara.net/2007/02/25/visualizing-mxmlcs-link-report/
There is a command-line utility called flash.swf.tools.SwfxPrinter in swfkit.jar, which comes with Flex Builder (or the plug-in or the SDK) and which you can use to analyze information about class sizes. Joe Berkovitz wrote some good instructions on how to make use of it in his blog, and he was working on an AIR-based GUI tool that leverages it, but I'm not sure if he ever published the tool. Still, you can use his instructions to leverage the utility directly from the JAR.
I found a handy little AIR app that really helps organize the link report info.
http://www.kahunaburger.com/2008/03/08/air-link-report-visualizer/
It's old but still works very well.
A couple of years ago, we had a graphic designer revamp our website. His results looked great, but he unfortunately introduced a new unsupported font by the web browser.
At first I was like, "What!?!"... since most of our content is dynamic and there was no real way to pre-make all of the images. There was also the issue of multiple languages (since we knew Spanish was on the horizon).
Anyway, I decided to create some classes to auto-generate images via GDI+ and programatically cache them as needed. This solved most of our initial problems. However, now that our load has increased dramatically, there has been a drain on our UI server.
Now to the question... I am looking to replace most of the dynamic GDI+ images with a standard web browser font. I am thinking of keeping some of the rendered GDI+ images and putting them in a resx file, but plan to replace most of them with Tahoma or Arial fonts via asp:Labels.
Which have you found to be a better localized image solution?
Embedding images into the resx
Only adding the image url into the resx
Some other solution
My main concern is to limit the processing on the UI server. If that is the case, would adding the image url to the resx be a better solution compared to actually embedding the image into the resx?
You should only need to generate each image once, and then save it on the hard disk. The load on your site shouldn't increase the amount of processing you have to do. That being said, it almost sounds like you are using images for things you shouldn't be. If there are so many different images that you can't keep up with generating them, it's time to abandon your fancy images for things that shouldn't be images, and go back to straight text. If the user doesn't have the specified font installed, it should just fall back to a similar looking font. CSS has good support for this.
see my response here
This can be done manually or using some sort of automated (CMS) system.
The basic method is to cache your images in a language specific directory structure and then write an HTTP handler that effectively removes the additional directory layer. eg:
/images/
/en/
header1.gif
/es/
header1.gif
In your markup or CSS you would just reference /images/header1.gif. The http hander then uses session (if language is user specific), or config (if site specific) to choose which directory to serve the image from.
This provides a clean line bewteen code and content, and allows for client side caching. Resx is great for small strings but I much prefer a system like this for images and larger content. especially on the web where it is typically easy to switch images around.
I had the same problem a few years back and our interface team pointed us to SIFr. http://wiki.novemberborn.net/sifr/
You embed your font into a Flash movie and then use the SIFr JavaScript to dynamically convert your text into your font. Because it's client-side, there is no server-side impact.
If the user doesn't have Flash or JavaScript installed, they get the closest web-friendly font.
As an added bonus: because your content is still Text -- Google can search and index the content -- a huge SEO optimization.
Because of caching, I'd rather add only the image url into the resx. Caching is much better for static content (i-e plain files ) than for generated content.
I'd be very cautious about putting text in images at all, CSS with appropriate font-family fallback is probably the correct response on accessibility and good MVC grounds.
Where generation really is required I think Kiblee and JayArr outline good solutions
I work on a collaboration web app, built with Flex 3, that needs to support multiple languages.
Does anyone know which fonts are best for creating embedded font libraries for Chinese, Korean, Japanese, and Russian languages? I know Arial Unicode MS will do the job, but I don't know if it will do the job best.
Localization alone won't solve the entire problem: chat input and display, for example, need to support multiple languages in the same textfield - anything typed in Chinese needs to display in Chinese; anything typed in English needs to display in English.
Using _sans is an option, but is far from preferred.
Thanks.
Went with an approach that switches TextFormat of characters based on unicode value. So, characters in the primary language display in the preferred (embedded) font, while characters in other languages display in _sans.
This works out really nicely, but requires that you inspect every character that is added to a field, and requires you to inspect everything when a deletion occurs. Kind of a lot of inspecting and I'm sure a textfield with a lot of content would start running into performance issues, but this is for a chat tool, so that isn't too critical of a use case.