TOC text is light gray (at least on Kobo), and an unexplained workaround

[repilo]

The Table Of Contents text generated by Sigil looks light colored on the Kobo (Libra 2) ereader. The most obvious solution does not work:

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:

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?

[DiapDealer]

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*

[Turtle91]

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

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

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!

[repilo]

Originally Posted by Turtle91

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:

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....

[JSWolf]

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.

[Turtle91]

Originally Posted by repilo

Okay. Doing that I find the following code in TOC.xhtml:

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;”

[DiapDealer]

The other thing to consider is that link text is not supposed to be black.

[DNSB]

I seem to remember that RMSDK uses blue as the link colour by default.

[repilo]

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.

Originally Posted by Turtle91

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.

Originally Posted by JSWolf

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.

Originally Posted by DiapDealer

The other thing to consider is that link text is not supposed to be black.

Originally Posted by DNSB

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.

[DiapDealer]

Originally Posted by repilo

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?

[Turtle91]

Originally Posted by repilo

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!

[jackie_w]

Originally Posted by repilo

<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:

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.

[repilo]

Originally Posted by DiapDealer

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>:

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.

[DiapDealer]

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.

[Turtle91]

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.