Glo Kobo Software Update 2.5.2

[Jaden]

Originally Posted by Anak

In my opinion the video review is fair as kepub is Kobos preffered ebook format and should also be considered as best optimized of customized for Kobos devices. Why else would they create their own proprietary format? To tie users/generate traffic to the Kobo eco-system, ofcourse. Kobos business is to sell (more) books and there's nothing wrong with that.

Of course there is something wrong with that.

As you can't compare the look of printed books with the look of digital books you should not compare different formats of digital books with each other - not if at least one of the readers allows you to use another format.

The video clearly shows the shortcomings of the kepub format:

• very wide header and footers
• empty text line after every paragraph
• additional margins to left and right which can not be tweaked to zero

You preference does not mean that it's a "shortcoming".

I like the header and footer and I like the blank line after every paragraph and I would hate having no border at all. Not saying everyone has to prefer the same, but to say it's a general "shortcoming" is wrong.

Also not all KePubs, as I have said before, have blank lines between paragraphs.

With the introduction of fw 2.5.2 the top header is also introduced in regular epubs, so it doesn't make the comparison unfair.

Still is, especially if you claim that the blank lines after each paragraph add to "wasting of space" and it is something that has to do with the format of the book, not the reader itself.

In a direct comparison there will be - almost with absolute certainty - less text on a Kobo screen, and when the kepub format is used the layout will look messier. While the layout on the non Kobo devices look pretty much the same as they'll follow the original layout of the publisher (even when font sizes, line heights etc. can be changed; e.g. Cybook Odyssey HD)

You may find it messier, I find it more comfortable to read. You make it sound like your preference was the only possible preference out there - which it's not.

Also the Kobo follows the original layout of the publisher (in ePubs at least). That's why you only get the blank line if the book is formatted that way. And that's why it's unfair to make it seem like you will always have blank lines after paragraphs which Kobo devices - it's not true.

[Terisa de morgan]

Originally Posted by Anak

• very wide header and footers
• empty text line after every paragraph
• additional margins to left and right which can not be tweaked to zero

Point two and three are not related specifically to format but formatting. If I send my epub with the extended driver as kepub, no aditional line appears there.

[Anak]

Originally Posted by Quexos

Thanks for this code
but I still don't know whether this goes to the css file or maybe that other file with opf extension or elsewhere.
Besides is this standard code or code specific to one ebook. After all one cannot just take the css of one book and copy paste it to another's.

If book publishers and e-readers brands did their job we wouldn't have to bother messing with the code.

  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 296 475" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="475" width="296" xlink:href="../Images/cover.jpeg"></image>
    </svg>
  </div>

The above code should be placed in the first file of the document of the file where the cover is (.xhmtl or html). At best is to place a cover in its own file and the first file in the epub. Check if it contains a link to a stylesheet.
In de CSS. Be sure that margins set to zero, like
@page {margin:0;}
p {margin:0;padding:0;}
div {margin:0;}

Change the image dimensions in the svg code to the exact image demensions of your cover file

If you have a cover of 1200×800 px, the code should look like

  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1200" width="800" xlink:href="../Images/cover.jpeg"></image>
    </svg>
  </div>

[/QUOTE]

[DNSB]

Originally Posted by Quexos

Thanks for this code
but I still don't know whether this goes to the css file or maybe that other file with opf extension or elsewhere.
Besides is this standard code or code specific to one ebook. After all one cannot just take the css of one book and copy paste it to another's.

Why ever not? I copy and paste css all the time -- that's how I generated my standard css stylesheet in the first place and how I install it when I'm using Sigil. As for where the image code goes, it is in the first file/chapter of the epub. The preference is to have only that code in the file. The only change needed is to match the height/width numbers to those of image used for the cover.

Originally Posted by Quexos

If book publishers and e-readers brands did their job we wouldn't have to bother messing with the code.

The nice thing with ebooks is that if I don't agree with how they did their job, I can change the formatting around to what I prefer.

Originally Posted by Quexos

  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 296 475" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="475" width="296" xlink:href="../Images/cover.jpeg"></image>
    </svg>
  </div>

