Skip to content

Improve CSS for source code block line numbers #143192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+55 −78
Open

Improve CSS for source code block line numbers #143192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e329b2
Improve CSS for source code block line numbers
GuillaumeGomez Jun 29, 2025
7c3bdda
Update rustdoc GUI tests
GuillaumeGomez Jun 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 30 additions & 68 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
3. Copy the filenames with updated suffixes from the directory.
*/

/* ignore-tidy-filelength */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This somewhat confuses me due to the fact that this file has actually gotten smaller, though it probably is correct to have here even if it isn't needed yet.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will be soon enough (like for #137229). We're already very close to the limit so better just allow it for everything to come.


:root {
--nav-sub-mobile-padding: 8px;
--search-typename-width: 6.75rem;
Expand Down Expand Up @@ -915,32 +917,30 @@ ul.block, .block li, .block ul {
overflow: auto;
}

.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] {
width: calc(1ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
width: calc(2ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
width: calc(3ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] {
width: calc(4ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] {
width: calc(5ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] {
width: calc(6ch + var(--line-number-padding) * 2);
.example-wrap code {
position: relative;
}
.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] {
width: calc(7ch + var(--line-number-padding) * 2);
.example-wrap pre code span {
display: inline;
}
.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
width: calc(8ch + var(--line-number-padding) * 2);

.example-wrap.digits-1 { --example-wrap-digits-count: 1ch; }
.example-wrap.digits-2 { --example-wrap-digits-count: 2ch; }
.example-wrap.digits-3 { --example-wrap-digits-count: 3ch; }
.example-wrap.digits-4 { --example-wrap-digits-count: 4ch; }
.example-wrap.digits-5 { --example-wrap-digits-count: 5ch; }
.example-wrap.digits-6 { --example-wrap-digits-count: 6ch; }
.example-wrap.digits-7 { --example-wrap-digits-count: 7ch; }
.example-wrap.digits-8 { --example-wrap-digits-count: 8ch; }
.example-wrap.digits-9 { --example-wrap-digits-count: 9ch; }
Comment on lines +927 to +935
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this really the best way to do this? It very well may be "good enough", but here's some misc thoughts:

  1. pretty sure you can define -- variables in a style attribute then have the styles of child elements reference them with var. This way we could have the render logic pass an actual integer on to css instead of an integer-like enum.
  2. if a rust file used the maximum possible file size and made each line use an average of 4 bytes or less, including newlines, it would have a 10 digit number of lines. Do we ever generate a digits-10 css class?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. pretty sure you can define -- variables in a style attribute then have the styles of child elements reference them with var. This way we could have the render logic pass an actual integer on to css instead of an integer-like enum.

I'm not sure if I misunderstand what you mean or if you misunderstood what's going on in this code. Basically, example-wrap elements are everywhere, not just source code pages. Meaning we can have quite a wide number of lines (and of digits) around. I don't see how passing a variable to CSS could address this problem. Also, this is not an enum at all, just a class (digits-*) which is added by rustdoc when creating the <code>.

2. if a rust file used the maximum possible file size and made each line use an average of 4 bytes or less, including newlines, it would have a 10 digit number of lines. Do we ever generate a digits-10 css class?

I doubt a 10 billion lines source code will ever exist, so we should be on the safe side. Doing 1 billion is likely already far too much.


.example-wrap [data-nosnippet] {
width: calc(var(--example-wrap-digits-count) + var(--line-number-padding) * 2);
}
.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] {
width: calc(9ch + var(--line-number-padding) * 2);
.example-wrap pre > code {
padding-left: calc(
var(--example-wrap-digits-count) + var(--line-number-padding) * 2
+ var(--line-number-right-margin));
}

.example-wrap [data-nosnippet] {
Expand All @@ -953,63 +953,25 @@ ul.block, .block li, .block ul {
-ms-user-select: none;
user-select: none;
padding: 0 var(--line-number-padding);
}
.example-wrap [data-nosnippet]:target {
border-right: none;
position: absolute;
left: 0;
}
.example-wrap .line-highlighted[data-nosnippet] {
background-color: var(--src-line-number-highlighted-background-color);
}
:root.word-wrap-source-code .example-wrap [data-nosnippet] {
position: absolute;
left: 0;
}
.word-wrap-source-code .example-wrap pre > code {
.example-wrap pre > code {
position: relative;
word-break: break-all;
display: block;
}
:root.word-wrap-source-code .example-wrap pre > code {
display: block;
word-break: break-all;
white-space: pre-wrap;
}
:root.word-wrap-source-code .example-wrap pre > code * {
word-break: break-all;
}
:root.word-wrap-source-code .example-wrap.digits-1 pre > code {
padding-left: calc(
1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-2 pre > code {
padding-left: calc(
2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-3 pre > code {
padding-left: calc(
3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-4 pre > code {
padding-left: calc(
4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-5 pre > code {
padding-left: calc(
5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-6 pre > code {
padding-left: calc(
6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-7 pre > code {
padding-left: calc(
7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-8 pre > code {
padding-left: calc(
8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.word-wrap-source-code .example-wrap.digits-9 pre > code {
padding-left: calc(
9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
.example-wrap [data-nosnippet]:target {
border-right: none;
}
.example-wrap.hide-lines [data-nosnippet] {
display: none;
Expand Down
4 changes: 2 additions & 2 deletions tests/rustdoc-gui/docblock-code-block-line-number.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,13 +129,13 @@ define-function: ("check-line-numbers-existence", [], block {
wait-for-local-storage-false: {"rustdoc-line-numbers": "true" }
assert-false: ".example-line-numbers"
// Line numbers should still be there.
assert-css: ("[data-nosnippet]", { "display": "inline-block"})
assert-css: ("[data-nosnippet]", { "display": "block"})
// Now disabling the setting.
click: "input#line-numbers"
wait-for-local-storage: {"rustdoc-line-numbers": "true" }
assert-false: ".example-line-numbers"
// Line numbers should still be there.
assert-css: ("[data-nosnippet]", { "display": "inline-block"})
assert-css: ("[data-nosnippet]", { "display": "block"})
// Closing settings menu.
click: "#settings-menu"
wait-for-css: ("#settings", {"display": "none"})
Expand Down
2 changes: 1 addition & 1 deletion tests/rustdoc-gui/scrape-examples-button-focus.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test.html"
// The next/prev buttons vertically scroll the code viewport between examples
move-cursor-to: ".scraped-example-list > .scraped-example"
wait-for: ".scraped-example-list > .scraped-example .next"
store-value: (initialScrollTop, 250)
store-value: (initialScrollTop, 236)
assert-property: (".scraped-example-list > .scraped-example .rust", {
"scrollTop": |initialScrollTop|,
}, NEAR)
Expand Down
29 changes: 22 additions & 7 deletions tests/rustdoc-gui/source-code-wrapping.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,32 @@ go-to: "file://" + |DOC_PATH| + "/test_docs/trait_bounds/index.html"
click: "#settings-menu"
wait-for: "#settings"

store-size: (".example-wrap .rust code", {"width": rust_width, "height": rust_height})
store-size: (".example-wrap .language-text code", {"width": txt_width, "height": txt_height})
store-property: (".example-wrap .rust code", {"scrollWidth": rust_width, "scrollHeight": rust_height})
store-property: (".example-wrap .language-text code", {"scrollWidth": txt_width, "scrollHeight": txt_height})
call-function: ("click-code-wrapping", {"expected": "true"})
wait-for-size-false: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
wait-for-property-false: (
".example-wrap .rust code",
{"scrollWidth": |rust_width|, "scrollHeight": |rust_height|},
)

store-size: (".example-wrap .rust code", {"width": new_rust_width, "height": new_rust_height})
store-size: (".example-wrap .language-text code", {"width": new_txt_width, "height": new_txt_height})
store-property: (
".example-wrap .rust code",
{"scrollWidth": new_rust_width, "scrollHeight": new_rust_height},
)
store-property: (
".example-wrap .language-text code",
{"scrollWidth": new_txt_width, "scrollHeight": new_txt_height},
)

assert: |rust_width| > |new_rust_width| && |rust_height| < |new_rust_height|
assert: |txt_width| > |new_txt_width| && |txt_height| < |new_txt_height|

call-function: ("click-code-wrapping", {"expected": "false"})
wait-for-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
assert-size: (".example-wrap .language-text code", {"width": |txt_width|, "height": |txt_height|})
wait-for-property: (
".example-wrap .rust code",
{"scrollWidth": |rust_width|, "scrollHeight": |rust_height|},
)
assert-property: (
".example-wrap .language-text code",
{"scrollWidth": |txt_width|, "scrollHeight": |txt_height|},
)
Loading