A possible new feature for Sigil 1.9.11?

[DiapDealer]

Originally Posted by RbnJrg

Sigil not only runs under Linux, there is a Windows and a Mac version

Exactly. But everything we DO do needs to accommodate all three. And I see this option as being problematic on one of them.

[KevinH]

And unfortunately, that invert impacts image / pngs and inverts their colour to make things look very very strange.

Instead, you can assign a Sigil clip that pastes:

  <style>
    body {
      background-color: initial !important;
      color: initial !important;
      filter: invert(1);
    }  
  </style>

into the head tag of any single xhtml page, or alternatively pastes a simpler clip added to any css file. So you can enable this when needed all with a single click on its clip, and even remove it with a single click using a Saved Search Find and Replace.

So adding an option to do this is probably not worthwhile especially given its potentially negative impact on images and issues with linux.

Try creating it as a clip and building a saved search to easily remove them. That should be be doable.

[RbnJrg]

Originally Posted by KevinH

And unfortunately, that invert impacts image / pngs and inverts their colour to make things look very very strange.

Instead, you can assign a Sigil clip that pastes:

  <style>
    body {
      background-color: initial !important;
      color: initial !important;
      filter: invert(1);
    }  
  </style>

into the head tag of any single xhtml page, or alternatively pastes a simpler clip added to any css file. So you can enable this when needed all with a single click on its clip, and even remove it with a single click using a Saved Search Find and Replace.

So adding an option to do this is probably not worthwhile especially given its potentially negative impact on images and issues with linux.

Try creating it as a clip and building a saved search to easily remove them. That should be be doable.

That is NOT a solution, because it will affect not only PP but the epub itself. Regarding images, is very easy to solve that, for example, by adding (so far) in custom_preview_style.css the following:

body {
    background-color: initial !important;
    color: initial !important;
    filter: invert(1); 
}

svg, img {
    filter: invert(1);    /* This is ok, it must be invert(1) and not invert(0) */
}

Now you'll have images with original colors and the rest, with inverted colors (do the try and you'll see; by the way, with line art images, it could be and advantage to have images inverted in dark mode).

How does Sigil handle the styles added in custom_preview_style.css? The only thing you should do to add the option is to modify that sheet in order to incorporate the selectors (also you can use classes and/or ids) and styles I wrote before and after that, refresh the PP. And when the option is disabled, erase selectors and styles and again, refresh PP. For a programmer of your carats, that is a piece of cake. And after that, user will be able to see black border, table-borders, and similars, in dark mode.

[DiapDealer]

You understand this is strictly for aesthetics, right? We're not going to do a ton of work to make a couple of people feel a little warmer and fuzzier about dark Preview. If being able to easily see all portions of the EPUB equally well is important, then most are simply going to turn off Preview's dark appearance on books where colors and/or borders are important. That's what I do.

You clearly don't understand how Preview's dark appearance is achieved (custom_preview_style.css has nothing to do with it), nor how new gui preferences are added. If you did, you'd understand that it's a rather tedious process that touches a lot files and ends with wildly underwhelming results when all is said and done. Not a single bit of it is "all's ya gotta do is blah, blah, blah and Bob's yer uncle!" None of it is hard. Adding more preferences is just time-consuming and unrewarding. I'd rather spend my time elsewhere. Especially when what you want can already be achieved by adding/editing one special css file (a feature we added for this very reason) in Sigil's prefs directory with no Sigil code changes required. Or by just turning off Dark Preview on books that rely heavily on colors/borders.

[KevinH]

Yes, I agree with DiapDealer here. It is just not useful enough. If you want that feature, create two different custom_preview_style.css files one with that block of css and one without that (under two different names) and use a os system level shortcut to run a bat file (or bash script) to copy the one you want to custom_preview_style.css. You can do this anytime Sigil is open without hurting anything as that file is read only from Sigil's perspective and is included each time Preview is refreshed.

Much like how I manually change to and from dark mode using macOS Settings now. Sigil options are not needed for this.

[RbnJrg]

Originally Posted by DiapDealer

You understand this is strictly for aesthetics, right? We're not going to do a ton of work to make a couple of people feel a little warmer and fuzzier about dark Preview.

