Skip to content

Commit dd5ff42

Browse files
jshajsha
committed
rustdoc: tweak line and ¶ spacing for a11y
The W3C Web Content Accessibility Guidelines specify a minimum line spacing of 1.5 and a minimum paragraph spacing of 1.5 times the line spacing. Our current line spacing (implemented by line-height) is 1.4, so it's a small bump to go up to 1.5. Similarly, we have a paragraph spacing of 0.6em. Bump that to 0.75em (which is 1.5 times the 0.5em distance between lines). Also, fix all the font sizes so instead of being round-ish numbers in rem (like 1.1rem, 1.2rem), they are round numbers in pixels. Ensure each font size is at least 2 pixels different than the nearest other font size, so distinctions can be clearly seen. Overall the font-sizes are mostly staying the same, being rounded up or down as appropriate. Remove a few unused styles. Simplify the display of the mobile-topbar location, by setting its margins to auto rather than trying to size it exactly to the topbar.
1 parent 03b17b1 commit dd5ff42

9 files changed

+96
-106
lines changed

‎src/librustdoc/html/static/css/rustdoc.css

+52-60
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,9 @@ html {
108108
/* General structure and fonts */
109109

110110
body {
111-
font: 1rem/1.4 "Source Serif 4", NanumBarunGothic, serif;
111+
/* Line spacing at least 1.5 per Web Content Accessibility Guidelines
112+
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
113+
font: 1rem/1.5 "Source Serif 4", NanumBarunGothic, serif;
112114
margin: 0;
113115
position: relative;
114116
/* We use overflow-wrap: break-word for Safari, which doesn't recognize
@@ -124,13 +126,13 @@ body {
124126
}
125127

126128
h1 {
127-
font-size: 1.5rem;
129+
font-size: 1.5rem; /* 24px */
128130
}
129131
h2 {
130-
font-size: 1.4rem;
132+
font-size: 1.375rem; /* 22px */
131133
}
132134
h3 {
133-
font-size: 1.3rem;
135+
font-size: 1.25rem; /* 20px */
134136
}
135137
h1, h2, h3, h4, h5, h6 {
136138
font-weight: 500;
@@ -170,7 +172,7 @@ h2,
170172
border-bottom: 1px solid;
171173
}
172174
h3.code-header {
173-
font-size: 1.1rem;
175+
font-size: 1.125rem; /* 18px */
174176
}
175177
h4.code-header {
176178
font-size: 1rem;
@@ -221,19 +223,18 @@ a.srclink,
221223
font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
222224
}
223225

224-
.content ul.crate a.crate {
225-
font-size: 1rem/1.6;
226-
}
227-
228226
ol, ul {
229-
padding-left: 25px;
227+
padding-left: 24px;
230228
}
231229
ul ul, ol ul, ul ol, ol ol {
232-
margin-bottom: .6em;
230+
margin-bottom: .625em;
233231
}
234232

235233
p {
236-
margin: 0 0 .6em 0;
234+
/* Paragraph spacing at least 1.5 times line spacing per Web Content Accessibility Guidelines.
235+
Line-height is 1.5rem, so line spacing is .5rem; .75em is 1.5 times that.
236+
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html */
237+
margin: 0 0 .75em 0;
237238
}
238239

239240
summary {
@@ -303,7 +304,7 @@ code, pre, a.test-arrow, .code-header {
303304
}
304305
.docblock code, .docblock-short code {
305306
border-radius: 3px;
306-
padding: 0 0.1em;
307+
padding: 0 0.125em;
307308
}
308309
.docblock pre code, .docblock-short pre code {
309310
padding: 0;
@@ -364,7 +365,7 @@ nav.sub {
364365
}
365366

366367
.sidebar {
367-
font-size: 0.9rem;
368+
font-size: 0.875rem;
368369
width: 250px;
369370
min-width: 200px;
370371
overflow-y: scroll;
@@ -476,8 +477,8 @@ nav.sub {
476477
.block a,
477478
h2.location a {
478479
display: block;
479-
padding: 0.3rem;
480-
margin-left: -0.3rem;
480+
padding: 0.25rem;
481+
margin-left: -0.25rem;
481482

482483
text-overflow: ellipsis;
483484
overflow: hidden;
@@ -497,7 +498,7 @@ h2.location a {
497498
}
498499

499500
.sidebar h3 {
500-
font-size: 1.1rem;
501+
font-size: 1.125rem; /* 18px */
501502
font-weight: 500;
502503
padding: 0;
503504
margin: 0;
@@ -598,18 +599,18 @@ h2.location a {
598599
white-space: pre-wrap;
599600
}
600601

601-
.top-doc .docblock h2 { font-size: 1.3rem; }
602-
.top-doc .docblock h3 { font-size: 1.15rem; }
602+
.top-doc .docblock h2 { font-size: 1.375rem; }
603+
.top-doc .docblock h3 { font-size: 1.25; }
603604
.top-doc .docblock h4,
604605
.top-doc .docblock h5 {
605-
font-size: 1.1rem;
606+
font-size: 1.125rem;
606607
}
607608
.top-doc .docblock h6 {
608609
font-size: 1rem;
609610
}
610611

611612
.docblock h5 { font-size: 1rem; }
612-
.docblock h6 { font-size: 0.95rem; }
613+
.docblock h6 { font-size: 0.875rem; }
613614

614615
.docblock {
615616
margin-left: 24px;
@@ -623,12 +624,12 @@ h2.location a {
623624

624625
.content .out-of-band {
625626
flex-grow: 0;
626-
font-size: 1.15rem;
627+
font-size: 1.125rem;
627628
font-weight: normal;
628629
float: right;
629630
}
630631

631-
.method > .code-header, .trait-impl > .code-header, .invisible > .code-header {
632+
.method > .code-header, .trait-impl > .code-header {
632633
max-width: calc(100% - 41px);
633634
display: block;
634635
}
@@ -664,7 +665,7 @@ h2.location a {
664665
.content td { vertical-align: top; }
665666
.content td:first-child { padding-right: 20px; }
666667
.content td p:first-child { margin-top: 0; }
667-
.content td h1, .content td h2 { margin-left: 0; font-size: 1.1rem; }
668+
.content td h1, .content td h2 { margin-left: 0; font-size: 1.125rem; }
668669
.content tr:first-child td { border-top: 0; }
669670

670671
.docblock table {
@@ -713,7 +714,7 @@ h2.location a {
713714
.content .fn .where,
714715
.content .where.fmt-newline {
715716
display: block;
716-
font-size: 0.8rem;
717+
font-size: 0.875rem;
717718
}
718719

719720
.content .methods > div:not(.notable-traits):not(.method) {
@@ -736,7 +737,7 @@ h2.location a {
736737
}
737738

738739
.content .item-info code {
739-
font-size: 0.81rem;
740+
font-size: 0.875rem;
740741
}
741742

742743
.content .item-info {
@@ -839,15 +840,6 @@ h2.small-section-header > .anchor {
839840
text-decoration: underline;
840841
}
841842

842-
.invisible > .srclink,
843-
.method > .code-header + .srclink {
844-
position: absolute;
845-
top: 0;
846-
right: 0;
847-
font-size: 1.0625rem;
848-
font-weight: normal;
849-
}
850-
851843
.block a.current.crate { font-weight: 500; }
852844

853845
/* In most contexts we use `overflow-wrap: anywhere` to ensure that we can wrap
@@ -885,7 +877,7 @@ table,
885877
display: table-cell;
886878
}
887879
.item-left {
888-
padding-right: 1.2rem;
880+
padding-right: 1.25rem;
889881
}
890882

891883
.search-container {
@@ -907,8 +899,8 @@ table,
907899
#crate-search {
908900
min-width: 115px;
909901
margin-top: 5px;
910-
margin-left: 0.2em;
911-
padding-left: 0.3em;
902+
margin-left: 0.25em;
903+
padding-left: 0.3125em;
912904
padding-right: 23px;
913905
border: 0;
914906
border-radius: 4px;
@@ -942,7 +934,7 @@ table,
942934
border: 1px solid;
943935
border-radius: 2px;
944936
padding: 5px 8px;
945-
font-size: 1.0625rem;
937+
font-size: 1rem;
946938
transition: border-color 300ms ease;
947939
width: 100%;
948940
}
@@ -1054,15 +1046,15 @@ body.blur > :not(#help) {
10541046
.stab {
10551047
padding: 3px;
10561048
margin-bottom: 5px;
1057-
font-size: 0.9rem;
1049+
font-size: 0.875rem;
10581050
font-weight: normal;
10591051
}
10601052
.stab p {
10611053
display: inline;
10621054
}
10631055

10641056
.stab .emoji {
1065-
font-size: 1.2rem;
1057+
font-size: 1.25rem;
10661058
}
10671059

10681060
/* Black one-pixel outline around emoji shapes */
@@ -1078,10 +1070,10 @@ body.blur > :not(#help) {
10781070
.import-item .stab {
10791071
border-radius: 3px;
10801072
display: inline-block;
1081-
font-size: 0.8rem;
1073+
font-size: 0.875rem;
10821074
line-height: 1.2;
10831075
margin-bottom: 0;
1084-
margin-left: .3em;
1076+
margin-left: 0.3125em;
10851077
padding: 2px;
10861078
vertical-align: text-bottom;
10871079
}
@@ -1107,9 +1099,6 @@ body.blur > :not(#help) {
11071099
font-weight: normal;
11081100
font-size: 1rem;
11091101
}
1110-
.impl .srclink {
1111-
font-size: 1.0625rem;
1112-
}
11131102

11141103
.rightside {
11151104
float: right;
@@ -1141,7 +1130,7 @@ a.test-arrow {
11411130
position: absolute;
11421131
padding: 5px 10px 5px 10px;
11431132
border-radius: 5px;
1144-
font-size: 1.3rem;
1133+
font-size: 1.375rem;
11451134
top: 5px;
11461135
right: 5px;
11471136
z-index: 1;
@@ -1179,7 +1168,7 @@ a.test-arrow:hover{
11791168

11801169
h3.variant {
11811170
font-weight: 600;
1182-
font-size: 1.1rem;
1171+
font-size: 1.125rem;
11831172
margin-bottom: 10px;
11841173
border-bottom: none;
11851174
}
@@ -1391,7 +1380,7 @@ pre.rust {
13911380
left: 0;
13921381
cursor: pointer;
13931382
font-weight: bold;
1394-
font-size: 1.2rem;
1383+
font-size: 1.25rem;
13951384
border-bottom: 1px solid;
13961385
display: flex;
13971386
height: 40px;
@@ -1516,12 +1505,9 @@ kbd {
15161505
}
15171506
.table-display .out-of-band {
15181507
position: relative;
1519-
font-size: 1.1875rem;
1508+
font-size: 1.125rem;
15201509
display: block;
15211510
}
1522-
#implementors-list > .impl-items .table-display .out-of-band {
1523-
font-size: 1.0625rem;
1524-
}
15251511

15261512
.table-display td:hover .anchor {
15271513
display: block;
@@ -1562,7 +1548,7 @@ div.name.expand + .children {
15621548
div.name::before {
15631549
content: "\25B6";
15641550
padding-left: 4px;
1565-
font-size: 0.7rem;
1551+
font-size: 0.625rem;
15661552
position: absolute;
15671553
left: -16px;
15681554
top: 4px;
@@ -1595,8 +1581,8 @@ details.rustdoc-toggle > summary.hideme > span {
15951581
details.rustdoc-toggle > summary::before {
15961582
content: "";
15971583
cursor: pointer;
1598-
width: 17px;
1599-
height: max(17px, 1.1em);
1584+
width: 16px;
1585+
height: 16px;
16001586
background-repeat: no-repeat;
16011587
background-position: top left;
16021588
display: inline-block;
@@ -1643,7 +1629,7 @@ details.rustdoc-toggle > summary.hideme::before {
16431629
details.rustdoc-toggle > summary:not(.hideme)::before {
16441630
position: absolute;
16451631
left: -24px;
1646-
top: 3px;
1632+
top: 4px;
16471633
}
16481634

16491635
.impl-items > details.rustdoc-toggle > summary:not(.hideme)::before {
@@ -1680,8 +1666,8 @@ details.undocumented > summary::before, details.rustdoc-toggle > summary::before
16801666

16811667
details.rustdoc-toggle[open] > summary::before,
16821668
details.rustdoc-toggle[open] > summary.hideme::before {
1683-
width: 17px;
1684-
height: max(17px, 1.1em);
1669+
width: 16px;
1670+
height: 16px;
16851671
background-repeat: no-repeat;
16861672
background-position: top left;
16871673
display: inline-block;
@@ -1808,8 +1794,14 @@ details.rustdoc-toggle[open] > summary.hideme::after {
18081794
width: 0;
18091795
}
18101796

1797+
.mobile-topbar .location a {
1798+
padding: 0;
1799+
margin: 0;
1800+
}
1801+
18111802
.mobile-topbar .location {
18121803
border: none;
1804+
padding: 0;
18131805
margin: auto 0.5em auto auto;
18141806
text-overflow: ellipsis;
18151807
overflow: hidden;
@@ -1818,7 +1810,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
18181810
height is specified in pixels, this also has to be specified in
18191811
pixels to avoid overflowing the topbar when the user sets a bigger
18201812
font size. */
1821-
font-size: 22.4px;
1813+
font-size: 24px;
18221814
}
18231815

18241816
.mobile-topbar .logo-container {

‎src/test/rustdoc-gui/docblock-big-code-mobile.goml

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ goto: file://|DOC_PATH|/test_docs/long_code_block/index.html
66
show-text: true // We need to enable text draw to be able to have the "real" size
77
// Little explanations for this test: if the text wasn't displayed on two lines, it would take
88
// around 20px (which is the font size).
9-
assert-property: (".docblock p > code", {"offsetHeight": "42"})
9+
assert-property: (".docblock p > code", {"offsetHeight": "44"})

0 commit comments

Comments
 (0)