Make intro animation pretty

[Marc-Bogonovich]

This task should take a only few minutes, Guan and I can do it together.

The first page completed by Guan in the Spring 2014 was the intro animation.

This page currently has several words for "word" in multiple languages rise up the screen. French, English, Spanish, Hebrew, Hindi (I believe), and Chinese 字 (actually the word for character not word).

We should add a few languages, of different colors, sizes, and rising speeds.

[Marc-Bogonovich]

In the intro animation page. We've noticed the following issue. Some of the larger words get cut off. Guan has suggested that this is due to the fact that the animations are inside bounding boxes. Deepak Bharanikana has suggested that the "padding" needs to be increased.

Notice in the following image that the Kannada word for 'word', namely 'ಪದ' appears cutoff.

[Marc-Bogonovich]

Deepak Bharanikana worked on this problem with me today. This is the solution we discovered. We did not push this solution to the project, because my development environment was not properly connected. So we'll keep this issue open for the time being.

The issue is/can be an XML layout issue. Each word is in a: CheckedTextView

We need to add the following lines android:layout_marginTop="20dp" android:layout_marginBottom="20dp"

This provides a sufficient margin for the word within the CheckedTextView

[hanaldo]

Hi Marc, sorry I pushed the commit for this issue (https://github.com/Marc-Bogonovich/Openwords/commit/886544193d639eadd32030e0a2a2cb5f49b137c5) late. First of all, I am not sure why CheckedTextView is used before instead of TextView, changing to TextView would solve the cut-off problem for flashword_string_homePageLift08. However, I think it is more sensible to use images here rather than text, as different devices would have different fonts for languages, please see the below snapshot (I used image for the Chinese string):

[hanaldo]

By the way, another reason for using images in this welcome page is that "words" are also a kind of art, so it's better we chose the most appropriate and beautiful font for each language, also this calligraphy will be consistent across different devices.

[Marc-Bogonovich]

Yes, all of that makes sense Shenshen. Although, I'm hoping that the animation is a symbol of Openwords in some sense - and sort of representative of the Openwords strategy. In the sense that Openwords uses standards. Unicode is one we take for granted, but it really is fairly new, and it has only been in the last decade that it has nearly fully penetrated many of the world's languages.

Let me know what you think.

[hanaldo]

We will definitely use UTF. But different devices have different default font for UTF characters, so as a symbol of Openwords it needs to be consistent and elegant I think. Take the example of the Chinese string of "word", I used a graphical design software to input the UTF character "字", and then chose the most common and beautiful font, and then exported it as an image. I think this will be an iterative process which should consult with an representative of each native language speaker for their cultural font.

[Marc-Bogonovich]

Ok. I hope we can use vector images. Our logo should be a vector image too.

All of this is stuff I can work on for sure.

[hanaldo]

I am not sure how well Android can support SVG, but it seems like Android does not support SVG directly (although there are some libraries for it). The real problem is that if we choose SVG as the format of the images, the "word character" needs to be built by < line > tag instead of < text > tag, otherwise the svg libraries cannot understand the svg data. A proper way might be using SVG as the origin of the word images, but when we display them on android they still have to be converted to PNG.

[hanaldo]

I just tested one of the best (I think) svg libraries (https://code.google.com/p/androidsvg/) for Android, it does not support < font-face > tag, which means we cannot display the character correctly with SVG in Android. However, if we don't want to use images for those flash words, we can still just use TextView, but then we will need to include .ttf font files.

[hanaldo]

Hi Marc, here is a demo (https://github.com/Marc-Bogonovich/Openwords/commit/f1c6faa7bd08a954613eaf2596ea4981eb301c5b) for comparing the uses of either png image or textview with ttf font file to display the flash word. Please decide which way you want to take. By the way, you can see that the ttf font file is about 12MB, if we only use it for displaying the flash words it is a kind of waste, do you want to apply the fonts in Learning Modules as well?

[Marc-Bogonovich]

I've been wondering about fonts for a while (the default font for my Chinese words is very simple). But, 12mb is a lot. If we ever did download nice fonts we would probably want to use it in the LMs too. But, 12mb is too much.

We can employ the images solution that you suggest. The png is probably fine.

However, this is not the highest priority issue so in the short term we do not need to use images or special fonts. We can use the default fonts for now.

I would like to add the following note: There is a reason to even prefer the default fonts on the animation (as simple as they are). There is something aesthetic to the simple default characters of Unicode. They certainly must have been very well thought through and optimized for certain parameters. This is the beauty of deprivation (the visual equivalent to my brother in law -who likes camping- who is more comfortable on the ground than in a bed). That said, there are other aesthetics to strive for, which are accomplished with non-default fonts - which could also be accomplished via image. For now though, just the simple fonts because other issues are higher priority.

Do you agree with this plan?

[hanaldo]

I agree that we can use images for the flash words in the welcome page for now. But in the future, I do not agree that we only use the default font of Android for displaying the words, here are the reasons: 1) The Openwords platform will be eventually reachable by anyone through almost any kind of computer devices, but computer devices are various (such as Windows, Linux, Android, Mac, iOS, Chrome OS etc.) and they use different default font for languages, and some fonts of some languages do not even write a word in the same way, for example, here is how the "flashword_string_homePageLift05" is written in my Mac and Android, and your Android: which I think this is very confusing and inconsistent for a platform.

2) I don't know about other languages, but for Chinese fonts, each font has its own history and purpose to exist. And due to the different properties of each font, some of them are used in books/publications, some of them are used in digital devices, some of them are used in public identifier system. For example, the default Chinese font of Mac system is Heiti SC, and the process is that the Apple designers first want users to have a special feeling when use Mac system, and then they decided or designed (Apple has made some small adjustments) the Heiti SC font, because Heiti SC font would fit in Apple's philosophy. Also another important factor is that Heiti SC looks harmonious with other languages fonts, which means Apple chosen Heiti SC only because it fits Mac system. But if you want to keep this glyph variety, then we certainly do not need to consider fonts.

3) I might be misled by this issue's title, because it says "Make intro animation pretty", so I thought by "pretty" we mean to use fonts and visual effects (such as shadows). However, I personally think the true beauty of a word is its calligraphy, sound, and the history and the culture behind it, so font is really an important factor. So as I said earlier, it should be a long-term and iterative process to adjust the intro page continuously, if "the animation is a symbol of Openwords in some sense" then I don't think the default font of a computer operating system is enough.

[Marc-Bogonovich]

I wasn't suggesting that the default was enough. Just suggesting that the default has its own appeal - which is not to detract from the reasons or appeal of other fonts - for sure, just to remember that the base has its appeal.

This is something we'll have to discuss in person. I'm happy that you have a lot of thoughts on the issue. The issue is very important (The issue of fonts is more important in the LM area than the animation).

By make animation pretty, I meant that we ought to iterate on the issue of the animation. When I created the issue we only had five words filling only a little of the whitespace when they emerged in the animation. At that stage there were many things that could be improved.

Keep in mind that this animation is not an immediate priority (unless you disagree). Instead, it is a good place for people new to the project to "get their feet wet"