Well, if you say is a ton of work, it will be a ton of work, I can't dispute that. But no, I'm not agree with you that is only for aesthetics reasons (as if Sigil wouldn't have any features for aesthetics; just open the Preference/Appearance dialog and you'll see a lot of them; also you can start to think in supressing the command Mend and Prettify to be just Mend, come on!). Thank you very much for your attention and sorry for bother you.

[RbnJrg]

Originally Posted by KevinH

Sigil options are not needed for this.

Thank you very much for your attention and sorry for bother you.

[KevinH]

It is not a bother, at all.

It is just a "feature" that I think will not benefit that many people, imho.

If I am using many colours in a epub's css, then it means the book is limited to light mode or dark mode, not typically both.

If meant to be read in light mode (ie. using dark borders) then Previewing it in light mode makes the most sense. The opposite is true for an epub that is meant to be read in dark mode.

If an epub is meant to be read under either/both, then the colours must be chosen to work in both modes.

And in none of those cases, would inverting colours be needed as Preview would be done in the mode it was designed for.

So in many ways, adding invert will just hide the fact that when choosing border colours, you are constraining under what mode the epub can be read in.

Sorry.

[DiapDealer]

Originally Posted by RbnJrg

Thank you very much for your attention and sorry for bother you.

Like Kevin said: it's no bother. It's just not a cause I'm willing to take up. Please do not hesitate to make further suggestions.

[BeckyEbook]

I found the problem described by @RbnJrg interesting. I thought it was just a special case that could be solved by the trivial editing of custom_preview_style.css, however, some toggler of custom stylesheets could be a nice addition.

I absolutely do not suggest adding this clunky solution should be added to the release, but it may be useful for two or three people in the world among Sigil users who build the code themselves. An additional advantage is the lack of any changes to the settings – the selected mode works until the Sigil is closed. I also used an existing icon to simplify it.

Three-stage toggler works cyclically:
a) custom_preview_style.css
b) custom_preview_style_invert.css
c) disable custom css

This is how it works in practice:


Code:

Spoiler:

--- W:\Develop\Sigil\Sigil-master\src\MainUI\before\PreviewWindow.cpp	2022-06-26 15:25:04.000000000 +0200
+++ W:\Develop\Sigil\Sigil-master\src\MainUI\after\PreviewWindow.cpp	2022-06-30 09:26:39.921443500 +0200
@@ -238,12 +238,16 @@
 
     m_reloadAction  = new QAction(QIcon(":/main/reload-page.svg"),"", this);
     m_reloadAction->setToolTip(tr("Update Preview Window"));
+    
+    m_toggleCSSAction  = new QAction(QIcon(":/main/emblem-favorite.svg"),"", this);
+    m_toggleCSSAction->setToolTip(tr("Toggle Custom CSS File"));
 
     QToolBar * tb = new QToolBar();
     tb->addAction(m_inspectAction);
     tb->addAction(m_selectAction);
     tb->addAction(m_copyAction);
     tb->addAction(m_reloadAction);
+    tb->addAction(m_toggleCSSAction);
     tb->addWidget(m_progress);
 
     m_buttons->addWidget(tb);
@@ -443,6 +447,30 @@
     }
 }
 
+void PreviewWindow::ToggleCSS() {
+    QString default_user_css = "file:///" + Utility::DefinePrefsDir() + "/custom_preview_style.css";
+    QString invert_user_css  = "file:///" + Utility::DefinePrefsDir() + "/custom_preview_style_invert.css";
+
+    if (toggleCustomCSS < 1 || toggleCustomCSS > 3) {
+    	toggleCustomCSS = 2;
+    }
+    switch (toggleCustomCSS) {
+        case 1:
+            m_usercssurl = default_user_css;
+            toggleCustomCSS = 2;
+            break;
+        case 2:
+            m_usercssurl = invert_user_css;
+            toggleCustomCSS = 3;
+            break;
+        case 3:
+            m_usercssurl = "";
+            toggleCustomCSS = 1;
+            break;
+    }
+    ReloadPreview();
+}
+
 QList<ElementIndex> PreviewWindow::GetCaretLocation()
 {
     DBG qDebug() << "PreviewWindow in GetCaretLocation";
@@ -638,6 +666,7 @@
     connect(m_selectAction,  SIGNAL(triggered()),           this, SLOT(SelectAllPreview()));
     connect(m_copyAction,    SIGNAL(triggered()),           this, SLOT(CopyPreview()));
     connect(m_reloadAction,  SIGNAL(triggered()),           this, SLOT(ReloadPreview()));
+    connect(m_toggleCSSAction,  SIGNAL(triggered()),        this, SLOT(ToggleCSS()));
     connect(m_Inspector,     SIGNAL(finished(int)),         this, SLOT(InspectorClosed(int)));
     connect(this,     SIGNAL(topLevelChanged(bool)),        this, SLOT(previewFloated(bool)));
 }

