Using CSS to widen test column?

fre1102 · 09-11-2022, 08:16 PM

On some of my epubs, the text is in a very narrow column on the display. It makes it unreadable. I asked on a reddit forum and got the answer that I needed to use css to fix it and that this forum was a good resouce.

I've been reading on here about css for a few hours and found the css wiki, but nothing so far seems to address text (or page, maybe) column width.

Can anyone point me in the right direction? Pages to read to get educated? Search terms, anything? I just want to read these things.

Thanks in advance.

Turtle91 · 09-11-2022, 08:34 PM

Do you have a sample of the css/html of the affected area?

Your most common answer here will probably be: "Don't use columns" It's hard to determine how it will look in an ePub on many different sized devices...it's better used on a website.

But if you absolutely need to use multi-columns it's best to show us what you have and we can recommend fixes. What device are you reading this on?

fre1102 · 09-11-2022, 08:49 PM

It's an epub book on a Kobo Libra H2O. It's an existing ebook I'm trying to read, not something I'm trying to design.

I can access the css on Calibre. Just...copy the css display from that?

Turtle91 · 09-11-2022, 09:55 PM

Yes. And if you can copy a small section of the html tag(s) of the area giving the problem. Don’t paste any copyrighted material… delete the text or replace with Loren ipsum…

fre1102 · 09-11-2022, 10:20 PM

Quote:

Originally Posted by Turtle91

Yes. And if you can copy a small section of the html tag(s) of the area giving the problem. Don’t paste any copyrighted material… delete the text or replace with Loren ipsum…

Like this?

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Generator" content="Microsoft Word 10 (filtered)"/>
<title>THE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="page_styles.css"/>
</head>
<body lang="EN-US" link="blue" vlink="purple" class="calibre">
 


<div class="section2">

<h3 class="calibre21">THE FIRST YEAR (110 B.C)</h3>

*

IN THE
CONSULSHIP OF

MARCUS
MINUCIUS RUFUS

AND

SPURIUS
POSTUMIUS ALBINUS

*

[<a href="FMR%20002.jpg" title="Lucius Cornelius Sulla" class="pcalibre pcalibre1">FMR
002.jpg</a>] 

*



I'm confused because on the Calibre display it looks fine. Once it's on the Kobo, though, it's a tiny column in the middle of the Kobo display.

enuddleyarbl · 09-11-2022, 10:53 PM

That's the HTML that makes up the text of the book. The CSS is in the stylesheet.css file noted at the top of what you posted. In the Calibre editor, you should see that in the left column.

But, if you're seeing a narrow column of text on the ereader and a normal width in Calibre's editor/viewer, it's possible you've set your margins on the Libre too big. On the Kobo, in the book, if you bring up the reading menu and look at the font section, is your margin slider all the way to the left? If not, move it there. If it is, copy that CSS from stylesheet.css here.

fre1102 · 09-11-2022, 11:19 PM

Quote:

Originally Posted by enuddleyarbl

That's the HTML that makes up the text of the book. The CSS is in the stylesheet.css file noted at the top of what you posted. In the Calibre editor, you should see that in the left column.

But, if you're seeing a narrow column of text on the ereader and a normal width in Calibre's editor/viewer, it's possible you've set your margins on the Libre too big. On the Kobo, in the book, if you bring up the reading menu and look at the font section, is your margin slider all the way to the left? If not, move it there. If it is, copy that CSS from stylesheet.css here.

Moving the margin slider to the max left or right doesn't change anything on the Kobo display. This is the stylesheet.css?

