Website Block Wrapping Fix

twowheels · 12-01-2021, 12:23 PM

A few months ago the KOReader website was modified to add a new block on the front-page, and ever since then the blocks have wrapped really weird on every browser on all of my computers, regardless of OS. It's been bugging me, so I took a stab at fixing it, and found that if I change the links class CSS to change the display value and specify an explicit width it fixes the problem and looks a lot nicer:

display: inline-block
width: 80%

Anyhow, hopefully this helps and somebody who manages the site can make the change as I think it detracts from the apparent quality of this otherwise awesome program!

Click image for larger version

Name: KOReaderBlockWrapping.png
Views: 133
Size: 404.8 KB
ID: 190582

Click image for larger version

Name: KoReaderFixed.png
Views: 138
Size: 347.8 KB
ID: 190583

pazos · 12-01-2021, 03:16 PM

Hey, thanks!

You can submit the fix directly to https://github.com/koreader/koreader.github.io

twowheels · 12-01-2021, 04:14 PM

Quote:

Originally Posted by pazos

Hey, thanks!

You can submit the fix directly to https://github.com/koreader/koreader.github.io

I looked in the github repo and couldn't find the website. I'll look again.

twowheels · 12-01-2021, 04:29 PM

Thanks, @pazos. I was looking at the repo for the koreader app, didn't realize that you'd linked to a different repo in your comment.

I've created the PR.

Frenzie · 12-03-2021, 02:09 AM

It's secretly been there for probably a very long time because I stupidly never checked outside of Firefox. Interestingly, old Opera (with Presto) displays it the same as Chromia do today, so I'll have to reread the spec to see who's right. In any case it's a bit distressing that there's still such a big rendering difference a decade down the line.

I should probably just convert it to flexbox or grid instead.

twowheels · 12-03-2021, 02:13 PM

I'm not a web developer, my focus is on back-end C++ code, so I'm always flailing around a bit when it comes to CSS. Moreover, I have spent my entire career developing medical devices, which have a constrained runtime that we have full control over -- I don't know how web devs deal with the pain of multiple non-compliant browsers on multiple operating systems with a variety of new frameworks that are released on a seemingly weekly basis without losing their minds. haha

Frenzie · 12-03-2021, 03:57 PM

I don't know, perhaps the columns property just isn't very popular for some reason. Personally I've always liked it though.

12-01-2021, 12:23 PM	#1
twowheels Wizard Posts: 1,853 Karma: 13432974 Join Date: Nov 2010 Device: Kobo Clara HD, iPad Pro 10", iPhone 15 Pro, Boox Note Max	Website Block Wrapping Fix A few months ago the KOReader website was modified to add a new block on the front-page, and ever since then the blocks have wrapped really weird on every browser on all of my computers, regardless of OS. It's been bugging me, so I took a stab at fixing it, and found that if I change the links class CSS to change the display value and specify an explicit width it fixes the problem and looks a lot nicer: display: inline-block width: 80% Anyhow, hopefully this helps and somebody who manages the site can make the change as I think it detracts from the apparent quality of this otherwise awesome program!

12-03-2021, 02:09 AM	#5
Frenzie Wizard Posts: 1,750 Karma: 730681 Join Date: Oct 2014 Location: Antwerp Device: Kobo Aura H2O	It's secretly been there for probably a very long time because I stupidly never checked outside of Firefox. Interestingly, old Opera (with Presto) displays it the same as Chromia do today, so I'll have to reread the spec to see who's right. In any case it's a bit distressing that there's still such a big rendering difference a decade down the line. I should probably just convert it to flexbox or grid instead. Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Amazon to block Australian shoppers from its US website	Inukami	News	43	06-23-2018 04:52 PM
Wrapping text around images	lof	Conversion	10	11-22-2012 05:09 AM
How to fix text wrapping from a pdf?	pitchforks	Workshop	2	04-29-2012 05:53 AM
Line un-wrapping Factor	jjansen	Calibre	6	08-18-2010 12:21 AM
Images and text wrapping	steveboyett	Calibre	3	07-20-2010 08:26 PM

12-01-2021, 03:16 PM	#2
pazos cosiñeiro Posts: 1,406 Karma: 2451781 Join Date: Apr 2014 Device: BQ Cervantes 4	Hey, thanks! You can submit the fix directly to https://github.com/koreader/koreader.github.io

12-01-2021, 04:29 PM	#4
twowheels Wizard Posts: 1,853 Karma: 13432974 Join Date: Nov 2010 Device: Kobo Clara HD, iPad Pro 10", iPhone 15 Pro, Boox Note Max	Thanks, @pazos. I was looking at the repo for the koreader app, didn't realize that you'd linked to a different repo in your comment. I've created the PR.

12-03-2021, 02:13 PM	#6
twowheels Wizard Posts: 1,853 Karma: 13432974 Join Date: Nov 2010 Device: Kobo Clara HD, iPad Pro 10", iPhone 15 Pro, Boox Note Max	I'm not a web developer, my focus is on back-end C++ code, so I'm always flailing around a bit when it comes to CSS. Moreover, I have spent my entire career developing medical devices, which have a constrained runtime that we have full control over -- I don't know how web devs deal with the pain of multiple non-compliant browsers on multiple operating systems with a variety of new frameworks that are released on a seemingly weekly basis without losing their minds. haha

12-03-2021, 03:57 PM	#7
Frenzie Wizard Posts: 1,750 Karma: 730681 Join Date: Oct 2014 Location: Antwerp Device: Kobo Aura H2O	I don't know, perhaps the columns property just isn't very popular for some reason. Personally I've always liked it though.

Advert

Advert