Skip to content
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.

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

rustdoc: adjust spacing and typography in header #131906

Merged
merged 1 commit into from
Oct 24, 2024

Conversation

notriddle
Copy link
Contributor

@notriddle notriddle commented Oct 18, 2024

Fixes #131589

Preview: https://notriddle.com/rustdoc-html-demo-12/spacing/std/index.html

Before After
image image
image image
image image
image image

First of all, we put 4px additional margin below the search box, and 4px margin below the header to balance it out.

The bigger problem we have to solve is making the lines look logically spaced. This is troublesome, because Fira Sans (the typeface we use here) wants to look good on average, and to avoid breaking, with text that uses ascenders and descenders. If the text we're putting in happens to not have any, things look weird (strictly speaking, there’s hand-tuning here, because the Copy Path button messes with stuff, but the overall point is that there is no true, one perfect layout).

In order to play nicely with the font, I've tweaked the text to use that space. The word "Source" for the link is now capitalized, and the Since version number now uses oldstyle nums with descenders.

@rustbot
Copy link
Collaborator

rustbot commented Oct 18, 2024

r? @GuillaumeGomez

rustbot has assigned @GuillaumeGomez.
They will have a look at your PR within the next two weeks and either review your PR or reassign to another reviewer.

Use r? to explicitly pick a reviewer

@rustbot rustbot added S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. labels Oct 18, 2024
@rustbot
Copy link
Collaborator

rustbot commented Oct 18, 2024

Some changes occurred in GUI tests.

cc @GuillaumeGomez

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez, @jsha

@notriddle notriddle added T-rustdoc-frontend Relevant to the rustdoc-frontend team, which will review and decide on the web UI/UX output. and removed T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. labels Oct 18, 2024
@@ -164,6 +164,9 @@ h1, h2, h3, h4 {
.docblock > h6:first-child {
margin-top: 0;
}
.since, .version {
font-variant-numeric: oldstyle-nums;
Copy link
Member

Choose a reason for hiding this comment

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

What's the reason behind this change?

Copy link
Contributor Author

@notriddle notriddle Oct 23, 2024

Choose a reason for hiding this comment

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

In the below screenshot of the new version, the three red lines are the same length. As you can see, the digits are the same height as the lowercase letters.

377982871-80f450af-ccc8-46d4-82ea-d4ea428f9276

In the below screenshot of the old version, the red lines are also the same length. As you can see, the digits are taller than the lowercase letters.

377982837-b5c5132d-1e5e-402e-ba19-1dea9e70ea6f

The problem with the old version is that adding the digits makes the subheader appear closer to the main header, even if its CSS box doesn't move. This means that, in the old version, there is no "correct" spacing that will look right both with and without the digits.

This is, after all, the whole purpose of these "oldstyle" numerals

Copy link
Member

Choose a reason for hiding this comment

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

I'm not very convinced by this explanation as I find the new display of numbers very weird and the issue you mentioned to be very anecdotal. If you feel strongly about it, then let's go with it. Please just add a comment with the explanation you just wrote if you do so.

r=me with or without this feature.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't feel that strongly about it. If you want to stick with the present-day format, it's okay.

Copy link
Member

Choose a reason for hiding this comment

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

Thanks! :)

@GuillaumeGomez
Copy link
Member

Thanks for the improvement!

@bors r+ rollup

@bors
Copy link
Contributor

bors commented Oct 24, 2024

📌 Commit a53655a has been approved by GuillaumeGomez

It is now in the queue for this repository.

@bors bors added S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. and removed S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. labels Oct 24, 2024
bors added a commit to rust-lang-ci/rust that referenced this pull request Oct 24, 2024
…iaskrgr

Rollup of 5 pull requests

Successful merges:

 - rust-lang#129248 (Taking a raw ref (`&raw (const|mut)`) of a deref of pointer (`*ptr`) is always safe)
 - rust-lang#131906 (rustdoc: adjust spacing and typography in header)
 - rust-lang#132084 (Consider param-env candidates even if they have errors)
 - rust-lang#132096 (Replace an FTP link in comments with an equivalent HTTPS link)
 - rust-lang#132098 (rustc_feature::Features: explain what that 'Option<Symbol>' is about)

r? `@ghost`
`@rustbot` modify labels: rollup
@bors bors merged commit 9655858 into rust-lang:master Oct 24, 2024
6 checks passed
@rustbot rustbot added this to the 1.84.0 milestone Oct 24, 2024
rust-timer added a commit to rust-lang-ci/rust that referenced this pull request Oct 24, 2024
Rollup merge of rust-lang#131906 - notriddle:notriddle/spacing, r=GuillaumeGomez

rustdoc: adjust spacing and typography in header

Fixes rust-lang#131589

Preview: https://notriddle.com/rustdoc-html-demo-12/spacing/std/index.html

| Before | After |
|--|--|
| ![image](https://github.com/user-attachments/assets/b5c5132d-1e5e-402e-ba19-1dea9e70ea6f) | ![image](https://github.com/user-attachments/assets/72570b93-bb16-4553-9da7-fc4f29b98873)
| ![image](https://github.com/user-attachments/assets/264983f0-5aec-4120-8a03-f62e52d4360d) | ![image](https://github.com/user-attachments/assets/b6925945-95e6-4858-8e91-4cfd90c164f0)
| ![image](https://github.com/user-attachments/assets/df96bfe7-195d-4aaf-97f1-a45ade34cab2) | ![image](https://github.com/user-attachments/assets/c6fe2d57-bd8a-42aa-b3cf-4f635809b9b4)
| ![image](https://github.com/user-attachments/assets/7519faa5-d6b2-41ba-9d95-6000d1dd89d1) | ![image](https://github.com/user-attachments/assets/7233c2d6-82d9-4820-bb63-dc4776a34601)

First of all, we put 4px additional margin below the search box, and 4px margin below the header to balance it out.

The bigger problem we have to solve is making the lines look logically spaced. This is troublesome, because Fira Sans (the typeface we use here) wants to look good on average, and to avoid breaking, with text that uses [ascenders and descenders](https://www.w3.org/TR/css-inline-3/images/text-edge.png). If the text we're putting in happens to not have any, things look weird (strictly speaking, there’s hand-tuning here, because the Copy Path button messes with stuff, but the overall point is that there is no true, one perfect layout).

In order to play nicely with the font, I've tweaked the text to use that space. The word "Source" for the link is now capitalized, and the Since version number now uses oldstyle nums with descenders.
@notriddle notriddle deleted the notriddle/spacing branch October 24, 2024 15:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. T-rustdoc-frontend Relevant to the rustdoc-frontend team, which will review and decide on the web UI/UX output.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

crate name is too small
4 participants