Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 08-26-2023, 06:01 AM   #1
repilo
Enthusiast
repilo began at the beginning.
 
Posts: 42
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
TOC text is light gray (at least on Kobo), and an unexplained workaround

The Table Of Contents text generated by Sigil looks light colored on the Kobo (Libra 2) ereader. The most obvious solution does not work:
Code:
div.sgc-toc-level-1 a { color:black; }
By chance I found an ebook where the TOC was displayed with black text, and I finally found this simple solution:
Code:
div.sgc-toc-level-1 a { -webkit-text-fill-color:inherit; }
Can someone please explain how this works?
Could this be considered a Kobo bug?
If not, perhaps it could be considered to include this "patch" in Sigil?
repilo is offline   Reply With Quote
Old 08-26-2023, 07:59 AM   #2
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,467
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
How would Sigil ever know that the book is intended for a Kobo in order to include said css? In my mind Sigil is not involved in this at all. I have no idea why it works, or why anything special is needed to see black text in a ToC on a Kobo. *shrug*
DiapDealer is online now   Reply With Quote
Advert
Old 08-26-2023, 08:54 AM   #3
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,071
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
By default, Sigil doesn't control the color of the ToC...or any other device/app specific feature. Sigil will create a default sgc-toc.css (and sgc-nav.css for ePub3) but that only includes positioning/structure of the TOC, not color.

Here are the default CSS file(s) created by Sigil.
Spoiler:
sgc-toc.css
Code:
div.sgc-toc-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: center;
}

div.sgc-toc-level-1 {
    margin-left: 0em;
}

div.sgc-toc-level-2 {
    margin-left: 2em;
}

div.sgc-toc-level-3 {
    margin-left: 2em;
}

div.sgc-toc-level-4 {
    margin-left: 2em;
}

div.sgc-toc-level-5 {
    margin-left: 2em;
}

div.sgc-toc-level-6 {
    margin-left: 2em;
}
sgc-nav.css
Code:
nav#landmarks {
    display:none;
}

nav#page-list {
    display:none;
}

ol {
    list-style-type: none;
}


You can, of course, create your own css styles manually - OR - add a css file (sgc-toc.css) to your Sigil preferences location. You could include your 'patch' from above in that file if you really want to.

However, I have a feeling that this is caused either by Kobo not honoring the css or, more likely, by some other CSS in your existing ePub. I would look to see if there is some other styling that is interfering. Use the Inspector tool at the bottom of your preview window to see the CSS affecting your TOC...or do a find:color on your css sheets to see where that is found.

Cheers!
Turtle91 is offline   Reply With Quote
Old 08-28-2023, 08:16 AM   #4
repilo
Enthusiast
repilo began at the beginning.
 
Posts: 42
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
Quote:
Originally Posted by Turtle91 View Post
Use the Inspector tool at the bottom of your preview window to see the CSS affecting your TOC
Okay. Doing that I find the following code in TOC.xhtml:
Code:
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
I don't know enough css to understand this, but it strikes me that the word "webkit" also comes up, as in the "patch" that, I don't know how, solves my problem.
I've read that Kobo uses WebKit for their kepub format, which I use. But Sigil doesn't know that I'm going to use a Kobo reader....
repilo is offline   Reply With Quote
Old 08-28-2023, 08:55 AM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,661
Karma: 127838198
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
The thing is, using webkit code is not going to work if you want to read as ePub on your Libra 2 or on some other program that's not webkit based.

Figure out how to do it so it works even if webkit isn't used. Webkit code (IMHO) is a crutch.
JSWolf is offline   Reply With Quote
Advert
Old 08-28-2023, 10:14 AM   #6
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,071
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by repilo View Post
Okay. Doing that I find the following code in TOC.xhtml:
Code:
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
I don't know enough css to understand this, but it strikes me that the word "webkit" also comes up, as in the "patch" that, I don't know how, solves my problem.
I've read that Kobo uses WebKit for their kepub format, which I use. But Sigil doesn't know that I'm going to use a Kobo reader....
Try deleting that entire section of code and see how it looks… or, at least delete the line that says: “color: -webkit-link;”
Turtle91 is offline   Reply With Quote
Old 08-28-2023, 10:38 AM   #7
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,467
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
The other thing to consider is that link text is not supposed to be black.

Last edited by DiapDealer; 08-28-2023 at 11:23 AM.
DiapDealer is online now   Reply With Quote
Old 08-28-2023, 03:03 PM   #8
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 34,557
Karma: 144552660
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
I seem to remember that RMSDK uses blue as the link colour by default.
DNSB is offline   Reply With Quote
Old 08-28-2023, 04:38 PM   #9
repilo
Enthusiast
repilo began at the beginning.
 
Posts: 42
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
Thank you all.
Note that I have already found a solution, the issue is that it is somewhat arcane and the most logical solution [div.sgc-toc-level-1 a { color:black; }] does not work on Kobo.

Quote:
Originally Posted by Turtle91 View Post
Try deleting that entire section of code and see how it looks… or, at least delete the line that says: “color: -webkit-link;”
I don't know how to delete it, because it is a hidden code that I can only see via code inspector.

Quote:
Originally Posted by JSWolf View Post
The thing is, using webkit code is not going to work if you want to read as ePub on your Libra 2 or on some other program that's not webkit based.
I read epub converted on the fly to kepub with Calibre, on Kobo Libra 2 reader.
I would like to see the TOC in black text, like when I send the same epub to a Kindle.

Quote:
Originally Posted by DiapDealer View Post
The other thing to consider is that link text is not supposed to be black.
Quote:
Originally Posted by DNSB View Post
I seem to remember that RMSDK uses blue as the link colour by default.
That's why the TOC looks light gray on the reader. To my eyes it looks bad and that's why I try to set the text black. As it is in the table of contents of a paper book.

