Skip to main content

Posts

Showing posts from 2017

CSS Show and Hide with Transition (using :target)

In the last blogpost, I helped to describe the CSS show and hide text posted to StackOverflow. Here I look at adding CSS for a smoother transition by modifying a transition example also on StackOverflow.

/* onload css */ #show { display:none; } .wrapper { position: relative; overflow: hidden; width: 300px; height: 300px; } .answer { position: absolute; top: -10px; transition: 0.25s; opacity:0; }
In the CSS that styles the HTML page when loaded we first of all hide the text that we want to show later (i.e. the hide button). We also create a wrapper for the text so that it can be invisible by first of all creating what is essentially a box and placing it outside this box, so that it doesn't appear on screen, but so that it doesn't need to be off the actual top of the page as a starting point.

/* click triggered css */ #hide:target { display:none; } #hide:target + #show { display:inline; } #hide:target ~ .wrapper > .answer { tr…

Explaining the Basics of a Show/Hide Implementation of the CSS :target

I found the code on StackOverflow for a simple CSS based hide/show scenario, it is an incredibly short piece of code, but for the uninitiated it is difficult to understand at first what is actually going on.

So what I did first is to break down the CSS into what happens at page load time and what happens at the point at which a target is linked to:
/* happens on load */ .answer, #show { display: none; } /* happens when show is clicked */ #hide:target { display: none; } #hide:target + #show, #hide:target ~ .answer { display: inline; } To explain:
At load time any element where the class is answer or the id is show is set not to display.  When a target with an id of hide is "targeted", i.e. from a link with <a href="#hide">[Text]</a>, then:
the content with the hide id will not display.any element with the show id that immediately follows the target will display, as will any element with the class of answer which follows that hide targe…

Quick Fix: How to Outline an Arrow in Adobe Illustrator

A search for how to outline an arrow in Adobe Illustrator turns up some bizarre solutions to what is seemingly a straightforward requirement.

The issue with arrows begins because an arrow in Illustrator is essentially a brush style applied to a line rather than being a filled object with an outline stroke. However, we can transform an arrow into a filled object with an outline stroke with one simple step: the selection of Object > Path > Outline Stroke from the menu bar.

Applying this knowledge we can create an outlined arrow in Illustrator following these steps.

(1) Draw a straight line using the line tool while holding down the Shift key.
(2) Open the Brushes window and select the arrows_standard brush library from its menu  (3) With the line you created selected now choose an arrow style from the library (4) With the line/arrow still selected go to the menu bar and select Object > Path > Outline Stroke (5) The arrow is now a filled object with a stroke that can be …

Adding back the NCX in EPUB 3

Why NCX again? The use of an NCX file, most commonly toc.ncx, is not required in the EPUB 3 standard. However, preparing files for library agents I was required to include an NCX for backwards compatibility. So here are a few notes and links to example files for reference.
Things to remember Aside from creating an NCX file, it is also necessary to add the attribute toc="ncx" to your spine element, like so,
<spine toc="ncx"> inside your OPF file and to include a link to the ncx inside the OPF's manifest tags as well, e.g.
<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml" />Note: The actual value of the spine element's toc attribute is arbitrary, it must simply match the id of the item that is the toc.

The ncx will be ignored by EPUB 3 reading systems, which instead of relying on the spine toc attribute for navigation look for the "nav" property applied to an item inside the manifest tags …

Footnotes for All: One Foot(note) Format for Kindle, iBooks and generic EPUB

At first glance, the iBooks requirements for pop-up footnotes with their unique in-place implementation of the <aside> tag looks like a nightmare for sharing code between ebook types but actually if we read the following note in the iBooks Asset Guide 5.2.7
Use the <aside> element when you want to hide the footnote; use a <div> or <p> element when you want the footnote to appear in the normal reading view. If you use <div> or <p> and a user clicks the footnote link, the content appears in a popup, but the footnote is also visible as part of the text on the page. the sun breaks through the cloud once more as there comes into sight the opportunity once more for a single EPUB for distribution across all platforms.

The only addition we need to make to the Kindle requirements of a footnote referent formatted thus:
<sup><a href="#fn1" id="r1">[1]</a></sup> And a footnote entry listed as so:
<p id="fn1&…

What's in an EPUB 3 filename? Not much, it's all in the extension ... most of the time.

An interesting question popped up on twitter today
can anyone in #eprdctn confirm that the nav file can be named something other than nav.xhtml & still operate OK? seeing nothing in spec — Iris Amelia 📎✊🏽 (@epubpupil) January 31, 2017 and it reminded me about how we become so used to the names we assign to files and folders within our EPUB structures that we might forget which are set in stone and which we've assigned or have been arbitrarily assigned by apps like InDesign for us.

Thankfully it is fairly clear cut. The mimetype and files within the META-INF folder (along with the folder itself) have fixed names. But the only required one that must be in the folder is the container.xml file and this file identifies the root file of the EPUB package, i.e. the one that identifies the location of all the others. All other files and folders can have their names freely chosen (within the limits of unicode).
META-INF/container.xml The IDPF provides the following example of what…

When is a page break not a page break? EPUB 3, page-list and pagebreak

Returning to the creation of ebooks after a break can be tricky; getting your head back around the concepts and the difficult to navigate IDPF documentation can induce moments of confusion. At one of these points, as I was styling some prelims, I reached out this week on twitter to clarify a point about page breaks, which I think might also confuse others because of misleading type names.
@sketchyTech It shouldn't break pages. It's just to identify where pages broke in a related print edition. #eprdctn — Dave Cramer (@dauwhe) January 27, 2017 Explaining the confusion It's standard practice to have a separate XHTML file for each chapter in an EPUB and it is most common for apps to break pages between these, but on occasion you might like to force a page break inside a single XHTML file. Perhaps because you want a single file for the prelims but want the half-title page, title page and copyright page, etc. to be on separate pages as they would be in a print book.

So it might…

OneDrive Syncing Issues on Mac: Keychain, Reboots and Reinstalls

OneDrive is good value for money – when it works – but there have been a number of times when syncing has needed a kickstart, most recently after an OS X update. The recent El Capitan update insisted that I change my log-in password so that it no longer matched my iCloud one (although it had been a previous update that insisted I change my password to the iCloud one), which led to another prompt when Safari updated about entering my old password to sort out keychain issues. Anyway I'd see in one of the App Store reviews that the reviewer had a keychain issue, and that there was a solution based on this, so I thought it worth a try, because there might be some connection with these recent password and keychain prompts. As luck would have it, the following did solve my troubles (this time):
quit OneDriveopen Keychain Access.app (Applications > Utilities > Keychain Access.app or type Keychain into Launchpad search)search All Items for 'OneDrive'delete com.microsoft.OneD…