--- W:\Develop\Sigil\Sigil-master\src\MainUI\before\PreviewWindow.h	2022-06-26 15:25:04.000000000 +0200
+++ W:\Develop\Sigil\Sigil-master\src\MainUI\after\PreviewWindow.h	2022-06-30 09:13:31.106294200 +0200
@@ -81,6 +81,7 @@
      */
     void setTitleText(const QString &text);
     void previewFloated(bool wasFloated);
+    void ToggleCSS();
 
 signals:
     void Shown();
@@ -142,11 +143,13 @@
     QAction * m_selectAction;
     QAction * m_copyAction;
     QAction * m_reloadAction;
+    QAction * m_toggleCSSAction;
 
     QList<ElementIndex> m_location;
     
     QTimer m_OverlayTimer;
     bool m_updatingPage;
+    int toggleCustomCSS;
     bool m_usingMathML;
 };

[KevinH]

@BeckyEbook,
Nicely done! Your approach definitely simplifies things and as you said, no additional options are needed for your solution and the Preview toolbar has plenty of room for a single new icon.

If we do decide to adopt your solution into master would you be willing to create its own Preview toolbar icon that would indicate what it this tool actually does?

And @RbnJrg, would you be willing to add descriptions for it and create and update the Sigil User Guide with those new pieces and of course update all Preview images used in the guide because of the new icon?

If so, this is something I would consider adding to master if DiapDealer is okay with it and others feel it would be useful.

[RbnJrg]

Originally Posted by BeckyEbook

I found the problem described by @RbnJrg interesting. I thought it was just a special case that could be solved by the trivial editing of custom_preview_style.css, however, some toggler of custom stylesheets could be a nice addition.

Thank you very much Becky! Your solution was astounding! I compiled Sigil with Qt6 and your tweak worked flawlessly (I suppose it must also work with Qt5).

I definitely think that your improvement should be part of future versions of Sigil because it is pure profit without any drawback. It can be applied not only in my case (which I am looking for inverted colors) but in many other totally different ones (for example, a user might want the text contained in <p> tags are seen in the Preview Panel in one color and the text contained in <div> tags are seen in another color, etc., etc.). And now I think that what you made it could be applied not only for users that work in dark mode but also in users that work in the normal one. Fantastic solution, many, many thanks Becky!

[RbnJrg]

Originally Posted by KevinH

If we do decide to adopt your solution into master...

Do it Kevin, it is pure profit without any inconvenience. It can be used not only for my case (that I was looking for inverted colors) but for many others (suppose for example one user would like to preview text in <p> tags in color blue and text in <div> tags [or blockquote tags or whatever] in green to have a better idea of a particular layout).

And @RbnJrg, would you be willing to add descriptions for it and create and update the Sigil User Guide with those new pieces and of course update all Preview images used in the guide because of the new icon?

Yes, of course! Gladly will do that

[DiapDealer]

Originally Posted by KevinH

If so, this is something I would consider adding to master if DiapDealer is okay with it and others feel it would be useful.

No new preferences needed... No UI crowding... Someone else has done the work... What's not to love?!

P.S. I'd like to make sure, however, that it would have the ability to toggle between 3 options (both custom_preview_style.css and custom_preview_style_invert.css exist) and 2 options (only custom_preview_style.css exists), as well as having the button be disabled if none exist. Or some variation thereof.

[KevinH]

If the selected file does not exist, nothing should be injected so the no custom previews css case should always work.

Hopefully, BeckyEbook can create a new icon that somehow conveys what the icon is used for.

Once that happens, I'll add this to master.