diff --git a/apps/system/js/notifications.js b/apps/system/js/notifications.js index ac52b5f86cbc..7de35dfadbb0 100644 --- a/apps/system/js/notifications.js +++ b/apps/system/js/notifications.js @@ -476,11 +476,11 @@ var NotificationScreen = { var titleContainer = document.createElement('div'); titleContainer.classList.add('title-container'); - titleContainer.setAttribute('dir', 'auto'); var title = document.createElement('div'); title.classList.add('title'); title.textContent = detail.title; + title.setAttribute('dir', 'auto'); titleContainer.appendChild(title); diff --git a/apps/system/style/notifications/notifications.css b/apps/system/style/notifications/notifications.css index 389b8b4a4296..d9f75a24cc1e 100644 --- a/apps/system/style/notifications/notifications.css +++ b/apps/system/style/notifications/notifications.css @@ -242,8 +242,6 @@ #notifications-container .notification > div.title-container .timestamp { flex: initial; - top: -.2rem; - right: 1.5rem; padding: 0; max-width: 7.5rem; font-size: 1.4rem; @@ -313,16 +311,19 @@ html[dir="rtl"] #notifications-container .notification > img { float: right; } -html[dir="rtl"] #notifications-container .notification > div.title-container .timestamp { - left: 1.5rem; - right: unset; -} - html[dir="rtl"] #notifications-container .notification > div { margin-left: unset; margin-right: 3.7rem; } -html[dir="rtl"] #notifications-container .notification > div:-moz-dir(ltr) { +/* + * For the notification title, we need to use dir="auto" to display + * parenthesis and periods in their proper place. However, we still + * want the text to align right when in an RTL language, so we use + * the following override. See bug 1134453 and bug 1142925. + */ +html[dir="rtl"] #notifications-container .title-container .title:-moz-dir(ltr) { text-align: right; + -moz-margin-end: unset; + margin-left: 0.5rem; } diff --git a/apps/system/test/unit/notifications_test.js b/apps/system/test/unit/notifications_test.js index eeb856ac72d2..c16ab9e215da 100644 --- a/apps/system/test/unit/notifications_test.js +++ b/apps/system/test/unit/notifications_test.js @@ -388,7 +388,7 @@ suite('system/NotificationScreen >', function() { var notificationNode = document.getElementsByClassName('notification')[0]; var notificationNodeTitle = - document.querySelector('.notification .title-container'); + document.querySelector('.notification .title-container .title'); assert.equal(dir, notificationNode.dir); assert.equal('auto', notificationNodeTitle.dir); }