967260 - [B2G][l10n][Calendar] Rotated 'All Day' text in week view is not correctly positioned for multiple languages

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Calendar, defect)

Description

[Josh Schmitt [Joshs]]

Attachment: All_Day.png

Description:
In the week view mode, the top of the 'All Day' text is being truncated.

Repro Steps:
1) Updated Buri to BuildID: 20140203004001
2) Procced to settings
3) Go to languages and change to simplified chinese
4) Open Calendar app
5) Select the week view and observe

Actual:
The 'All Day' text is truncated.

Expected:
The 'All Day' text is not truncated.

Environmental Variables:
Device: Buri 1.3 MOZ
BuildID: 20140203004001
Gaia: f9a37c77efb4621a1f57e4695b497d18601fe134
Gecko: 3d9d920ca43b
Version: 28.0a2
Firmware Version: V1.2-device.cfg

Notes:

Repro frequency: 100%
See attached: All_Day.png

Comment 1

[YF (Yang)]

This seems to be an i18n instead of a l10n issue, some language having the same issue, such as: it (skewed to the right), ja, zh-TW.

Comment 3

[Shaohua Wen]

@Axel, 
  could you please kindly help to find correct owner (i18n) for this bug?
Thanks!
Holy

Comment 4

[Axel Hecht [:Pike]]

Johnathan, this looks like an issue with how the text is rotated and the fonts are aligned?

You had good ideas on these before, got one for this?

Moving over to Calendar, as the localization can't do anything about this.

Comment 5

[Jonathan Kew [:jfkthame]]

Yes, the problem seems to be the alignment of the rotated text. Comparing the text "全天" (All Day) to the labels for the hourly slots, it's clear that the baseline is shifted significantly to the left (i.e. "upwards", from the unrotated point of view). If it were aligned properly with the hourly labels, it would display without clipping.

So I guess this is probably an issue with how the rotated labels are being implemented at the CSS level.

Comment 6

[Axel Hecht [:Pike]]

https://github.com/mozilla-b2g/gaia/blob/master/apps/calendar/style/week_view.css#L89 it is,

#week-view .sticky .all-day {
  transform: rotate(-90deg);
  line-height: 120%;
  float: left;
  position: absolute;
  top: 4rem;
  left: -1rem;
  font-size: 1.3rem;
}

Comment 7

[Jonathan Kew [:jfkthame]]

Yeah, I found that.... was going to try experimenting a bit, but my local build is currently being really flaky, so I may not get very far for now.

I thought the use of "left: -1rem" here looked a bit odd, but OTOH the "All Day" and hourly labels *are* aligned OK in English, so we can't simply tweak that to shift the Chinese text. Maybe something about the line-height settings there?

Comment 8

[Francesco Lodolo [:flod]]

From some tests on running Gaia in Firefox: without left: -1rem "All Day" overlaps with the vertical line, while the Chinese text sits right above. To center the Chinese text I need a -0.2rem

Changing the line-height just moves the string up/down, not left/right

Comment 9

[Jonathan Kew [:jfkthame]]

It looks like the rotated "All Day" text is a simple <span> within its <section>, with appropriate transform applied; the rotated labels for the hours, however, are list items <li> within an <ol>. This means their styling is handled quite differently, involving the various list-style properties.

So it's not so surprising that they behave differently when the text is changed to Chinese (which most likely has significantly different font ascent/descent metrics).

Comment 10

[Francesco Lodolo [:flod]]

Attachment: Screenshot Italian phone

I think we actually have more problems: this is a screenshot of Italian, text is displayed on the cell border. I guess other locales have this problem as well.

Comment 11

[Francesco Lodolo [:flod]]

Did more tests locally: string position depends on the string length! 

"a": out of screen
"ab": slightly visible
"abc": half cut
"This is a very long string": ends up in the middle of the first day

Spanish has "Todo" and you barely manage to see the "T" complete.

Comment 12

[Jonathan Kew [:jfkthame]]

OK, so it appears the center of rotation for that item is related to the length of the string. This indicates that the structure and styling the Calendar app is using there is poorly designed, and needs to be re-thought.

