![]() |
#1 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 696
Karma: 150000
Join Date: Feb 2010
Device: none
|
Can preview's User Agent Stylesheet be disabled?
Edited to add:
The title of this thread is misleading. It turns out that Preview's "User Agent Stylesheet" is not the culprit, nor is Sigil version 2.1.0. If your Preview doesn't display bold text when it ought to, read on. Otherwise, "never mind." --Albert [/edit] I don't think this is a bug, but more likely ignorance on my part. That said, I am recently seeing a problem in the preview window of a newly-built Sigil 2.1.0 (and also in PageEdit 2.1.0 using Qt 6.4.2.). The computer is running Kubuntu 23.10. The problem is that when I code for a header to be bold, it does not show up bold in the preview window. Looking at the inspector window shows that this is because the "font-weight:bold;" directive is being over-ridden by the User Agent Stylesheet in preview. On an older machine, with Sigil 1.9.30 and Qt 5.15.10, preview doesn't show this behavior. (I.e. no over-ride) I've poked around in the inspector's settings, but didn't see anything helpful. Nor did adding !important to the "font-weight: bold" directive prevent the override. The stylesheet passes the CSS validator. Naturally, I realize that the User Agent Stylesheet applies only to the preview window, and is not inserted into the stylesheet of the epub itself. The epub displays properly in ADE and Calibre's epub viewer, for example. It's only an annoyance, but I would like preview to be a "what you see is what you coded" viewer. example code: Code:
h1 { margin-left:0; margin-right:0; margin-top:2.0em; margin-bottom:1.5em; border:none; padding:0; text-align:center; font-weight:bold !important; font-size:125%; clear:left; } Albert Last edited by st_albert; 04-14-2024 at 08:08 PM. Reason: misleading topic title |
![]() |
![]() |
![]() |
#2 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,019
Karma: 5449552
Join Date: Nov 2009
Device: many
|
What "User Agent Stylesheet"?
Sigil sets no "User Agent Stylesheet" and never has. Sigil can auto inject a stylesheet but only if you create and set one (see the Preview css cycle tool on its toolbar). And in Dark Mode, Sigil will inject a short css, but again, only if you tell it to in Preferences. So I have no idea where this "User Agent Stylesheet" is coming from? Perhaps something your Linux distribution has added to Qt, or they modified QtWebEngine for some reason? Your css code works just fine on my macOS machine and Sigil. Perhaps someone on Windows can check it and report back. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 742
Karma: 2296998
Join Date: Jan 2017
Location: Poland
Device: Various
|
Please provide a screenshot showing the Code View, Preview, and Inspector with the relevant section of the h1 header. Please in the Code View and the Inspector place the cursor on h1.
Sigil has the correct order of style application, so the User Agent Stylesheet is only applied if it is not overwritten with a CSS file from EPUB or custom_preview_style.css in the Sigil configuration folder. When we see a screenshot we will be able to tell if this is something unique to Kubuntu. |
![]() |
![]() |
![]() |
#4 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,019
Karma: 5449552
Join Date: Nov 2009
Device: many
|
Okay, I tried again and I think I had inspector examining the wrong line.
I see the "user agent stylesheet" listed with the conflicting styles (font size and font weight) with a line through them in the "user agent stylesheet". That is because the stylesheet with your code is overruling the "user agent" stylesheet. To illustrate, change your css to font-size: 250% and you will see the resulting Preview image grow considerably in size. Your css stylsheet is taking precedence not the built in default styling for the "h1" tag they call the "user agent". Are you sure you remembered to link your stylesheet with the xhtml file? Last edited by KevinH; 04-14-2024 at 03:06 PM. |
![]() |
![]() |
![]() |
#5 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,818
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
I'm seeing the same thing as Albert on my Arch machine. The user agent stylesheet is overriding the epub's bolding on headers. I think... I'm not sure now that I read Kevin's post about the line-through. I do know that I see no physical change in preview when changing the header from bold to normal in my css.
Last edited by DiapDealer; 04-14-2024 at 03:41 PM. |
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 696
Karma: 150000
Join Date: Feb 2010
Device: none
|
Quote:
I'm having a bit of trouble getting a good screen shot, since the inspector disappears as soon as the window loses focus. I'll keep trying. |
|
![]() |
![]() |
![]() |
#7 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,818
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Here's what I'm seeing in the Inspector for my h3 "chapter-header "class.
.chapter-header { display: block; font-size: 1.125em; font-weight: bold; line-height: 1.2; margin-bottom: 1em; margin-left: 0; margin-right: 0; margin-top: 60px; page-break-before: always; text-align: center; font-family: "Medieval Sharp", serif; } .chapter-header { display: block; font-size: 1.125em; font-weight: bold; line-height: 1.2; margin-bottom: 1em; margin-left: 0; margin-right: 0; margin-top: 60px; page-break-before: always; text-align: center; font-family: "Medieval Sharp", serif; Seems odd. The embedded font displays fine. I just can see the header change from normal to bold in Preview. |
![]() |
![]() |
![]() |
#8 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,019
Karma: 5449552
Join Date: Nov 2009
Device: many
|
If bold is not displaying, that could be an issue with the font engine (which on linux is free-type). If an actual font does not exist, it is approximated by the font-engine by the next closest font or size but not always correctly.
Try changing the font to a font that you know actually exists on your system. Then change the font-size to a valid font size in px so that no approximations by the font engine is needed. Then toggle font-weight bold to normal and back to see if there is a difference. As internally font weight is kept as a number that can vary in meaning across font foundaries. |
![]() |
![]() |
![]() |
#9 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 696
Karma: 150000
Join Date: Feb 2010
Device: none
|
Here are the screenshots BeckyEbook suggested, or as close as I can get to them, in case they will be helpful. They are taken on two machines, both running Kubuntu 23.20, one with Sigil 2.1.0 and Qt 6.4.2, and the other with Sigil 1.9.30 and Qt 5.15.10.
The exact same epub file is used in both. As you can see, the one with the older Sigil and Qt (on the right) displays bold as it should, while the newer one (on the left)does not. The active CSS is the same. I will pursue the font-engine issue when I get the chance. For now, life and the cats are calling ![]() Thanks for all the advice so far! Albert |
![]() |
![]() |
![]() |
#10 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,818
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
I'm able to bold/unbold headers in a dead-simple default epub using css with a built-in DejaVu Sans font in Preview. So there must be something else in play where it's not showing bold for @st_albert.
It's possible my embedded font (used only for headers) in the other epub may not have had a "normal" font-weight family embedded. I didn't check that closely. |
![]() |
![]() |
![]() |
#11 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,019
Karma: 5449552
Join Date: Nov 2009
Device: many
|
@st_albert
Because your font size is not specified in px, freetype is synthesizing the font from something close. Try using a specific font known to be on your system, Then setting the font size in px and choose 16 or 18px then try setting the font-weight to 900 which is the highest bold setting. What impact did that have? |
![]() |
![]() |
![]() |
#12 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,663
Karma: 134319570
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
![]() |
![]() |
![]() |
#13 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,019
Karma: 5449552
Join Date: Nov 2009
Device: many
|
But in your test did you choose an absolute size in px for the test and set font-weight to 900?
|
![]() |
![]() |
![]() |
#14 | |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 696
Karma: 150000
Join Date: Feb 2010
Device: none
|
Quote:
in the original CSS, font-weight:bold got assigned a number of 700. This did not display as darker than "normal" on my sigil-2.1.0/Qt6.4.2 machine. On the older machine, the display was clearly bold at font-weight: 700, as well as 600. I didn't try to find the minimum on the older machine. Seems like one thing for me to try would be to build Sigil-2,1,0 on the older machine with Qt-5.15.10, and see how it behaves. Not tonight though ![]() Albert |
|
![]() |
![]() |
![]() |
#15 |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,272
Karma: 57979022
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Browsers have defaults if you do not style. Inspector is a Browser (there is one in Firefox) code tool.
the (browser) defaults (user Agent?) for H tags is bold. So I agree with your guess, the font chosen just did not support the requested font-weight. |
![]() |
![]() |
![]() |
Thread Tools | Search this Thread |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Note preview disabled? | franklekens | Kobo Reader | 7 | 11-15-2019 08:54 AM |
Preview/Book View and Stylesheet Errors | ChrisI | Sigil | 10 | 08-08-2018 12:39 AM |
User agent stylesheet: a proposal | roger64 | Editor | 4 | 12-27-2014 02:00 AM |
uninvited "user agent stylesheet" | roger64 | ePub | 2 | 12-26-2014 07:50 PM |
User agent | DigitalDuke | enTourage Archive | 3 | 06-04-2010 03:20 PM |