This is beyond my limited knowledge, but according to the code inspector, Sigil introduces webkit-related code [a:-webkit-any-link { color: -webkit-link; ...}] in the background and in a non-accessible way.
My question is whether, since the blue text looks bad on the e-ink screen, could this code be changed so that the color is black and looks good.
repilo is offline   Reply With Quote
Old 08-28-2023, 04:44 PM   #10
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,467
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
Originally Posted by repilo View Post
This is beyond my limited knowledge, but according to the code inspector, Sigil introduces webkit-related code [a:-webkit-any-link { color: -webkit-link; ...}] in the background and in a non-accessible way.
As one of the two Sigil developers, I can assure you that Sigil has done no such thing. The only webkit css Sigil ever injects, is for scrollbars and backgrounds in dark mode. And those are never saved as part of the epub, they're only used to render things darkly within Sigil's Preview.

Have you ever played with using a custom css for Sigil's Preview that is stored in its preference directory?

Last edited by DiapDealer; 08-28-2023 at 04:52 PM.
DiapDealer is online now   Reply With Quote
Old 08-28-2023, 07:48 PM   #11
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,071
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by repilo View Post
I don't know how to delete it, because it is a hidden code that I can only see via code inspector.

The inspector is a read-only display of what css is being applied to the item, and where it is being applied from...or where it might be overridden.


You need to go to the actual CSS file, found in the book browser (usually on the left side of the main window) under the "Stylesheets" folder. Double-click on that css file and it will open in the main code view window. Then find the section of code that you were concerned with (a:-webkit-any-link { color: -webkit-link; ...}).


Cheers!
Turtle91 is offline   Reply With Quote
Old 08-28-2023, 09:28 PM   #12
jackie_w
Grand Sorcerer
jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.
 
Posts: 6,171
Karma: 16228536
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
Quote:
Originally Posted by repilo View Post
<snip> ...
I've read that Kobo uses WebKit for their kepub format, which I use.
You may not be aware that the Kobo reading app for kepubs has the following CSS built into the firmware:
Code:
a:link, a:visited, a:hover, a:active { border-bottom: 1px dotted black !important; color: #696969 !important; }
and will therefore be applied to all kepubs.

If you're a kobopatch user you could change this override to something you prefer, but as this isn't a discussion which belongs in the Sigil forum I'll leave it at that.
jackie_w is offline   Reply With Quote
Old 08-29-2023, 05:32 AM   #13
repilo
Enthusiast
repilo began at the beginning.
 
Posts: 42
Karma: 10
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
Quote:
Originally Posted by DiapDealer View Post
As one of the two Sigil developers, I can assure you that Sigil has done no such thing. The only webkit css Sigil ever injects, is for scrollbars and backgrounds in dark mode. And those are never saved as part of the epub, they're only used to render things darkly within Sigil's Preview.

Have you ever played with using a custom css for Sigil's Preview that is stored in its preference directory?
As far as I know, I have not touched or seen any custom css in the preferences directory. What exactly is that file called and what subdirectory is it in? I've searched for *.css and don't find anything (except in the "repo" folder, which seems to contain backups of my epubs).

I've created a new empty epub, without stylesheet, containing only one line with <h1>Header 1</h1>, then created a TOC and looked at TOC.xhtml with the inspector. This is what I see when I expand <body>, and then <div class="sgc-toc-level-1"> and place the cursor on <a href="Section0001.xhtml">Header 1</a>:
Code:
element.style {
}
                                      user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
Can you please do this same thing on your computer?
If you get a different result, I would like to know what happens in my case.
Sorry for the inconvenience.
repilo is offline   Reply With Quote
Old 08-29-2023, 06:18 AM   #14
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,467
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
I'll check when I get a free moment. I suppose it's possible that Preview's QtWebEngine browser could be injecting that particular css, But even if it is, the point is that it's not being saved within the epub itself. Meaning that it can't possibly affect how the epub will look on a different device (Kobo or otherwise). Only the css in the epub (and the device/app's own default css) can effect rendering. The user-agent css cannot follow an epub from device to device/app to app.

The workaround you've discovered is simply using Sigil to add css to the epub itself that overrides the Kobo default css that jackie_w mentioned above.

Last edited by DiapDealer; 08-29-2023 at 07:40 AM.
DiapDealer is online now   Reply With Quote
Old 08-29-2023, 07:55 AM   #15
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,071
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
In your specific epub (not Sigil's or device/app default) you can edit your epub's css sheet. The filename can be different but if it is one created by Sigil's TOC generator it will be called 'sgc-toc.css'. You can add your patch to that specific epub by editing it there. You can then save that file to your Sigil preferences folder and Sigil will automatically use it (with your included patch) every time it makes a new ToC.
Attached Thumbnails
Click image for larger version

Name:	Screenshot-2023-08-29-075701.jpg
Views:	24
Size:	43.4 KB
ID:	203425  

Last edited by Turtle91; 08-29-2023 at 07:58 AM.
Turtle91 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Forma Is there an auto-fix for books having grey background or uses light-gray text? droopy Kobo Reader 78 07-13-2020 11:29 AM
Dropdown menu text is gray on gray (Linux Mint) droopy Calibre 8 08-18-2019 09:15 PM
Troubleshooting text editing workaround for paperwhite techdummy Amazon Kindle 0 10-30-2017 12:51 PM
Glo Partial workaround to make light always-on markino Kobo Reader 7 11-27-2012 05:14 AM
Workaround for clipping text Prince Hal Sony Reader 10 03-03-2010 11:53 AM


All times are GMT -4. The time now is 12:02 PM.


MobileRead.com is a privately owned, operated and funded community.