The CSS rules that cause the nav-reading navigation menu to switch from living in the right/left margin of the main body to a fixed position at the bottom of the page appear to be triggered at a breakpoint that is too narrow. The result is that when the book uses webbook width: 'wide' setting the nav-reading text [i.e. Previous (Back Matter)] can overlap the main body text. It appears that this problem occurs primarily between screen widths of 1330px and 1490px. Unfortunately, this range includes the default max-width of many users' laptops. My suspicion is that the css was optimized for the text Next (Chapter), but Previous (Front Matter) has several more characters and this causes overlap issues when the previous/next buttons point to front/back matter
See two examples here:
Steps to Reproduce
Create a book with front matter, chapters, and back matter
Set the webbook width setting to 'wide'
Resize the browser to just over 1330px (when the nav-reading menu jumps from being at the page footer to the page's left-right margins
Platform: OS X
Browser Name: Chrome
Browser Version: 68.0.3440.106
User Agent String: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
PHP Version: 7.1.17-1+ubuntu16.04.1+deb.sury.org+1
MySQL Version: 5.6.10
Webserver Info: nginx/1.13.12
PHP Configuration
Safe Mode: Disabled
Memory Limit: 256M
Upload Max Size: 50M
Post Max Size: 50M
Upload Max Filesize: 50M
Time Limit: 300
Max Input Vars: 1000
URL-aware fopen: On (1)
Display Errors: N/A
Prerequisites
Description
The CSS rules that cause the nav-reading navigation menu to switch from living in the right/left margin of the main body to a fixed position at the bottom of the page appear to be triggered at a breakpoint that is too narrow. The result is that when the book uses webbook width: 'wide' setting the nav-reading text [i.e. Previous (Back Matter)] can overlap the main body text. It appears that this problem occurs primarily between screen widths of 1330px and 1490px. Unfortunately, this range includes the default max-width of many users' laptops. My suspicion is that the css was optimized for the text
Next (Chapter)
, butPrevious (Front Matter)
has several more characters and this causes overlap issues when the previous/next buttons point to front/back matterSee two examples here:
Steps to Reproduce
System Information
Book Info
Book ID: 100 Book URL: https://wisc.pb.unizin.org/statsprimer/ Book Privacy: Public
Browser
Platform: OS X Browser Name: Chrome Browser Version: 68.0.3440.106 User Agent String: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
WordPress Configuration
Network URL: http://wisc.pb.unizin.org/ Network Type: Subdirectory Version: 4.9.7 Language: en_US WP_ENV: production WP_DEBUG: Disabled Memory Limit: 64M
Pressbooks Configuration
Version: 5.4.5 Book Theme: Jacobs Book Theme Version: 1.1.1 Root Theme: Aldine Root Theme Version: 1.4.1
Pressbooks Dependencies
Epubcheck: Installed Kindlegen: Installed xmllint: Installed PrinceXML: Not Installed Saxon-HE: Installed
Must-Use Plugins
Bedrock Autoloader: 1.0.0 hm-autoloader.php: n/a network-storage.php: n/a TablePress Quick LaTeX Functionality Plugin: 0.1.1 telemetry.php: n/a Unizin Allow Custom Post Types: 1.0 Unizin Allow Plugins: 1.0.0 Unizin Allow Upload Extensions: 1.0.0 Unizin Mail From: 1.0.0 UW-Madison Kaltura Enable oEmbed: 1.0
Network Active Plugins
CM Tooltip Glossary: 3.6.4 H5P: 1.10.3 H5P xAPI: 0.1.7 Hypothesis: 0.5.0 iframe: 4.3 LTI: 0.1 Pressbooks: 5.4.5 Pressbooks BISAC: 2.0.0 Pressbooks Cover Generator: 2.4.0 Pressbooks Stats: 1.4.1 Pressbooks Whitelabel: 1.2.0 Redis Object Cache: 1.3.8 Regenerate Thumbnails: 3.0.2 TablePress: 1.9 TablePress Extension: DataTables Buttons: 1.1 Thin CC Exporter: 0.1.1 User Activation Keys: 4.6 Wisc Content Auth LTI: 0.2.7 Wisc H5P LTI Outcomes: 0.2.6 WP QuickLaTeX: 3.8.4
Book Active Plugins
Inactive Plugins
Akismet Anti-Spam: 3.3.4
Server Configuration
PHP Version: 7.1.17-1+ubuntu16.04.1+deb.sury.org+1 MySQL Version: 5.6.10 Webserver Info: nginx/1.13.12
PHP Configuration
Safe Mode: Disabled Memory Limit: 256M Upload Max Size: 50M Post Max Size: 50M Upload Max Filesize: 50M Time Limit: 300 Max Input Vars: 1000 URL-aware fopen: On (1) Display Errors: N/A
PHP Extensions
OPcache: Zend XDebug: Disabled cURL: Supported cURL Version: 7.47.0 imagick: Not Installed xsl: Installed