pressbooks / buckram

Opinionated SCSS components for books (web, EPUB and PDF).
https://buckram.pressbooks.org
GNU General Public License v3.0
4 stars 4 forks source link

Buckram bug: $chapter-number-border-bottom #328

Open beckej13820 opened 1 year ago

beckej13820 commented 1 year ago

Description

I'm trying to build a child theme for the first time.

I started from blank, and am attempting to create a child theme that mimics the styleguide of the University Press I am working with. Screenshot 2023-06-17 at 1 50 33 PM

Their current style includes a line after the chapter number.

In my child theme, I set some rules that I thought would create the border: // Chapter Number $chapter-number-font-size: ( epub: (60 / 10.5) 1em, prince: (60 / 10.5) 1em, web: (60 / 10.5) * 1em ) !default; $chapter-number-align: left !default; $chapter-number-after-content: '\00A0' !default; $chapter-number-border-bottom-style: solid !default; $chapter-number-border-bottom-width: 1px !default;

Screenshot 2023-06-17 at 1 53 45 PM

In the screenshot above of the PDF and the EPUB, there is no line. However in the webbook, it's displaying as expected.

Screenshot 2023-06-17 at 1 55 22 PM

Steps to Reproduce

  1. create a child theme
  2. define a chapter number border bottom style, width, and color.
  3. export EPUB, Print PDF
  4. inspect the web version where the border bottom will be displayed, and the epub and pdf where it is not.

Expected behavior:

I'd expect a border on all exports, web, pdf, and epub.

Actual behavior:

border appears on web, but not PDF or EPUB

System Information

Contents of section-titles.scss

// Section Titles

$section-header-margin-top: ( epub: 1em, prince: 1in, web: 1em ) !default;

$section-title-margin-bottom: ( epub: .5em, prince: .25em, web: .5em ) !default;

$section-title-align: left !default;

$section-title-font-size: ( epub: (24 / 10.5) 1em, prince: (24 / 10.5) 1em, web: (24 / 10.5) * 1em ) !default;

$section-subtitle-author-spacing: ( epub: 0.5em, prince: 1em, web: 0.5em ) !default;

$section-subtitle-font-size: ( epub: (16 / 10.5) 1em, prince: (16 / 10.5) 1em, web: (16 / 10.5) * 1em ) !default;

$section-subtitle-font-style: normal !default;

$section-subtitle-align: left;

//section author

$section-author-font-size: ( epub: medium, prince: (13 / 10.5) 1em, web: (13 / 10.5) 1em ) !default; $section-author-text-transform: none !default; $section-author-align: left !default; $section-author-font-style: italic !default;

// Chapter Number $chapter-number-font-size: ( epub: (60 / 10.5) 1em, prince: (60 / 10.5) 1em, web: (60 / 10.5) * 1em ) !default; $chapter-number-align: left !default; $chapter-number-after-content: '\00A0' !default; $chapter-number-border-bottom-style: solid !default; $chapter-number-border-bottom-width: 1px !default;

// Override variables above this line, using the !default flag to allow further overrides. @import 'variables/section-titles';

// Add custom SCSS below these imports and includes. @import 'components/section-titles';

System Information

Root Blog Info

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

Browser

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

WordPress Configuration

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

Pressbooks Configuration

Version: 6.11.0 Root Theme: Aldine Root Theme Version: 1.19.0

Pressbooks Dependencies

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

Must-Use Plugins

hm-autoloader.php: n/a

Network Active Plugins

Git Updater: 12.2.2 Koko Analytics: 1.0.38 Limit Login Attempts Reloaded: 2.25.18 Multisite Plugin Manager: 3.1.6 Pressbooks: 6.11.0 Pressbooks Network Catalog: 1.3.1 Pressbooks Stats: 1.9.0 Unconfirmed: 1.3.5

Root Blog Active Plugins

Git Updater: 12.2.2 Koko Analytics: 1.0.38 Limit Login Attempts Reloaded: 2.25.18 Multisite Plugin Manager: 3.1.6 Pressbooks: 6.11.0 Pressbooks Network Catalog: 1.3.1 Pressbooks Stats: 1.9.0 Unconfirmed: 1.3.5

Inactive Plugins

Candela Citation: 0.2.4 Excalibur: 0.7.0 H5P: 1.15.6 Hypothesis: 0.6.0 Pressbooks Shortcode Handler: 0.1 Pressbooks Shortcode Handler: 1.0.1 TablePress: 2.1.4 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 1 year ago

So I did some more testing on this....

I finally did get this to work, but only if I used an absolute value in $chapter-number-border-bottom-color:

If I tried to do something like:

$chapter-number-border-bottom-color: $color-1 !default;

^ this would fail on exports.

However if I used a hex value like....

$chapter-number-border-bottom-color: #000000 !default;

Then it works. Is this expected behavior?

SteelWagstaff commented 1 year ago

That sounds a little odd to me. What does the XHTML preview look like and is there a console error or CSS compiling issue you can see with browser inspect tools there? To access, create a PDF export for a book and then click the 'diagnostics' link in the footer of your admin panel and click the link under the View Source heading: Screenshot from 2023-06-29 19-01-04 URL should be https://BOOK.URL/format/xhtml?debug=prince

beckej13820 commented 1 year ago

So, I'm looking at this again:

My colors were copied from Jacobs. Jacobs defines $color-1 as

$color-1: ( epub: initial, prince: initial, web: #373d3f ) !default;

It seems to be the "initial" that is the problem with exports. Here's what it looks like when border-bottom was set to $color-1 with the error. Screenshot 2023-06-30 at 4 57 41 PM

Here's when I replaced it with the web color: Screenshot 2023-06-30 at 4 58 49 PM