JayPanoz

.float-image {
	width: 100%;
	float: left;
	padding: 0;
	display: block;
	text-align: center;
	margin: 0.75em 0;
	margin-top: 1vh;    /* will collapse if float + margin-top because your entire CSS will be ignored by legacy RMSDK if you’re using margin: 1vh 0; */
	margin-bottom: 1vh;
}

JayPanoz

@namespace epub "http://www.idpf.org/2007/ops";
@namespace svg "http://www.w3.org/2000/svg";

/* Hide soundtrack <audio> tags from ever showing up */
audio[epub|type~="ibooks:soundtrack"] {
  display: none !important;
  /* display: none; doesn't seem to actually work for some reason, so hide it another way */
  height: 0 !important;
}

JayPanoz

Broken in eBooks

I hate being ”that guy” but someone must do the dirty work and list all the basic stuff which eBooks’ Reading Systems break in reflow.

So, here’s the stuff you can’t rely upon… Brace yourself, nightmares are coming!

Important advice: make sure your demos/test-case files span several “pages” and don’t rely neither on the results you get on “document ready” nor on the results which are displayed in the first column, usually at the top of your xhtml file. I’ve checked a certain amount of demos for which those issues didn’t show up because of that. Problem is if you publish a tutorial/article and people don’t double-check by themselves, it may lead to catastrophes.

For your information…

JayPanoz

/* As of v.5.1 (iOS)
   FYI, relies on jQuery 1.5.1
   Note to big company involved: 1) there’s no copyright and 2) it’s available with a right click
*/

var KindleRendererAnnotationRenderer = function() {
        function g() {
            var b = {};
            return function(f, a) {
                if (b[f] !== void 0) return b[f];

JayPanoz

<!-- To put in your .opf file in <metadata>. -->
<!-- Don't forget to add prefix="schema: http://schema.org/" in <package> -->

<!-- Accessibility Metadata -->

 <!-- Please get rid of features you don't use in your book -->
    <meta property="schema:accessibilityFeature">alternativeText</meta>
    <meta property="schema:accessibilityFeature">audioDescription</meta>
    <meta property="schema:accessibilityFeature">braille</meta>
    <meta property="schema:accessibilityFeature">captions</meta>

JayPanoz

List of eprdctn merit badges

Just for fun.

Inspired by CSS Tricks web dev merit badges

• Validated in EPUBCheck on the first try (courtesy Wendy Reid)
• Approved by Ace (courtesy Marisa Demeglio)
• Made an EPUB3 file
• Made a fixed-layout EPUB

JayPanoz

Now online @ https://jaypanoz.github.io/epubcheck-messages/

Github repo: https://github.com/JayPanoz/epubcheck-messages

JayPanoz

// This is now its own package @ https://github.com/rodebert/epubtype-to-aria
// Please check Rodebert’s repo for a better and more up-to-date version

"use strict";

// Get all the elements with epub:type
// Since querySelectorAll can’t be used with XHTML attributes, 
// we create an array in which we’ll push elements with an epub:type attribute

var epubTypes = [];

JayPanoz

/* Inspired by https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.mg1ra3tvj */

.image-float {
  min-width: 240px;
  width: 40%;
  max-width: 100%;
  page-break-inside: avoid;	
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

JayPanoz

javascript:(function()%7Bvar%20nightEnabled%20%3D%20document.head.querySelector(%22%23my-night-style%22)%3Bif%20(nightEnabled)%20%7Bdocument.head.removeChild(nightEnabled)%3B%7D%20else%20%7Bvar%20nightStyle%20%3D%20document.createElement(%22style%22)%3BnightStyle.id%20%3D%20%22my-night-style%22%3BnightStyle.textContent%20%3D%20%22html%20%7Bfilter%3A%20invert(100%25)%20hue-rotate(180deg)%3B%7D%20img%2C%20svg%20%7Bfilter%3A%20invert(100%25)%20hue-rotate(180deg)%20!important%3B%7D%20video%20%7Bfilter%3A%20invert(100%25)%20hue-rotate(180deg)%20!important%3B%7D%22%3Bdocument.head.appendChild(nightStyle)%3B%7D%7D)()

Converted using Mr Coles’ Bookmarklet Creator: https://mrcoles.com/bookmarklet/