Buggy intgeraction of <code> and `text-align: justify` + my fix #17

New issue

Open

opened 2025-10-14 16:12:47 -06:00 by navan · 0 comments

navan commented

2025-10-14 16:12:47 -06:00

Owner

Originally created by @FrostKiwi on 12/26/2023

The following is (seemingly?) not a bug of Sakura.css in it's default config, but when in context of a paragraph that has text-align: justify; active and a <code> tag present. Fixable via code { white-space: unset; }

I still wanted to mention it, in case anyone comes across this.

Both interact weirdly and cause a pet-peeve of mine, articles that should be horizontally scroll-locked, scrolling to the side as you try to read the article. There is this happening on this post in my Tech Blog https://blog.frost.kiwi, which uses Sakura.css.

https://github.com/oxalorg/sakura/assets/60887273/ba53950c-5e46-476f-82ce-23aa09048c39

You can see the article scrolling side to side, even though it should be locked in one column. Culprit is this <code> block growing beyond the <main> tag's width, which has text-align: justify applied.

In my blog I fixed this via this commit and inserting a code { white-space: unset; } in this line.

With the fix applied, it now is a proper single column, without horizontal scrolling:

https://github.com/oxalorg/sakura/assets/60887273/8ecf41a4-fcff-460c-9c5f-2bdc0e2f98af

*Originally created by @FrostKiwi on 12/26/2023* The following is (seemingly?) not a bug of Sakura.css in it's default config, but when in context of a paragraph that has `text-align: justify;` active and a `<code>` tag present. Fixable via `code { white-space: unset; }` I still wanted to mention it, in case anyone comes across this. Both interact weirdly and cause a pet-peeve of mine, articles that should be horizontally scroll-locked, scrolling to the side as you try to read the article. There is this happening on [this post](https://blog.frost.kiwi/GLSL-noise-and-radial-gradient/) in my Tech Blog https://blog.frost.kiwi, which uses Sakura.css. https://github.com/oxalorg/sakura/assets/60887273/ba53950c-5e46-476f-82ce-23aa09048c39 You can see the article scrolling side to side, even though it should be locked in one column. Culprit is this `<code>` block growing beyond the `<main>` tag's width, which has `text-align: justify` applied. ![image](https://github.com/oxalorg/sakura/assets/60887273/0627444f-b734-4cd5-88a0-a0d3a10c5442) In my blog I fixed this via [this commit](https://github.com/FrostKiwi/treasurechest/commit/2911ce162711ad9a164bb83a8ae970bdd2077736) and inserting a `code { white-space: unset; }` in [this line](https://github.com/FrostKiwi/treasurechest/blob/2911ce162711ad9a164bb83a8ae970bdd2077736/style/base.css#L266). With the fix applied, it now is a proper single column, without horizontal scrolling: https://github.com/oxalorg/sakura/assets/60887273/8ecf41a4-fcff-460c-9c5f-2bdc0e2f98af