facebook / facebook/docusaurus

Code text not vertically aligned with regular text.

Open
#10,652 3 comments 2 reactions 0 assignees View on GitHub
bug status: needs triage
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#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](https://github.com/user-attachments/assets/7bc08be6-b0f8-413f-b8a5-48673977ef2b)

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](https://github.com/user-attachments/assets/20805832-95b6-40ab-9816-535bb0ef0594)

### 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.