pressbooks-book icon indicating copy to clipboard operation
pressbooks-book copied to clipboard

"Style" element and "Scoped" attribute in image gallery feature prevents EPUB files from successfully validating

Open mcgratay opened this issue 4 years ago • 2 comments

Prerequisites

Description

Pressbooks allows users to create image galleries using WordPress's built-in image features. Users can create a gallery from the editor by clicking Add Media and then Create Gallery from the lefthand menu in the Add Media window.

Screen Shot 2019-12-20 at 12 15 13 PM

The gallery feature should function and display in all supported formats, but currently causes validation errors when exported as an EPUB. The "style" element and "scoped" attribute used to create the galleries are not valid per IDPF standards. Below is a copy of the error report that occurs when image galleries are exported to EPUB format:

ERROR(RSC-005): /srv/www/textopress.com/releases/20191220163828/web/app/uploads/sites/325/pressbooks/exports/Gallery-EPUB-Validation-Error-1576865290.epub/OEBPS/chapter-001-image-galleries.html(15,42): Error while parsing file: element "style" not allowed here; expected the element end-tag, text or element "a", "abbr", "acronym", "address", "applet", "b", "bdo", "big", "blockquote", "br", "cite", "code", "del", "dfn", "div", "dl", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "ol", "p", "pre", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "table", "tt", "ul" or "var" (with xmlns:ns="http://www.w3.org/2000/svg") ERROR(RSC-005): /srv/www/textopress.com/releases/20191220163828/web/app/uploads/sites/325/pressbooks/exports/Gallery-EPUB-Validation-Error-1576865290.epub/OEBPS/chapter-001-image-galleries.html(15,42): Error while parsing file: attribute "scoped" not allowed here; expected attribute "dir", "lang", "media", "title", "xml:lang" or "xml:space"

Example: https://galleriiiiiiiies.textopress.com/

Steps to Reproduce

  1. From the chapter editor, click Add Media
  2. Select Create Gallery from the lefthand menu of the Add Media Window
  3. Select existing images or upload new images to your gallery, then click Create a New Gallery button
  4. Save chapter and export to EPUB format

Expected behavior: Gallery feature can be used in all supported formats Actual behavior: Gallery feature causes validation errors in EPUB format

mcgratay avatar Dec 20 '19 18:12 mcgratay

Additional info: when a gallery is created in WordPress, it uses a shortcode, e.g. [gallery ids="21,22,23"] The HTML output for galleries is typically a div with a description list inside of it containing dl, dt, and dd elements. However, it also creates and includes a separate inline style sheet :-(, e.g.

<style type="text/css">
			#gallery-2 {
				margin: auto;
			}
			#gallery-2 .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: 100%;
			}
			#gallery-2 img {
				border: 2px solid #cfcfcf;
			}
			#gallery-2 .gallery-caption {
				margin-left: 0;
			}
			/* see gallery_shortcode() in wp-includes/media.php */
		</style>

In the EPUB export, these inline stylesheets also receive a scoped="scoped" attribute. Screenshot from 2020-02-13 10-22-39

I think this is the root of the problem here, but the issue could use further research. See https://developer.wordpress.org/reference/functions/gallery_shortcode/ and https://code.tutsplus.com/articles/the-wordpress-gallery-shortcode-a-comprehensive-overview--wp-23743 for more details.

SteelWagstaff avatar Feb 13 '20 16:02 SteelWagstaff

See also https://www.isitwp.com/remove-inline-style-from-gallery-shortcode/

SteelWagstaff avatar Feb 13 '20 19:02 SteelWagstaff