Custom navigation has bug

[MatthewCaseres]

Hi,

I am putting my own navigation component into EPUB and it seems like there is a CSS bug on wide screens where my navigation sidebars are hidden. If I unzip the epub and view the .xhtml file then it looks good.

Also, if EPUB is just XHTML files then why do I need a reader? Why can't I just use Chrome?

Thanks

[kovidgoyal]

readers paginate text, if you try to use the typical html approaches for sidebars they will break with pagination.

[DNSB]

Originally Posted by MatthewCaseres

Hi,

I am putting my own navigation component into EPUB and it seems like there is a CSS bug on wide screens where my navigation sidebars are hidden. If I unzip the epub and view the .xhtml file then it looks good.

Also, if EPUB is just XHTML files then why do I need a reader? Why can't I just use Chrome?

Thanks

Epub is not just XHTML files, it is a structured ZIP archive with files within it and rules about how those files are used. Epub3 does not support the full HTML5 spec and has extensions that are not part of the spec. For instance, you have a mass of files in the package that are not referenced in the Package Document.


What you produced is, according to epubcheck, a mass of errors.

From the trivial such as Epub3 requires a title child for a head.

You have a mass of javascript and other files in the package that are not referenced in the Package Document.
To quote from the spec:

Publication Resources

All Publication Resources associated with the Package MUST be listed in the Package Document (as defined in manifest).

You have URIs that require authentication.

You have a collection of wannabe URIs in the form 'href="server/pages/MatthewCaseres/kjv-markdown/01 - Genesis - KJV.md.xhtml' and '"href="MatthewCaseres/kjv-markdown/01 - Genesis - KJV.md"'.

You have not declared a scripted property nor have you declared a svg property.

Basically, what you have created is a poorly structured web page pretending to be an epub file.

It might have been better if you had downloaded the epub version from Gutenberg instead of the html version to at least get a running start at an epub. See EPUB 3.2: Final Community Group Specification for some information on what an epub3 does and does not support. Pay special attention to parts such as:

This specification does not require EPUB Reading Systems to support scripting, HTML forms or the HTML DOM. Reading Systems conformant with this specification are only expected to be able to process a conforming EPUB Content Document. As support for scripting and HTML forms is not compulsory, a conformant Reading System might not be a fully-conformant HTML user agent.

I have to ask why any epub needs 43MB of javascript files? Why it needs a 404.html and index.html file which are never referenced?

I don't even get into that abomination that calls itself a stylesheet. Those two lonely LFs near the start while the rest of the stylesheet is a single line is pretty ugly. When I fed the stylesheet to the W3C CSS validator, there were 15 errors and 156 warnings listed. See the spoiler below.

Spoiler:

W3C CSS Validator results for TextArea (CSS level 3)
Sorry! We found the following errors (15)
URI : TextArea
3 * Property scrollbar-color doesn't exist : auto
3 * Property scrollbar-width doesn't exist : auto
3 * Parse Error /*!*/)
3 .transform too few values for the property transform : translateX() translateY() rotate() skewX() skewY() scaleX() scaleY()
3 .scrollbar-thin Value Error : overflow overlay is not a overflow value : overlay
3 .scrollbar-thin Property scrollbar-width doesn't exist : thin
3 .ais-HierarchicalMenu-showMore, .ais-InfiniteHits-loadMore, .ais-InfiniteHits-loadPrevious, .ais-Menu-showMore, .ais-RefinementList-showMore Property overflow-anchor doesn't exist : none
3 .ais-SearchBox-input:disabled:-ms-input-placeholder Property pointer-events doesn't exist : none
3 .ais-SearchBox-input:disabled::-moz-placeholder Property pointer-events doesn't exist : none
3 .ais-SearchBox-input:disabled:laceholder Property pointer-events doesn't exist : none
3 .ais-SearchBox-loadingIndicator, .ais-SearchBox-reset Property fill doesn't exist : #484c7a
3 .ais-SearchBox-reset:focus Property fill doesn't exist : #fff
3 .ais-RatingMenu-starIcon Property fill doesn't exist : #5a5e9a
3 .ais-RatingMenu-item--disabled .ais-RatingMenu-starIcon Property fill doesn't exist : #b6b7d5
3 .ais-ToggleRefinement-checkbox Property pointer-events doesn't exist : none