In the code sample above, replace the 296 with the actual width of the image file and 475 with the height of the image file -- Sigil will show you those number when you open the image file.

If there is not a cover image already being displayed, use Sigil to split the first file at the <body> tag and paste the code into the new file.

You might want to check for various resources for learning about epub formatting around the web. One I like is the Pigs, Gourds and Wikis web site.

Regards,
David

[Quexos]

Ok this is probably a little over my league. I opened the first .html file within the epub.zip then I opened that html file by adding .txt so that I can see what's inside and modify if necessary and the closest thing to what you mention which is @page goes like this:
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
If that's what defines the position of the cover, maybe I could add margin-left and margin-right values ?

Also to make it all even more confusing, I forgot to mention that on my computer the e-book cover looks normal, it's only in my Kobo reader that it's stretched.


Well because a specific css sheet is for a specific book isn't it ?
if it was all standard then all css sheets would be exactly the same.
But when you look at them they are widely different, some for instance apply text rules with the name "p", others with the name "body" etc ... When through caliber it all becomes "caliber1" "caliber 2" etc ... which is even more confusing when you try to locate a value that for instance would rule indents.
In the meantime, do I just randomly cram the new code here provided and where exactly ? Just before "@page" ? Or at the very beginning (cause there is still some weird code before that)

Originally Posted by DNSB

Why ever not? I copy and paste css all the time -- that's how I install my standard css stylesheet. As for where the image code goes, it is in the first file/chapter of the epub. The preference is to have only that code in the file. The only change needed is to match the height/width numbers to those of image used for the cover.

[DNSB]

Originally Posted by Anak

The video clearly shows the output of the kepub format, which can not be changed by the user:

• a very wide (margin in the) header and footer
• empty text line after every paragraph (does not happen with all kepubs)
• additional margins to left and right which can not be tweaked to zero

I'd disagree with calling the header and footer a wide margin but that is likely logic chopping.

Your second and third points are based on the formatting applied by the publisher to the ebook. Kobo's philosophy seem to involve respecting publisher formatting giving you the closest to what the publisher originally intended. As near as I can tell, Kobo modifies the ebook to add the kepub elements but they do not modify other style elements. Much as jgoguen's driver does with epubs as they are copied to your Kobo from Calibre.

I've seen kepubs that do not have the wide right/left margins and that have minimal spacing between lines and paragraphs so they are not an artifact of the ACCESS NetFront renderer but rather following what the ebook style specifies.

If a kepub is not DRMed, you can edit it in the same way as an epub. Just be careful not to let Sigil or whatever other editor you use remove the EPUB3 elements that kepub uses.

Regards,
David

[DNSB]

Originally Posted by Quexos

Ok this is probably a little over my league. I opened the first .html file within the epub.zip then I opened that html file by adding .txt so that I can see what's inside and modify if necessary and the closest thing to what you mention which is @page goes like this:
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
If that's what defines the position of the cover, maybe I could add margin-left and margin-right values ?

Also to make it all even more confusing, I forgot to mention that on my computer the e-book cover looks normal, it's only in my Kobo reader that it's stretched.


Well because a specific css sheet is for a specific book isn't it ?
if it was all standard then all css sheets would be exactly the same.
But when you look at them they are widely different, some for instance apply text rules with the name "p", others with the name "body" etc ... When through caliber it all becomes "caliber1" "caliber 2" etc ... which is even more confusing when you try to locate a value that for instance would rule indents.
In the meantime, do I just randomly cram the new code here provided and where exactly ? Just before "@page" ? Or at the very beginning (cause there is still some weird code before that)

I'd suggest using Sigil to edit epub files. As for the differences between style sheets, you can add elements in many ways.

p would apply to all paragraphs, p.para would apply to p tags with class=para, d.poem would apply to div tags with class=poem, etc.

If you don't have a background in web page creation, the learning curve takes a while but it is worthwhile.

There are quite a few web sites that will help you to learn. W3Schools, Pigs, Gourds and Wikis (some of her publications would be quite helpful), etc.

