sakura icon indicating copy to clipboard operation
sakura copied to clipboard

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

Open FrostKiwi opened this issue 1 year ago • 0 comments

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.

image

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

FrostKiwi avatar Dec 26 '23 20:12 FrostKiwi