Skip to content

Commit 23d0cd6

Browse files
jonathanhefnerjonathanhefner
committed
Unify LTR / RTL CSS for guides
When `main.css` is updated, it is easy for `main.rtl.css` to be overlooked (see rails#45423). This commit eliminates `main.rtl.css` in favor of a unified approach to LTR / RTL styling in `main.css`. To accomplish this, the `<body>` element is rendered with a [`dir` attribute][] (which has the same effect as setting the CSS `direction` property), and LTR- / RTL-specific styles are prefixed with `:where(body[dir="..."])` selectors. (The [`:where()` pseudo-class][] ensures that selector specificity is not changed.) This change also paves the way for automatic detection and application of LTR / RTL styles when the [`:dir()` pseudo-class][] gains widespread browser support. [`dir` attribute]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir [`:where()` pseudo-class]: https://developer.mozilla.org/en-US/docs/Web/CSS/:where [`:dir()` pseudo-class]: https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
1 parent 21acc7b commit 23d0cd6

File tree

4 files changed

+94
-847
lines changed

4 files changed

+94
-847
lines changed

‎guides/assets/stylesheets/main.css

Lines changed: 89 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ ol { list-style-type: decimal; }
2323

2424
dl { margin: 0 0 1.5em 0; }
2525
dl dt { font-weight: bold; }
26-
dd { margin-left: 1.5em;}
26+
:where(body[dir="ltr"]) dd { margin-left: 1.5em; }
27+
:where(body[dir="rtl"]) dd { margin-right: 1.5em; }
2728

2829
pre, code {
2930
font-size: 1em;
@@ -120,11 +121,12 @@ body {
120121
}
121122

122123
.wrapper {
123-
text-align: left;
124124
margin: 0 auto;
125125
max-width: 960px;
126126
padding: 0 1em;
127127
}
128+
:where(body[dir="ltr"]) .wrapper { text-align: left; }
129+
:where(body[dir="rtl"]) .wrapper { text-align: right; }
128130

129131
.red-button {
130132
display: inline-block;
@@ -283,14 +285,14 @@ body {
283285
position: absolute;
284286
z-index: 0;
285287
top: 21px;
286-
right: 0;
287288
background: #FFF;
288289
padding: 1em 1.5em 1em 1.25em;
289290
width: 20em;
290291
font-size: 0.9285em;
291292
line-height: 1.3846;
292-
margin-right: 1em;
293293
}
294+
:where(body[dir="ltr"]) #subCol { right: 0; margin-right: 1em; }
295+
:where(body[dir="rtl"]) #subCol { left: 0; margin-left: 1em; }
294296

295297

296298
@media screen and (max-width: 800px) {
@@ -299,32 +301,41 @@ body {
299301
width: inherit;
300302
margin-left: -1em;
301303
margin-right: -1em;
302-
padding-right: 1.25em;
303304
}
305+
:where(body[dir="ltr"]) #subCol { padding-right: 1.25em; }
306+
:where(body[dir="rtl"]) #subCol { padding-left: 1.25em; }
304307
}
305308

306309
#footer {
307310
padding: 2em 0;
308311
background: #222 url(../images/footer_tile.gif) repeat-x;
309312
}
310313
#footer .wrapper {
311-
padding-left: 1em;
312314
max-width: 960px;
313315
}
316+
:where(body[dir="ltr"]) #footer .wrapper { padding-left: 1em; }
317+
:where(body[dir="rtl"]) #footer .wrapper { padding-right: 1em; }
314318

315319
#footer p:last-child {
316320
margin-bottom: 0;
317321
}
318322

