1319598 - Time label for playback position/duration shifts around

Status: RESOLVED FIXED

(Toolkit :: Video/Audio Controls, defect)

Description

[Justin Dolske [:Dolske]]

Now that the current playback position (mm:ss) is shown in the control bar, it's causing the overall label to shift around.

It's a proportional font, so as the widths of the numbers changes, the rest of the string is moving as well. This is distracting, especially since the end of the string (the duration) generally doesn't change during playback.

YouTube seems to get this right. Not sure, from a quick look, if it's because they're cleverly positioning the individual elements, or if the Roboto font being used is fixed-width for numbers?

E.G. The YouTube markup is:
  <div>
    <span class="ytp-time-current">4:23</span>
    <span class="ytp-time-separator"> / </span>
    <span class="ytp-time-duration">9:13</span>
  </div>

Comment 1

[Ray Lin[:ralin]]

Thank you Justin.

We intended to make position/duration labels locale friendly[0], so I'm afraid the YouTube alike markup might be too complicated for localization.

> if the Roboto font being used is fixed-width for numbers?
Yes, I think it the main reason that YouTube doing right for avoiding string moving. However, Roboto is not a standard font, in order to ensure that Roboto being used properly on every machines, we might need to consider bundling Roboto font(~115kb) with Firefox. Another way to use fixed-width font, we can specify multiple fonts in CSS like:
`font-family: "Lucida Console", "Courier New", monospace;`
These fonts are commonly builtin and should work fine on most platforms. 

Importing a fixed-width font into Firefox guarantees a more nearly complete fix, but I'm not sure it worth doing for only time label. 


[0] https://dxr.mozilla.org/mozilla-central/rev/05328d3102efd4d5fc0696489734d7771d24459f/toolkit/locales/en-US/chrome/global/videocontrols.dtd#41-49(In reply to Justin Dolske [:Dolske] from comment #0)

Comment 2

[Ray Lin[:ralin]]

fix the failed copy paste in the end of previous comment...

[0] https://dxr.mozilla.org/mozilla-central/rev/05328d3102efd4d5fc0696489734d7771d24459f/toolkit/locales/en-US/chrome/global/videocontrols.dtd#41-49

Comment 3

[Ray Lin[:ralin]]

Jared, as we talked offline, we've tired to come up with a most proper approach for this issue, here I list the solutions we discussed at below:

solutions and its drawbacks:
1. use fixed-width font: unpleasant appearance
2. wrap each char within a container, such as <span>: might collapse 
3. set min-width to outermost container(div#positionAndDuration): length still variable, and how about if video duration longer than 10mins or even 1hr....
4. @font-face for number char (except slash and colon): can only be applied out of XBL scope, and it's bad to mix different font
5. text-align: length still variable
6. bundle fixed-width font: per comment 1, `Roboto` might be perfect for time label but bring it complication to bundle in <video> or as a Firefox builtin font.
I prefer to leverage fixed-width font, however, a compromise might be inevitable to visual. 

Could you give me advice about this bug? 
Thank you very much.

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

I cannot reproduce this issue on Windows or Ubuntu. It seems that the fonts used on Windows (10) and Ubuntu (16.10) do not shift the width of the numbers when scrubbing, though the font being used on OSX (10.11) does.

Setting the font-family to Helvetica Neue for OSX did stop the numbers from shifting. I'll attach a patch now.

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1319598 - Specify Helvetica Neue as the font-family for the positionDurationBox of the video controls on OSX to prevent the characters from shifting while the video is playing or scrubbing through the video.

Review commit: https://reviewboard.mozilla.org/r/98484/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/98484/

Comment 6

[Ray Lin[:ralin]]

Comment on attachment 8818432 [details]
Bug 1319598 - Specify Helvetica Neue as the font-family for the positionDurationBox of the video controls on OSX to prevent the characters from shifting while the video is playing or scrubbing through the video.

https://reviewboard.mozilla.org/r/98484/#review98754

Looks great! Thank you :)

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/064fa583321f
Specify Helvetica Neue as the font-family for the positionDurationBox of the video controls on OSX to prevent the characters from shifting while the video is playing or scrubbing through the video. The -moz-system font used by default has variable-width numbers which cause the position of the characters to shift as the number changes. r=ralin

Comment 8

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/064fa583321f

Comment 9

[Hani Yacoub, Desktop QA]

Attachment: position and total time.png

There is a bug which I think it's similar to this one logged last week https://bugzilla.mozilla.org/show_bug.cgi?id=1328060

When you open a long video with hours, minutes and seconds in it, and after seeking it to the end, and resize FF window, the last 2 digits of text label (total time) overlapped by mute button.(See screenshot attached).

Thanks.