Warnings (156)
URI : TextArea
1 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif is an unknown vendor extension
3 -moz-tab-size is an unknown vendor extension
3 -o-tab-size is an unknown vendor extension
3 -webkit-text-size-adjust is an unknown vendor extension
3 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji is an unknown vendor extension
3 -webkit-text-decoration is an unknown vendor extension
3 -webkit-appearance is an unknown vendor extension
3 5px auto -webkit-focus-ring-color is an unknown vendor extension
3 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji is an unknown vendor extension
3 ::-moz-placeholder is an unknown vendor extended pseudo-element
3 ::-moz-placeholder is an unknown vendor extended pseudo-element
3 :-ms-input-placeholder is an unknown vendor extended pseudo-class
3 :-ms-input-placeholder is an unknown vendor extended pseudo-class
3 ::-moz-selection is an unknown vendor extended pseudo-element
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-bg-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 --tw-border-opacity is an unknown vendor extension
3 -webkit-sticky is an unknown vendor extension
3 --tw-shadow is an unknown vendor extension
3 --tw-shadow is an unknown vendor extension
3 --tw-shadow is an unknown vendor extension
3 --tw-shadow is an unknown vendor extension
3 --tw-ring-offset-width is an unknown vendor extension
3 --tw-ring-offset-color is an unknown vendor extension
3 --tw-ring-color is an unknown vendor extension
3 --tw-ring-offset-shadow is an unknown vendor extension
3 --tw-ring-shadow is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 --tw-text-opacity is an unknown vendor extension
3 -webkit-user-select is an unknown vendor extension
3 -moz-user-select is an unknown vendor extension
3 -ms-user-select is an unknown vendor extension
3 --tw-translate-x is an unknown vendor extension
3 --tw-translate-y is an unknown vendor extension
3 --tw-rotate is an unknown vendor extension
3 --tw-skew-x is an unknown vendor extension
3 --tw-skew-y is an unknown vendor extension
3 --tw-scale-x is an unknown vendor extension
3 --tw-scale-y is an unknown vendor extension
3 Property fill does not exist
3 Property stroke does not exist
3 Unrecognized at-rule @-webkit-keyframes
3 Unrecognized at-rule @-webkit-keyframes
3 Unrecognized at-rule @-webkit-keyframes
3 Unrecognized at-rule @-webkit-keyframes
3 -webkit-animation-timing-function is an unknown vendor extension
3 -webkit-animation-timing-function is an unknown vendor extension
3 --scrollbar-track is an unknown vendor extension
3 --scrollbar-thumb is an unknown vendor extension
3 ::-webkit-scrollbar-track is an unknown vendor extended pseudo-element
3 ::-webkit-scrollbar-thumb is an unknown vendor extended pseudo-element
3 ::-webkit-scrollbar is an unknown vendor extended pseudo-element
3 --scrollbar-track is an unknown vendor extension
3 --scrollbar-thumb is an unknown vendor extension
3 --scrollbar-track is an unknown vendor extension
3 --scrollbar-thumb is an unknown vendor extension
3 -webkit-sticky is an unknown vendor extension
3 -webkit-sticky is an unknown vendor extension
3 -webkit-user-select is an unknown vendor extension
3 -moz-user-select is an unknown vendor extension
3 -ms-user-select is an unknown vendor extension
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 ::-ms-clear is an unknown vendor extended pseudo-element
3 ::-ms-reveal is an unknown vendor extended pseudo-element
3 ::-webkit-search-cancel-button is an unknown vendor extended pseudo-element
3 ::-webkit-search-decoration is an unknown vendor extended pseudo-element
3 ::-webkit-search-results-button is an unknown vendor extended pseudo-element
3 ::-webkit-search-results-decoration is an unknown vendor extended pseudo-element
3 -webkit-grab is an unknown vendor extension
3 -webkit-appearance is an unknown vendor extension
3 -moz-appearance is an unknown vendor extension
3 -webkit-user-select is an unknown vendor extension
3 -moz-user-select is an unknown vendor extension
3 -ms-user-select is an unknown vendor extension
3 -webkit-appearance is an unknown vendor extension
3 -moz-appearance is an unknown vendor extension
3 :-moz-focusring is an unknown vendor extended pseudo-class
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 :-moz-focusring is an unknown vendor extended pseudo-class
3 ::-moz-focus-inner is an unknown vendor extended pseudo-element
3 -webkit-appearance is an unknown vendor extension
3 -moz-appearance is an unknown vendor extension
3 :-ms-input-placeholder is an unknown vendor extended pseudo-class
3 ::-moz-placeholder is an unknown vendor extended pseudo-element
3 :-ms-input-placeholder is an unknown vendor extended pseudo-class
3 ::-moz-placeholder is an unknown vendor extended pseudo-element
3 ::-webkit-search-cancel-button is an unknown vendor extended pseudo-element
3 ::-webkit-search-decoration is an unknown vendor extended pseudo-element
3 ::-webkit-search-results-button is an unknown vendor extended pseudo-element
3 ::-webkit-search-results-decoration is an unknown vendor extended pseudo-element
3 -webkit-appearance is an unknown vendor extension
3 -webkit-appearance is an unknown vendor extension
3 -moz-appearance is an unknown vendor extension
3 -webkit-appearance is an unknown vendor extension
3 -moz-appearance is an unknown vendor extension
3 -webkit-user-select is an unknown vendor extension
3 -moz-user-select is an unknown vendor extension
3 -ms-user-select is an unknown vendor extension
3 -webkit-appearance is an unknown vendor extension
3 -moz-appearance is an unknown vendor extension
3 -webkit-user-select is an unknown vendor extension
3 -moz-user-select is an unknown vendor extension
3 -ms-user-select is an unknown vendor extension

While not a full time profession unlike some other people in these forums, I do work on ebooks for other people so I feel that I have enough experience to comment on your attached file.