The original problem with Chinese was just a manifestation of this, rather than being somehow related to the Chinese language or font being used.

Nominating this for blocking-1.3? as I think it's a serious issue with the implementation of that part of the Calendar, and needs to be fixed before we'll be able to ship most localizations of this app.

Comment 13

[Francesco Lodolo [:flod]]

I think I have a working solution, testing it right now.

#week-view .sticky .all-day {
  transform: rotate(-90deg);
  transform-origin: 0 0;  
  position: absolute;
  left: 0.3rem;
  top: 7.9rem;  
  width: 6.5rem;
  height: 1.3rem
  font-size: 1.3rem;  
  line-height: 120%;
  text-align: center;  
}

It uses transform-origin to place the element in the right place (not sure why there was a float on an absolutely positioned element).
It's not great, since we still have to cut the text at some point, but it's better than what we have.

Does this approach make sense?

Comment 14

[Francesco Lodolo [:flod]]

Attachment: Comparison with modified CSS (en, es, it, zh-TW)

Comment 15

[Francesco Lodolo [:flod]]

> #week-view .sticky .all-day {
>   width: 6.5rem;

Actually: 6rem used in the screenshot.

Comment 16

[Francesco Lodolo [:flod]]

Attachment: Pull request on Github

Kevin, feel free to redirect the review if you're not the right person.

Summarizing:
* removed float: left since element has already position: absolute
* unchanged font-size, used transform-origin to make positioning easier, add height and width to truncate longer texts (overflow, white-space)

Comment 17

[Jason Smith [:jsmith]]

This is a bad bug, but I don't think it's a blocker. We haven't changed the calendar app that much since 1.1, so this is likely not a regression.

Comment 18

[Kevin Grandon :kgrandon]

Comment on attachment 8389765 [details] [review]
Pull request on Github

Seems like everything still works and this is cleaner with the transform-origin. Nice job!

Comment 19

[Kevin Grandon :kgrandon]

Landed in master: https://github.com/mozilla-b2g/gaia/commit/c21b37ba8643b6785e19722c2e95b425625eea91

Comment 20

[Francesco Lodolo [:flod]]

Verified on current master on Keon, label is aligned for both English and Italian.

Comment 22

[yaoyao.wu]

(In reply to Kevin Grandon :kgrandon from comment #19)
> Landed in master:
> https://github.com/mozilla-b2g/gaia/commit/
> c21b37ba8643b6785e19722c2e95b425625eea91
Thanks for your advice, I have nominated bug 967260 for 1.3T.
Would you please help to land on v1.3?

Comment 23

[Dylan Oliver [:doliver]]

This was already determined not to block 1.3 in comment #17. I don't think we have any new information here that would change the decision.

Comment 24

[yaoyao.wu]

It seems that the solution still couldn't solve my problem, in tmail the translation string "முழு நாள்" still can't be displayed fully.

Hi அருண் குமார்-Arun Kumar ,

   Could you please give a shorter translation string of "All Day"(முழு நாள் in Tmail)? The current translation string முழு நாள் is a bit longer for fully display.
Thanks!

Comment 25

[அருண் குமார்-Arun Kumar]

Hi Yaoyao,

Before changing, Could you please provide us the screen shot ?
Also let me know how to re-produce the same on my keon ?

Thanks
Arun

Comment 26

[yaoyao.wu]

Attachment: calendar.png

Hi அருண் குமார்-Arun Kumar,

The attachment is the screenshot after adding the code of https://github.com/mozilla-b2g/gaia/commit/c21b37ba8643b6785e19722c2e95b425625eea91

STR is :
1 set language Tmail
2 open calendar app
3 choose week view

Thanks!

Comment 27

[அருண் குமார்-Arun Kumar]

Just removed the space in "முழு நாள்". It will look like "முழுநாள்".
Also updated in pootle FxOS2.0-2.1(current master).

You can change as i justed above in FxOS v1.3 Tamil Translations.
Let me know if you have any queries.

Thanks!