No Indent Class not shared to PDFs when paragraph is inside a shaded textbox

beckej13820 commented 9 months ago

Prerequisites

[x] Can you reproduce the behavior you wish to address with all other plugins deactivated?
[x] Are you running the latest version of Pressbooks and the latest version of WordPress?
[x] Are you experiencing this issue with one of our built-in root or book themes?
[x] Did you perform a cursory search to see if your bug or enhancement is already listed?

Description

I'm having trouble getting indent and no-indent classes to apply if the paragraphs are inside a textbox. When I apply a class of no-indent, it works correctly inside the webbook, but the Prince PDF export doesn't get styled accordingly

Steps to Reproduce

Create a book with a shared textbox. Put some elements in the shared textbox such as a heading and two paragraphs.
Do an export to check default behavior.
Now apply no-indent to the paragraphs. Many style guides use no indent for the first paragraph in a textbox or after a heading, and then indentation on all subsequent paragraphs.

Expected behavior:

I expect to be able to fine tune indentation by using the Pressbooks no-indent and indent classes.

Actual behavior:

This screenshots shows a webbook using McLuhan. I have the side panel open to show that the paragraphs have the no-indent class.

The next screenshot shows the same section of the book in the PDF export. Notice that the paragraph is indented.

System Information

Root Blog Info

Root Blog ID: 1 Root Blog URL: https://pressbooks.sunycreate.cloud/

Browser

Platform: OS X Browser Name: Chrome Browser Version: 119.0.0.0 User Agent String: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

WordPress Configuration

Network URL: https://pressbooks.sunycreate.cloud/ Network Type: Subdomain Version: 6.3.2 Language: en_US WP_ENV: Not set WP_DEBUG: Enabled Memory Limit: 64M

Pressbooks Configuration

Version: 6.15.1 Root Theme: Aldine Root Theme Version: 1.19.1

Pressbooks Dependencies

Epubcheck: Installed xmllint: Installed PrinceXML: Installed Saxon-HE: Installed

Must-Use Plugins

hm-autoloader.php: n/a

Network Active Plugins

Editoria11y Accessibility Checker: 1.0.12 Git Updater: 12.3.1 Koko Analytics: 1.3.3 Limit Login Attempts Reloaded: 2.25.26 Multisite Plugin Manager: 3.1.6 Pressbooks: 6.15.1 Pressbooks Network Catalog: 1.3.3 Pressbooks Stats: 1.9.0 Unconfirmed: 1.3.6 User Switching: 1.7.0

Root Blog Active Plugins

Editoria11y Accessibility Checker: 1.0.12 Git Updater: 12.3.1 H5P: 1.15.6 Koko Analytics: 1.3.3 Limit Login Attempts Reloaded: 2.25.26 Multisite Plugin Manager: 3.1.6 Pressbooks: 6.15.1 Pressbooks Network Catalog: 1.3.3 Pressbooks Stats: 1.9.0 Unconfirmed: 1.3.6 User Switching: 1.7.0

Inactive Plugins

Candela Citation: 0.2.4 Excalibur: 0.7.0 Hypothesis: 0.6.0 Parsedown Party: 1.2.1 Pressbooks Shortcode Handler: 0.1 Pressbooks Shortcode Handler: 1.0.1 TablePress: 2.2 WordPress Importer: 0.8.1 WP QuickLaTeX: 3.8.6

Server Configuration

PHP Version: 8.1.18 MySQL Version: 5.7.30 Webserver Info: Apache

PHP Configuration

Memory Limit: 256M Upload Max Size: 150M Post Max Size: 150M Upload Max Filesize: 150M Time Limit: 60 Max Input Vars: 5000 URL-aware fopen: On (1) Display Errors: N/A

PHP Extensions

OPcache: Disabled XDebug: Disabled cURL: Supported cURL Version: 7.86.0 imagick: Installed xsl: Installed

beckej13820 commented 9 months ago

When I inspect the XHTML output from the diagnostics area, this is what I see when I inspect:

SteelWagstaff commented 9 months ago

@beckej13820 this looks like a case of CSS selection priority and specificity. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for some of the gnarly specificity details.

It looks like the print CSS has two rules that both apply to this paragraph -- one of them is the simple class selector (.no-indent) (it has a weight of 0-1-0) and the other is a class selector with an element .textbox p (which has a weight of 0-1-1). Because the latter is more specific, it takes precedence and is applied. You could probably fix this by adding a custom CSS rule to your PDF export that targeted the .no-indent class and was MORE specific than the .textbox p rule. Something like .textbox p.no-indent { text-indent: 0;} would do the trick, for example.

pressbooks / pressbooks-book