Changeset 150516 in webkit

Timestamp:

May 22, 2013 9:11:55 AM (11 years ago)

Author:

Antoine Quint

Message:

[Mac] Captions menu isn't internationalized, doesn't use rtl layout for rtl languages
​https://bugs.webkit.org/show_bug.cgi?id=116605

Reviewed by Eric Carlson.

Ensure that rtl languages are properly recognized by the captions menu such that text
layout and alignment is natural.

• css/mediaControls.css:

(::-webkit-media-controls):
Remove the forced "direction: ltr" property which was forcing all layout to be
left-to-right.

• css/mediaControlsQuickTime.css:

(video::-webkit-media-controls-closed-captions-track-list):
Remove the forced "text-align: left" property which was forcing all caption
titles to be left-aligned.

(video::-webkit-media-controls-closed-captions-track-list h3):
Use "-webkit-margin-start" instead of "padding-left" to position the heading
such that it adds the margin on the left for ltr languages and on the right
for rtl languages.

(video::-webkit-media-controls-closed-captions-track-list li):
Set "position: relative" such that the ::before pseudo-class can use "position: absolute"
to position itself relative to the caption title rather than the list element.

(video::-webkit-media-controls-closed-captions-track-list li.selected::before):
(video::-webkit-media-controls-closed-captions-track-list li.selected:hover::before):
Make the checkmarks a ::before pseudo-class rather than a background-image such that
we may control its positioning using the internationlization-friendly "-webkit-margin-start"
property.

• html/shadow/MediaControlElements.cpp:

(WebCore::MediaControlClosedCaptionsContainerElement::create):
Set the "dir" attribute to "auto" such that rtl languages are correctly handled. This
means that the first string displayed within the captions container, currently the
"Subtitles" <h3> element, defines the direction for the whole container. It is therefore
crucial that this string is properly localized in rtl languages as falling back to
english would mean the entire caption container is using ltr.

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• css/mediaControls.css (modified) (1 diff)
• css/mediaControlsQuickTime.css (modified) (4 diffs)
• html/shadow/MediaControlElements.cpp (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-05-22  Antoine Quint  <graouts@apple.com>
+
+        [Mac] Captions menu isn't internationalized, doesn't use rtl layout for rtl languages
+        https://bugs.webkit.org/show_bug.cgi?id=116605
+
+        Reviewed by Eric Carlson.
+
+        Ensure that rtl languages are properly recognized by the captions menu such that text
+        layout and alignment is natural.
+
+        * css/mediaControls.css:
+        (::-webkit-media-controls):
+        Remove the forced "direction: ltr" property which was forcing all layout to be
+        left-to-right.
+
+        * css/mediaControlsQuickTime.css:
+        (video::-webkit-media-controls-closed-captions-track-list):
+        Remove the forced "text-align: left" property which was forcing all caption
+        titles to be left-aligned.
+
+        (video::-webkit-media-controls-closed-captions-track-list h3):
+        Use "-webkit-margin-start" instead of "padding-left" to position the heading
+        such that it adds the margin on the left for ltr languages and on the right
+        for rtl languages.
+
+        (video::-webkit-media-controls-closed-captions-track-list li):
+        Set "position: relative" such that the ::before pseudo-class can use "position: absolute"
+        to position itself relative to the caption title rather than the list element.
+
+        (video::-webkit-media-controls-closed-captions-track-list li.selected::before):
+        (video::-webkit-media-controls-closed-captions-track-list li.selected:hover::before):
+        Make the checkmarks a ::before pseudo-class rather than a background-image such that
+        we may control its positioning using the internationlization-friendly "-webkit-margin-start"
+        property.
+
+        * html/shadow/MediaControlElements.cpp:
+        (WebCore::MediaControlClosedCaptionsContainerElement::create):
+        Set the "dir" attribute to "auto" such that rtl languages are correctly handled. This
+        means that the first string displayed within the captions container, currently the
+        "Subtitles" <h3> element, defines the direction for the whole container. It is therefore
+        crucial that this string is properly localized in rtl languages as falling back to
+        english would mean the entire caption container is using ltr.
+
 2013-05-22  Hugo Parente Lima  <hugo.lima@openbossa.org>
 

trunk/Source/WebCore/css/mediaControls.css

@@ -39 +39 @@
     position: relative;
     display: -webkit-flex;
-    direction: ltr;
     -webkit-align-items: flex-start;
     -webkit-justify-content: flex-end;

trunk/Source/WebCore/css/mediaControlsQuickTime.css

@@ -266 +266 @@
 video::-webkit-media-controls-closed-captions-track-list {
     display: block;
-    text-align: left;
     font-family: "Helvetica Bold", Helvetica;
     font-size: 10pt;
@@ -276 +275 @@
     color: #757575;
     text-shadow: 0 1px 0 black;
-    padding-left: 23px;
+    -webkit-margin-start: 23px;
     padding-top: 4px;
     font-weight: bold;
@@ -290 +289 @@
 
 video::-webkit-media-controls-closed-captions-track-list li {
+    position: relative;
     color: white;
     background-image: none;
@@ -312 +312 @@
 }
 
-video::-webkit-media-controls-closed-captions-track-list li.selected {
+video::-webkit-media-controls-closed-captions-track-list li.selected::before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0.25em;
+    width: 1.1em;
+    height: 1.1em;
+    -webkit-margin-start: -20px;
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="#a3a3a3" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
     background-repeat: no-repeat;
-    background-position: 17px 0.25em;
-    background-size: 1.1em 1.1em;
-}
-
-video::-webkit-media-controls-closed-captions-track-list li.selected:hover {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>'), -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f70f6), color-stop(1, #1a44f3));
-    background-repeat: no-repeat, repeat;
-    background-position: 17px 0.25em, top left;
-    background-size: 1.1em 1.1em, 100% 100%;
-}
+}
+
+video::-webkit-media-controls-closed-captions-track-list li.selected:hover::before {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
+}

trunk/Source/WebCore/html/shadow/MediaControlElements.cpp

@@ -740 +740 @@
 {
     RefPtr<MediaControlClosedCaptionsContainerElement> element = adoptRef(new MediaControlClosedCaptionsContainerElement(document));
+    element->setAttribute(dirAttr, "auto");
     element->hide();
     return element.release();