Can preview's User Agent Stylesheet be disabled?

[st_albert]

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:

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

Thanks in advance for any insights y'all can provide!
Albert

[KevinH]

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.

[BeckyEbook]

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.

[KevinH]

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?

[DiapDealer]

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.

[st_albert]

Originally Posted by KevinH

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?

Yes, you are right. My bad, I was reading the hierarchy wrong. The active font-weight is indeed bold. However, bold is not displayed in the preview window.

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.

[DiapDealer]

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.

[KevinH]

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.

[st_albert]

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

[DiapDealer]

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.

[KevinH]

@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?

[JSWolf]

Originally Posted by KevinH

Perhaps someone on Windows can check it and report back.

I do see bold text using the OP's CSS in Sigil 2.1.0 with Windows 11. The font I have chosen as my default font in preview does have all four styles.

[KevinH]

But in your test did you choose an absolute size in px for the test and set font-weight to 900?

[st_albert]

Originally Posted by KevinH

@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?

Well, that was very interesting. The only thing that seems to be critical is that font-weight: >= 800. That one change allowed bold to be displayed, no matter the font size, be it 125% or 18px.

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

[theducks]

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.