.calibre {
display: block;
font-size: 1em;
padding-left: 0;
padding-right: 0;
text-align: justify;
text-justify-trim: punctuation;
margin: 0 5pt;
}
.calibre1 {
color: black;
font-family: "Casque OpenFace";
font-size: 2.66667em;
line-height: 1.2;
}
.calibre2 {
font-family: "Times New Roman";
}
.calibre3 {
color: black;
font-size: 1em;
}
.calibre4 {
font-style: italic;
}
.calibre5 {
color: black;
}
.calibre6 {
font-weight: bold;
}
.calibre7 {
color: black;
text-transform: uppercase;
}
.calibre8 {
text-transform: uppercase;
}
.calibre9 {
font-family: "Times New Roman";
font-size: 2.66667em;
line-height: 1.2;
}
.calibre10 {
color: black;
font-size: 0.77778em;
}
.calibre11 {
font-size: 0.55556em;
}
.calibre12 {
font-family: Arial;
font-size: 0.41667em;
}
.calibre13 {
display: block;
}
.calibre14 {
display: table-row-group;
vertical-align: middle;
}
.calibre15 {
display: table-row;
vertical-align: inherit;
}
.calibre16 {
display: table-cell;
text-align: inherit;
vertical-align: top;
width: 3.45in;
padding: 0 5.4pt;
}
.calibre17 {
display: block;
font-family: Arial;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
page-break-after: avoid;
text-autospace: none;
margin: 12pt 0 3pt;
}
.calibre18 {
display: table-cell;
text-align: inherit;
vertical-align: top;
width: 49.5pt;
padding: 0 5.4pt;
}
.calibre19 {
display: table-cell;
text-align: inherit;
vertical-align: top;
width: 135pt;
padding: 0 5.4pt;
}
.calibre20 {
display: block;
font-family: Arial;
font-size: 1.41667em;
font-weight: bold;
line-height: 1.2;
page-break-after: avoid;
text-autospace: none;
margin: 12pt 0 3pt;
}
.calibre21 {
display: block;
font-family: Arial;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
page-break-after: avoid;
text-align: center;
text-autospace: none;
margin: 12pt 0 3pt;
}
.calibre22 {
font-family: "Casque OpenFace";
font-size: 1.25926em;
font-weight: normal;
line-height: 1.2;
}
.calibre23 {
color: black;
font-family: "Casque OpenFace";
font-size: 1.88889em;
line-height: 1.2;
}
.calibre24 {
color: black;
font-family: "Bookman Old Style";
font-size: 1.88889em;
line-height: 1.2;
}
.calibre25 {
color: black;
font-family: "Bookman Old Style";
font-size: 1.33333em;
}
.calibre26 {
font-family: "Bookman Old Style";
font-size: 1.33333em;
}
.calibre27 {
font-size: 1em;
line-height: normal;
vertical-align: sub;
}
.calibre28 {
color: black;
font-family: "Bookman Old Style";
font-size: 2.66667em;
line-height: 1.2;
}
.calibre29 {
font-size: 0.75em;
line-height: 1.2;
vertical-align: sub;
}
.calibre30 {
display: block;
font-family: Arial;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
page-break-after: avoid;
text-align: center;
text-autospace: none;
margin: 6pt 0 3pt;
}
.calibre31 {
font-family: "Casque OpenFace";
font-size: 1.88889em;
line-height: 1.2;
}
.calibre32 {
font-size: 0.75em;
line-height: 1.2;
vertical-align: super;
}
.calibre33 {
display: table-cell;
text-align: inherit;
vertical-align: top;
width: 0.75in;
padding: 0 5.4pt;
}
.calibre34 {
color: black;
font-family: "Bookman Old Style";
}
.calibre35 {
color: black;
font-size: 2.44444em;
line-height: 1.2;
}
.calibre36 {
font-size: 1.33333em;
}
.calibre37 {
font-size: 1em;
}
.msonormal {
display: block;
font-family: Arial;
font-size: 0.75em;
text-align: center;
text-autospace: none;
margin: 0 0 0.0001pt;
}
.msonormal1 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
margin: 0 0 0.0001pt;
}
.msonormal2 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-align: right;
text-autospace: none;
margin: 0 0 0.0001pt;
}
.msonormal3 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
text-indent: 0.25in;
margin: 0 0 0.0001pt;
}
.msonormal4 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
text-indent: 0.5in;
margin: 0 0 0.0001pt;
}
.msonormal5 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
text-indent: 0.25in;
margin: 6pt 0 0.0001pt;
}
.msonormal6 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
margin: 6pt 0 0.0001pt;
}
.msonormal7 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-align: center;
text-autospace: none;
margin: 6pt 0 0.0001pt;
}
.msonormal8 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
text-indent: 0.25in;
margin: 6pt 0 0.0001pt 0.5in;
}
.msonormal9 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-align: center;
text-autospace: none;
text-indent: 0.25in;
margin: 6pt 0 0.0001pt;
}
.msonormal10 {
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
text-indent: 0.25in;
margin: 0 0 0.0001pt 0.5in;
}
.msonormal11 {
background: white;
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
text-indent: 0.25in;
margin: 6pt 0 0.0001pt;
}
.msonormal12 {
background: white;
display: block;
font-family: Arial;
font-size: 0.75em;
text-autospace: none;
margin: 0 0 0.0001pt;
}
.msotablegrid {
border-collapse: collapse;
border-spacing: 2px;
display: table;
margin-bottom: 0;
margin-top: 0;
text-indent: 0;
}
.msotablegrid1 {
border-collapse: collapse;
border-spacing: 2px;
display: table;
margin-bottom: 0;
margin-left: 54.9pt;
margin-top: 0;
text-indent: 0;
}
.section {
display: block;
page: Section1;
}
.section1 {
display: block;
page: Section2;
}
.section2 {
display: block;
page: Section3;
}
.section3 {
display: block;
page: Section5;
}
.section4 {
display: block;
page: Section6;
}
.pcalibre:link {
color: blue;
text-decoration: underline;
}
.pcalibre1:visited {
color: purple;
text-decoration: underline;
}