319-
#header .wrapper, #topNav .wrapper, #feature .wrapper {padding-left: 1em; max-width: 960px;}
320-
#feature .wrapper {max-width: 720px; padding-right: 23em; position: relative; z-index: 0;}
323+
#header .wrapper, #topNav .wrapper { max-width: 960px; }
324+
:where(body[dir="ltr"]) :is(#header .wrapper, #topNav .wrapper) { padding-left: 1em; }
325+
:where(body[dir="rtl"]) :is(#header .wrapper, #topNav .wrapper) { padding-right: 1em; }
326+
327+
#feature .wrapper { max-width: 720px; position: relative; z-index: 0; }
328+
:where(body[dir="ltr"]) #feature .wrapper { padding-left: 1em; padding-right: 23em; }
329+
:where(body[dir="rtl"]) #feature .wrapper { padding-left: 23em; padding-right: 1em; }
321330

322331
@media screen and (max-width: 960px) {
323-
#container .wrapper { padding-right: 23em; }
332+
:where(body[dir="ltr"]) #container .wrapper { padding-right: 23em; }
333+
:where(body[dir="rtl"]) #container .wrapper { padding-left: 23em; }
324334
}
325335

326336
@media screen and (max-width: 800px) {
327-
#feature .wrapper, #container .wrapper { padding-right: 1em; }
337+
:where(body[dir="ltr"]) :is(#feature .wrapper, #container .wrapper) { padding-right: 1em; }
338+
:where(body[dir="rtl"]) :is(#feature .wrapper, #container .wrapper) { padding-left: 1em; }
328339
}
329340

330341
/* Links
@@ -349,10 +360,11 @@ a, a:link, a:visited {
349360
margin: 0;
350361
padding: 0;
351362
list-style: none;
352-
float: right;
353363
margin-top: 1.5em;
354364
font-size: 1.2857em;
355365
}
366+
:where(body[dir="ltr"]) .nav { float: right; }
367+
:where(body[dir="rtl"]) .nav { float: left; }
356368

357369
.nav .nav-item {color: #FFF; text-decoration: none;}
358370
.nav .nav-item:hover {text-decoration: underline;}
@@ -368,28 +380,34 @@ a, a:link, a:visited {
368380
}
369381

370382
.guides-index .guides-index-item {
371-
background: #980905 url(../images/nav_arrow.gif) no-repeat right top;
372-
padding-right: 1em;
383+
background: #980905 url(../images/nav_arrow.gif) no-repeat;
373384
position: relative;
374385
z-index: 15;
375386
padding-bottom: 0.125em;
376387
}
388+
:where(body[dir="ltr"]) .guides-index .guides-index-item { background-position: right top; padding-right: 1em; }
389+
:where(body[dir="rtl"]) .guides-index .guides-index-item { background-position: left top; padding-left: 1em; }
377390

378-
.guides-index:hover .guides-index-item, .guides-index .guides-index-item:hover {
379-
background-position: right -81px;
391+
.guides-index:hover .guides-index-item {
380392
text-decoration: underline !important;
381393
}
394+
:where(body[dir="ltr"]) .guides-index:hover .guides-index-item { background-position: right -81px; }
395+
:where(body[dir="rtl"]) .guides-index:hover .guides-index-item { background-position: left -81px; }
382396

383397
@media screen and (min-width: 481px) {
384398
.nav {
385-
float: right;
386399
margin-top: 1.5em;
387400
font-size: 1.2857em;
388401
}
402+
:where(body[dir="ltr"]) .nav { float: right; }
403+
:where(body[dir="rtl"]) .nav { float: left; }
404+
389405
.nav>li {
390406
display: inline;
391-
margin-left: 0.5em;
392407
}
408+
:where(body[dir="ltr"]) .nav>li { margin-left: 0.5em; }
409+
:where(body[dir="rtl"]) .nav>li { margin-right: 0.5em; }
410+
393411
.guides-index.guides-index-small {
394412
display: none;
395413
}
@@ -426,11 +444,13 @@ a, a:link, a:visited {
426444
}
427445
.guides-index-small .guides-index-item {
428446
font: inherit;
429-
padding-left: .75em;
430447
font-size: .95em;
431448
background-position: 96% 16px;
432449
-webkit-appearance: none;
433450
}
451+
:where(body[dir="ltr"]) .guides-index-small .guides-index-item { padding-left: .75em; }
452+
:where(body[dir="rtl"]) .guides-index-small .guides-index-item { padding-right: .75em; }
453+
434454
.guides-index-small .guides-index-item:hover{
435455
background-position: 96% -65px;
436456
}
@@ -446,9 +466,10 @@ a, a:link, a:visited {
446466
position: absolute;
447467
z-index: 10;
448468
top: -0.25em;
449-
right: 0;
450469
padding-top: 2em;
451470
}
471+
:where(body[dir="ltr"]) #guides { right: 0; }
472+
:where(body[dir="rtl"]) #guides { left: 0; }
452473

453474
#guides.visible {
454475
display: block !important;
@@ -569,17 +590,20 @@ h6 {
569590
margin: 0 2em 2em 0;
570591
}
571592

572-
#topNav strong {color: #999; margin-right: 0.5em;}
593+
#topNav strong { color: #999; }
594+
:where(body[dir="ltr"]) #topNav strong { margin-right: 0.5em; }
595+
:where(body[dir="rtl"]) #topNav strong { margin-left: 0.5em; }
573596
#topNav strong a {color: #FFF;}
574597

575598
#header h1 {
576-
float: left;
577599
background: url(../images/rails_guides_logo_1x.png) no-repeat;
578600
width: 297px;
579601
text-indent: -9999em;
580602
margin: 0;
581603
padding: 0;
582604
}
605+
:where(body[dir="ltr"]) #header h1 { float: left; }
606+
:where(body[dir="rtl"]) #header h1 { float: right; }
583607

584608
@media
585609
only screen and (-webkit-min-device-pixel-ratio: 2),
@@ -617,23 +641,26 @@ only screen and ( min-resolution: 2dppx) {
617641
}
618642
}
619643

620-
#feature ul {margin-left: 0;}
644+
:where(body[dir="ltr"]) #feature ul { margin-left: 0; }
645+
:where(body[dir="rtl"]) #feature ul { margin-right: 0; }
646+
621647
#feature ul li {
622648
list-style: none;
623-
background: url(../images/check_bullet.gif) no-repeat left 0.5em;
649+
background: url(../images/check_bullet.gif) no-repeat;
624650
padding: 0.5em 1.75em 0.5em 1.75em;
625651
font-size: 1.1428em;
626652
font-weight: bold;
627653
}
654+
:where(body[dir="ltr"]) #feature ul li { background-position: left 0.5em }
655+
:where(body[dir="rtl"]) #feature ul li { background-position: right 0.5em }
628656

629657
#mainCol dd, #subCol dd {
630658
padding: 0.25em 0 1em;
631659
border-bottom: 1px solid #CCC;
632660
margin-bottom: 1em;
633-
margin-left: 0;
634-
/*padding-left: 28px;*/
635-
padding-left: 0;
636661
}
662+
:where(body[dir="ltr"]) :is(#mainCol dd, #subCol dd) { margin-left: 0; padding-left: 0; }
663+
:where(body[dir="rtl"]) :is(#mainCol dd, #subCol dd) { margin-right: 0; padding-right: 0; }
637664

638665
#mainCol dt, #subCol dt {
639666
font-size: 1.2857em;
@@ -651,81 +678,99 @@ only screen and ( min-resolution: 2dppx) {
651678
background: #fff9d8 url(../images/tab_yellow.gif) no-repeat left top;
652679
border: none;
653680
padding: 1.25em 1em 1.25em 48px;
654-
margin-left: 0;
655681
margin-top: 0.25em;
656682
}
683+
:where(body[dir="ltr"]) :is(#mainCol dd.work-in-progress, #subCol dd.work-in-progress) { margin-left: 0; }
684+
:where(body[dir="rtl"]) :is(#mainCol dd.work-in-progress, #subCol dd.work-in-progress) { margin-right: 0; }
657685

658686
#mainCol dd.kindle, #subCol dd.kindle {
659687
background: #d5e9f6 url(../images/tab_info.gif) no-repeat left top;
660688
border: none;
661689
padding: 1.25em 1em 1.25em 48px;
662-
margin-left: 0;
663690
margin-top: 0.25em;
664691
}
692+
:where(body[dir="ltr"]) :is(#mainCol dd.kindle, #subCol dd.kindle) { margin-left: 0; }
693+
:where(body[dir="rtl"]) :is(#mainCol dd.kindle, #subCol dd.kindle) { margin-right: 0; }
665694

666695
#mainCol div.warning, #subCol dd.warning {
667696
background: #f9d9d8 url(../images/tab_red.gif) no-repeat left top;
668697
border: none;
669698
padding: 1.25em 1.25em 0.25em 48px;
670-
margin-left: 0;
671699
margin-top: 0.25em;
672700
}
701+
:where(body[dir="ltr"]) :is(#mainCol div.warning, #subCol dd.warning) { margin-left: 0; }
702+
:where(body[dir="rtl"]) :is(#mainCol div.warning, #subCol dd.warning) { margin-right: 0; }
673703

674704
#subCol .chapters {color: #980905;}
675705
#subCol .chapters a {font-weight: bold;}
676706
#subCol .chapters ul a {font-weight: normal;}
677707
#subCol .chapters li {margin-bottom: 0.75em;}
678708
#subCol h3.chapter {margin-top: 0.25em;}
679709
#subCol h3.chapter img {vertical-align: text-bottom;}
680-
#subCol .chapters ul {margin-left: 0; margin-top: 0.5em;}
710+
#subCol .chapters ul { margin-top: 0.5em; }
711+
:where(body[dir="ltr"]) #subCol .chapters ul { margin-left: 0; }
712+
:where(body[dir="rtl"]) #subCol .chapters ul { margin-right: 0; }
681713
#subCol .chapters ul li {
682714
list-style: none;
683-
padding: 0 0 0 1em;
684-
background: url(../images/bullet.gif) no-repeat left 0.45em;
685-
margin-left: 0;
715+
padding: 0;
716+
background: url(../images/bullet.gif) no-repeat;
686717
font-size: 1em;
687718
font-weight: normal;
688719
}
720+
:where(body[dir="ltr"]) #subCol .chapters ul li { background-position: left 0.45em; padding-left: 1em; margin-left: 0; }
721+
:where(body[dir="rtl"]) #subCol .chapters ul li { background-position: right 0.45em; padding-right: 1em; margin-right: 0; }
689722

690723
#subCol li ul, li ol { margin:0 1.5em; }
691724

692725
div.code_container {
693-
background: #EEE url(../images/tab_grey.gif) no-repeat left top;
694-
padding: 0.25em 1em 0.5em 48px;
726+
background: #EEE url(../images/tab_grey.gif) no-repeat;
727+
padding-top: 0.25em;
728+
padding-bottom: 0.5em;
695729
position: relative;
696730
}
731+
:where(body[dir="ltr"]) div.code_container { background-position: left top; padding-right: 1em; padding-left: 48px; }
732+
:where(body[dir="rtl"]) div.code_container { background-position: right top; padding-right: 48px; padding-left: 1em; }
697733

698734
.note {
699-
background: #fff9d8 url(../images/tab_note.gif) no-repeat left top;
735+
background: #fff9d8 url(../images/tab_note.gif) no-repeat;
700736
border: none;
701-
padding: 1em 1em 0.25em 48px;
737+
padding-top: 1em;
738+
padding-bottom: 0.25em;
702739
margin: 0.25em 0 1.5em 0;
703740
}
741+
:where(body[dir="ltr"]) .note { background-position: left top; padding-right: 1em; padding-left: 48px; }
742+
:where(body[dir="rtl"]) .note { background-position: right top; padding-right: 48px; padding-left: 1em; }
704743

705744
.info {
706-
background: #d5e9f6 url(../images/tab_info.gif) no-repeat left top;
745+
background: #d5e9f6 url(../images/tab_info.gif) no-repeat;
707746
border: none;
708-
padding: 1em 1em 0.25em 48px;
747+
padding-top: 1em;
748+
padding-bottom: 0.25em;
709749
margin: 0.25em 0 1.5em 0;
710750
}
751+
:where(body[dir="ltr"]) .info { background-position: left top; padding-right: 1em; padding-left: 48px; }
752+
:where(body[dir="rtl"]) .info { background-position: right top; padding-right: 48px; padding-left: 1em; }
711753

712754
#mainCol div.todo {
713-
background: #fff9d8 url(../images/tab_yellow.gif) no-repeat left top;
755+
background: #fff9d8 url(../images/tab_yellow.gif) no-repeat;
714756
border: none;
715-
padding: 1em 1em 0.25em 48px;
757+
padding-top: 1em;
758+
padding-bottom: 0.25em;
716759
margin: 0.25em 0 1.5em 0;
717760
}
761+
:where(body[dir="ltr"]) #mainCol div.todo { background-position: left top; padding-right: 1em; padding-left: 48px; }
762+
:where(body[dir="rtl"]) #mainCol div.todo { background-position: right top; padding-right: 48px; padding-left: 1em; }
718763

719764
.note code, .info code, .todo code {
720765
background: #fff;
721766
}
722767

723768
#mainCol ul li {
724769
list-style:none;
725-
background: url(../images/grey_bullet.gif) no-repeat left 0.5em;
726-
padding-left: 1em;
727-
margin-left: 0;
770+
background: url(../images/grey_bullet.gif) no-repeat;
728771
}
772+
:where(body[dir="ltr"]) #mainCol ul li { background-position: left 0.5em; padding-left: 1em; margin-left: 0; }
773+
:where(body[dir="rtl"]) #mainCol ul li { background-position: right 0.5em; padding-right: 1em; margin-right: 0; }
729774

730775
#subCol .content {
731776
font-size: 0.7857em;

0 commit comments

Comments
 (0)