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

Code text not vertically aligned with regular text. #10652

Open
1 of 7 tasks
ilg-ul opened this issue Nov 7, 2024 · 1 comment
Open
1 of 7 tasks

Code text not vertically aligned with regular text. #10652

ilg-ul opened this issue Nov 7, 2024 · 1 comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers

Comments

@ilg-ul
Copy link
Contributor

ilg-ul commented Nov 7, 2024

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

I noticed a small aestetic issue with code text, it is rendered slightly below the regular text baseline:

Screenshot 2024-11-07 at 20 01 20

My knowledge of CSS is poor, but I think that the reason is the code having vertical-align: middle.

Apparently setting it to baseline looks better:

Screenshot 2024-11-07 at 20 01 58

Reproducible demo

No response

Steps to reproduce

Define a H1 header with a short code in the middle

Expected behavior

All letters be aligned to the baseline.

Actual behavior

The code is below the baseline.

Your environment

  • Docusaurus version used: 3.5.2
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): Safari
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 14.6.1

Self-service

  • I'd be willing to fix this bug myself.
@ilg-ul ilg-ul added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Nov 7, 2024
@ilg-ul
Copy link
Contributor Author

ilg-ul commented Nov 7, 2024

I don't know if the code is aligned to middle on purpose or by mistake.

I added a small patch to my local css, and apparently the issue was fixed everywhere:

code {
  vertical-align: baseline;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers
Projects
None yet
Development

No branches or pull requests

1 participant