sakura
sakura copied to clipboard
Buggy intgeraction of <code> and `text-align: justify` + my fix
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