enuddleyarbl · 09-12-2022, 10:03 AM

Yes. That's the CSS. Unfortunately, nothing obvious leaps out at me to explain what you're seeing. Of course, I only dabble, and we can't see all the HTML in the text, so hopefully someone more knowledgeable can help.

Is that the whole stylesheet? Is there anything like @page or @media at the top? How about a body or p statement? How about in page_styles.css (I assume that's just font faces being defined)? Does the whole book get mushed into a thin column or does it start someplace in particular?

Turtle91 · 09-12-2022, 10:58 AM

I agree. I don’t see anything in that section of html that would cause it to do that. I’m leaning towards a device setting.

JSWolf · 09-12-2022, 11:42 AM

Quote:

Originally Posted by Turtle91

Yes. And if you can copy a small section of the html tag(s) of the area giving the problem. Don’t paste any copyrighted material… delete the text or replace with Loren ipsum…

It is OK to paste some of the text.

JSWolf · 09-12-2022, 11:42 AM

This copy of The First Man in Rome by Colleen McCullough is an illegal copy. Please do not give any help for it.

https://www.kobo.com/us/en/ebook/the...-man-in-rome-4

It's published by HarperCollins and in no way is that the code from the eBook be it ePub or KF8.

fre1102 · 09-12-2022, 12:25 PM

Quote:

Originally Posted by enuddleyarbl

Yes. That's the CSS. Unfortunately, nothing obvious leaps out at me to explain what you're seeing. Of course, I only dabble, and we can't see all the HTML in the text, so hopefully someone more knowledgeable can help.

Is that the whole stylesheet? Is there anything like @page or @media at the top? How about a body or p statement? How about in page_styles.css (I assume that's just font faces being defined)? Does the whole book get mushed into a thin column or does it start someplace in particular?

There's nothing else at the top. Where do I find page_styles.css?

It's the whole book.

Playing around with the rest of the settings, decreasing the font size to basically unreadable widens the column. Increasing the font size narrows the column.

fre1102 · 09-12-2022, 12:28 PM

Quote:

Originally Posted by Turtle91

I agree. I don’t see anything in that section of html that would cause it to do that. I’m leaning towards a device setting.

I've got Font Face, Font Size, Line Spacing, Margins, and Justification.

Changing font size widens the column.

This is my first Kobo, for the past...wow, fifteen years, I've read on an Android tablet with Aldiko, mostly. So this environment is new. Any help on making this thing readable is greatly appreciated.

fre1102 · 09-12-2022, 12:33 PM

Quote:

Originally Posted by JSWolf

This copy of The First Man in Rome by Colleen McCullough is an illegal copy. Please do not give any help for it.

https://www.kobo.com/us/en/ebook/the...-man-in-rome-4

It's published by HarperCollins and in no way is that the code from the eBook be it ePub or KF8.

This ebook was probably originally a Kindle version, converted to epub. Purchased...forever ago, right after I was given a Kindle, then switched away from the Amazon ecosystem.

There were some I couldn't convert, though I don't think this is one of them. If it makes you happy, I can convert the azw file again. Either way, I'd just like to re-read the book I already bought.

JSWolf · 09-12-2022, 01:50 PM

Quote:

Originally Posted by fre1102

This ebook was probably originally a Kindle version, converted to epub. Purchased...forever ago, right after I was given a Kindle, then switched away from the Amazon ecosystem.

There were some I couldn't convert, though I don't think this is one of them. If it makes you happy, I can convert the azw file again. Either way, I'd just like to re-read the book I already bought.

What happens if you convert from the Kindle version to ePub and then try that?

09-11-2022, 08:16 PM	#1
fre1102 Member Posts: 10 Karma: 10 Join Date: Sep 2022 Device: Kobo Libra H2O	Using CSS to widen test column? On some of my epubs, the text is in a very narrow column on the display. It makes it unreadable. I asked on a reddit forum and got the answer that I needed to use css to fix it and that this forum was a good resouce. I've been reading on here about css for a few hours and found the css wiki, but nothing so far seems to address text (or page, maybe) column width. Can anyone point me in the right direction? Pages to read to get educated? Search terms, anything? I just want to read these things. Thanks in advance.

09-12-2022, 10:03 AM	#8
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	Yes. That's the CSS. Unfortunately, nothing obvious leaps out at me to explain what you're seeing. Of course, I only dabble, and we can't see all the HTML in the text, so hopefully someone more knowledgeable can help. Is that the whole stylesheet? Is there anything like @page or @media at the top? How about a body or p statement? How about in page_styles.css (I assume that's just font faces being defined)? Does the whole book get mushed into a thin column or does it start someplace in particular? Last edited by enuddleyarbl; 09-12-2022 at 10:16 AM.

09-12-2022, 11:42 AM	#11
JSWolf Resident Curmudgeon Posts: 75,165 Karma: 132820308 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	This copy of *The First Man in Rome* by Colleen McCullough is an illegal copy. Please do not give any help for it. https://www.kobo.com/us/en/ebook/the...-man-in-rome-4 It's published by HarperCollins and in no way is that the code from the eBook be it ePub or KF8. Last edited by JSWolf; 09-12-2022 at 11:49 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Method to Convert Fancy CSS to Everyday CSS?	enuddleyarbl	ePub	25	07-25-2022 02:07 PM
Customize viewer css. pygments.css not found	drglenn	Viewer	2	12-18-2020 04:52 PM
pagestyle.css extra / integrated in stylesheet.css / or not at all?	chaot	Workshop	14	02-24-2017 11:10 PM
Broken PW screen, anyway to widen margins?	Xelnok	Amazon Kindle	5	04-10-2013 01:51 PM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM

09-11-2022, 08:34 PM	#2
Turtle91 A Hairy Wizard Posts: 3,131 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Do you have a sample of the css/html of the affected area? Your most common answer here will probably be: "Don't use columns" It's hard to determine how it will look in an ePub on many different sized devices...it's better used on a website. But if you absolutely need to use multi-columns it's best to show us what you have and we can recommend fixes. What device are you reading this on?

09-11-2022, 08:49 PM	#3
fre1102 Member Posts: 10 Karma: 10 Join Date: Sep 2022 Device: Kobo Libra H2O	It's an epub book on a Kobo Libra H2O. It's an existing ebook I'm trying to read, not something I'm trying to design. I can access the css on Calibre. Just...copy the css display from that?

09-11-2022, 09:55 PM	#4
Turtle91 A Hairy Wizard Posts: 3,131 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Yes. And if you can copy a small section of the html tag(s) of the area giving the problem. Don’t paste any copyrighted material… delete the text or replace with Loren ipsum…

09-11-2022, 10:53 PM	#6
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	That's the HTML that makes up the text of the book. The CSS is in the stylesheet.css file noted at the top of what you posted. In the Calibre editor, you should see that in the left column. But, if you're seeing a narrow column of text on the ereader and a normal width in Calibre's editor/viewer, it's possible you've set your margins on the Libre too big. On the Kobo, in the book, if you bring up the reading menu and look at the font section, is your margin slider all the way to the left? If not, move it there. If it is, copy that CSS from stylesheet.css here.

09-12-2022, 10:58 AM	#9
Turtle91 A Hairy Wizard Posts: 3,131 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I agree. I don’t see anything in that section of html that would cause it to do that. I’m leaning towards a device setting.

Advert

Advert