As for the difference in images on your computer and on your Kobo, what program are you using to view them on your computer?

A sample of the entire first file from an epub follows. The image is stored as cover.jpg in the Images folder and it is 510x680 pixels. Sigil will generate various folders when you open and then save an epub if they don't already exist.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Text Redacted</title>
  <link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body class="nomargin">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 510 680" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="680" width="510" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>
</body>
</html>

Regards,
David

[Quexos]

Ok, like I said this is over my league. Like when you mention "poem" as an element to control some values, it's confusing cause I don't have poetry in my books so why is "poem" an element in css code ?

So I guess I'll stick with the basics of css and your sample code shows that this "svg" code is to be entered right after "body class" so I'll try that and see how it goes

And to answer your question I view my ebooks with "Reader for PC" it's the Sony soft to see epubs.

[DNSB]

Originally Posted by Quexos

Ok, like I said this is over my league. Like when you mention "poem" as an element to control some values, it's confusing cause I don't have poetry in my books so why is "poem" an element in css code ?

So I guess I'll stick with the basics of css and your sample code shows that this "svg" code is to be entered right after "body class" so I'll try that and see how it goes

And to answer your question I view my ebooks with "Reader for PC" it's the Sony soft to see epubs.

Poem is not a css element. It's a class I use for poems (songs, etc.) that are in an epub.

.poem  {
    display: block; 
    margin-top: 1.5em;
    margin-bottom: 1.5em;	
    margin-right:10%;
    margin-left:10%;
    }

So a poem in an ebook could have:

  <p class="poem">In Flanders fields the poppies blow<br />
     Between the crosses, row on row,<br />
   That mark our place; and in the sky<br />
   The larks, still bravely singing, fly<br />
Scarce heard amid the guns below.</p>

As I said, there is a learning curve. My default stylesheet has quite a few special purpose classes that are not used all that often but handy to have when I do need them. If you didn't like how I formatted a poem in an ebook instead of editing multiple places in the ebook, you could just edit the poem class in the stylesheet to make the changes in one spot.

If you want to see an epub on your PC close to how your Kobo will display it, try using Adobe's ADE. The code base is pretty much the same.

Regards,
David

[buffaloseven]

Originally Posted by Quexos

Ok, like I said this is over my league. Like when you mention "poem" as an element to control some values, it's confusing cause I don't have poetry in my books so why is "poem" an element in css code ?

So I guess I'll stick with the basics of css and your sample code shows that this "svg" code is to be entered right after "body class" so I'll try that and see how it goes

And to answer your question I view my ebooks with "Reader for PC" it's the Sony soft to see epubs.

I think it was just a poor explanation of what CSS selectors are.

In CSS, you can reference tags on a page just by typing the tag's name. For example "body" would reference the <body>...</body> element, "p" would reference anything inside <p>...</p> tags, and something like "div" would match anything inside generic <div>...</div> tags.

Tags can have two other identities added to them: IDs and classes. Generally classes are used to apply a common style to many different elements on a page. For example, I could have a div block and a p block with the class "centered-text" applied which, as long as I defined it properly in the CSS, would center the text in both elements. IDs are usually applied to unique code blocks that need to be identified as a singular entity.

Here's an example of a p block with an ID and a class assigned:

<p id="preface" class="lead-paragraph">
    ....
</p>

So that paragraph has an ID of "preface" and a class of "lead-paragraph". It's important to understand that IDs and classes mean nothing until they're defined in the page's CSS.

So, in CSS you reference IDs using the ID prefaced by a # sign, so for the example above we'd reference that p block by defining "#preface" in the CSS. Likewise classes are referenced by the class name prefaced by a ".". In the example above, we could reference that same paragraph by defining ".lead-paragraph" in the CSS.

You do not need to add in the type of block it is in the CSS unless you need to. For example, if I had both p blocks, tables and div's with the class "centered-text" but wanted to specify something only for the p tags, I could add a CSS reference of "p.centered-text" which says, simply, for all the p blocks with the class centered-text, here are some specifications.

Hope this helps!

[Quexos]

Ok I entered the code as suggested earlier in the thread and ... nothing. The cover is just as stretched as it was before. So even more confusion with css and codes. Why if instructed to display the image differently, the image keeps being twisted (but not on my computer) ...
I guess this shows that simply putting code that works for a book into another book is not necessarily going to work.

Well we tried, thanks for the help anyways
It's no big deal as the book is perfectly readable, it's just annoying to see that deformed cover but luckily this issue is with one book only.
Like I said, I'll stick to basic css stuff which I seem to graps, like indents, margins, paddings, orphans and windows and their values which I can change.

[DNSB]

Originally Posted by buffaloseven

I think it was just a poor explanation of what CSS selectors are.

Very likely a poor explanation in my posts. I'm not the world's greatest teacher and being mostly self-taught doesn't help.

OTOH, I seldom use the id selector, it's just too special purpose for my tastes.

Regards,
David

[Anak]

@Jaden and @Terisa de morgan
I've changed my original comment, you're both right they are not necessarily shortcomings. So I changed it to: "The video clearly shows the output of the kepub format, which can not be changed by the user:", and added after "empty text line after each paragraph", that it does not happen with all kepubs.

• I didn't use the term "wasted space".
• I dind't say anything about a comparison of digital books with printed books (or even implied)

Originally Posted by Jaden

I like the header and footer

True, I do not like the header (in its current form) but I didn't my mention my dislike in my post.
I said the header and footer are relatively wide, caused by a huge margin and the position of the text on the screen.
Some (not all) readers have a header and/or footer too. But these are generally much smaller because the margins are smaller and the text position is closer to the edge of the screen. E.g. The Cybook Odyssey HD has an option to turn the headers and footers on or off (seperately! Header and footer are also smaller). The Icarus Sense has a full screen mode, In the non full screen mode small header and footer are shown.

Originally Posted by Jaden

Also the Kobo follows the original layout of the publisher (in ePubs at least). That's why you only get the blank line if the book is formatted that way. And that's why it's unfair to make it seem like you will always have blank lines after paragraphs which Kobo devices - it's not true.

Originally Posted by Terisa de morgan

Point two and three are not related specifically to format but formatting. If I send my epub with the extended driver as kepub, no aditional line appears there.

Yes, it is caused by formatting not the use of a different rendering engine. A conversion from epub to kepub with the KoboTouchExtended plugin goes well (Thanks, jgoguen!).
Yes, Kobo tries to follow the original layout but because Kobo adds some own code to the kepub to make sure all Kobo functions work correctly (font size, line height, annotations etc.). Some code functions as a wrapper around the original code and this code is a sort of a "catch all", which is understandable as it is to costly to do it on an individual basis or manually. This Kobo code can have a huge influence on the output (e.g. add white lines between paragraphs). But true not with every kepub.
Kobo probably decided to add code to the software (epub) to turn a epub into a kepub instead on the hardware side (device or software app) because it was easier to implement and cheaper to get the desired output.

If

• original Kobo kepub does contain blanc lines between paragraphs, and the
• original epub does have no blanc line between paragraphs, and the
• user generated kepub (epub conversion to kepub with the KTEP) does not contain a blanc line between paragraphs, then

the blanc line between paragraphs are caused by the Kobo Code.

Originally Posted by Jaden

…you should not compare different formats of digital books with each other - not if at least one of the readers allows you to use another format.

No, you don't compare different formats with each other you compare readers. And if possible with the same book or same paragraph. And use the default publishers layout of the book. So books should look nearly identical, any differences are caused by the reader (engine) or css overrides/changes.
Kobo does not control the local environment of an in shop product comparision of different ereaders. If the comparision is done with kepubs that have a blanc line between paragraphs the output looks quite different when compared to the other ereaders. And potential buyers may think it is odd or even that there is something wrong.
So a fair in shop comparison depends very strongly on which books (kepubs) are preloaded on the device. I consider this tricky for Kobo.
Most potential buyers probably only epub (but this may vary among countries) and are not aware that Kobo also has its own format kepub. And asuming that they have done their home work they go to a local shop to see it in action. Which device they will buy totally depends on if it looks "good", "right" or not compared to the other readers. Their "good" or "right" not yours or mine.

___________________________
This is the Kobo code I mentioned (the red code ("kobostylehacks") is the "catch all" code that may influence the original output):

<title>Book title</title>
  <link type="text/css" rel="stylesheet" media="all" href="../Styles/stylesheet.css"></link>

<!-- kobo-style -->
<link type="text/css" rel="stylesheet" href="css/kobo.css"></link>
<script type="text/javascript" src="js/kobo.js"></script>
<style type="text/css" id="kobostylehacks">div#book-inner p, div#book-inner div { font-size: 1.0em; } a { color: black; } a:link, a:visited, a:hover, a:active { color: blue; } div#book-inner * { margin-top: 0 !important; margin-bottom: 0 !important;}</style>
</head>

body>
<div id="book-columns"><div id="book-inner">
  <p class="p9"><span class="koboSpan" id="kobo.1.1">Chapter 2</span></span></p>

  <p class="p11"><span class="sz"><span class="koboSpan" id="kobo.2.1">Thursday  13 September, 07.03 A.M., Victoria Street</span></span></p>
</div>
</div>
</body>

[Quexos]

I appreciate your effort and am officially impressed by your comprehension of css but to be honest, I don't fully understand the logic of css.
1
when you show code that goes with those brackets like "</body>" I don't call that css, I call that HTML ... so more confusion for me.
To me css goes something like .p{ margin-top: 1em; text-indent: 1.5em;} etc ...

2
css as I perceive it does not always act logically either. I've seen lots of css within epubs to realize that a same action in two different books may be triggered by different code. To take a very simple example to illustrate my point, a given book will have:
.body{text-indent: 1.5em;} while another books will have .p{text-indent: 1.5em;} and the result in each book will be EXACTLY the same, the text will indent throughout the book even though two different selectors have been used, as a result, to me .body and .P are the same.

3
Even stranger, I have seen css code that does not even change anything making me wonder why the hell it is there at all ?
again the simplest example possible:
.p{text-indent: 1.5em;}
.p2{text-indent: 2em;} etc ...
In this case I have experimented changing the p2 indent value to 0em just to see what it would change in the book and ... NOTHING changed, it's like the value is redundant. so why ? to add more confusion ?

So even though I would love to fully understand css, I think I will only stick with the basics of it. Because this is getting to a point where I spend more time trying to figure out the css and fixing it (whenever I can) than the time I spend reading, which kind of defeats the purpose of having switched from print books to e-books a couple years ago or so.

Originally Posted by buffaloseven

In CSS, you can reference tags on a page just by typing the tag's name. For example "body" would reference the <body>...</body> element, "p" would reference anything inside <p>...</p> tags, and something like "div" would match anything inside generic <div>...</div> tags.

[Ripplinger]

Quexos, if you're using Sigil, you might learn a lot about how the stylesheet.css file works if you open up an existing epub that you think is nicely formatted.

In your examples about using p or body, either style will work, but that style needs to be used within the body of the text. So if your epub text reads:

<p>This is a sample using p only.</p>

you must use a corresponding style in the stylesheet.css file for p such as:

p {
display: block; 
margin-top: 0;
margin-bottom: 0;	
margin-right: 0;
margin-left: 0;
text-align: justify;
text-indent: 1.5em;
}

Using a style for body will of course have no affect on the text since the text is set to use whatever you have defined for p.

If you set a style for p, there should be no . before the p in the stylesheet. Same goes for using body.

The elements that begin with a . are classes, so you could change

<p class="calibre1">This is a sample using p only.</p>

and have this added to your stylesheet.css file so the text would turn out in italics.

.calibre1 {
font-style: italic;
}

And the differences between html and css... to me css is using shortcuts to get your html to display the way you want it. Using html only, you would have to add all the various style information to each line and every page. With css, you link it to the html page and list each style only once there, and the html pages obey what you entered in the css sheet. This thread will probably explain the differences much better than I am.