Before we dive into Type selection we'll do a few things: clear terminology and setup some common definitions to work from. The first one is the difference between typeface and font and then we'll dive into a short and incomplete glossary of typographical terms Font versus Typeface I've been guilty of this: use font and type face interchangeably. They are most definitely not the same thing and should not be used as if they are. Typeface refers to the design of the font. Fonts is the media that contains typefaces and allows you to use them in your projects. The...
This is the first of a series of articles on Typography and the potential of text on the web Over the past few months I've rekindled my interest in typography; how it works in print and how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. Responsive Typographyhttp://oreil.ly/1QuoKut by Jason Pamental, On web typographyhttp://abookapart.com/products/on-web-typography by Jason Santa Maria and Professional Web Typographyhttps://prowebtype.com/ by Donny Truong. But it wasn't until fluent that I got a better idea of why typography is important.I got the chance...
One of the most intriguing things I've learned about SVG over the last few months is that we can run CSS, including media queries, inside the SVG file itself so the queries will modify the internal content of the files will change based on the queries inside the svg. Getting started \codepen\embed height="564" theme\id="2039" slug\hash="MwrgJp" default\tab="html" user="caraya"\See the Pen SVG basic examplehttp://codepen.io/caraya/pen/MwrgJp/ by Carlos Araya @carayahttp://codepen.io/caraya on CodePenhttp://codepen.io.\/codepen\embed\ The CSS for the SVG graphic is embedded in the SVG file itself. We copied the SVG file's XML content directly in the pen, but there's no reason why the content cannot...
What would it take to make our books in to applications for the web? In this article we'll explore what is an application, what is a web application, why it now makes sense to turn our books in to web applications. What is an application? What is a web application? > Application software an application is a set of one or more programs designed to permit the user to perform a group of coordinated functions, tasks, or activities. Application software cannot run on itself but is dependent on system software to execute. Examples of an application include a word processor,...
We'll borrow a play from the SVG playbook for this post. We'll use clip path to generate masks around an image to control what the user gets to see and what shapes the image takes without changing the image itself. We'll look at the process and then we'll build an e-book with examples to test if this works with iBooks and whatever other reader you want to test with and how can we better leverage the feature in our reflowable projects. CSS clip-path CSS clip-path attribute is the star of the show either in CSS, via SVG or a mix...
Trimming the CSS fat After reading India Amos Degristling the sausage: BBEdit 11 Editionhttp://ink.indiamos.com/2015/02/12/degristling-the-sausage-bbedit-11-edition/ I thought I'd share my tricks for making CSS files as small as possible. While I learned these tricks as a front end developer they apply equally to creating content for e-books. One thing that has always stopped me from fully embracing frameworks is that they use an insane amount of code and it's really difficult to trim until I'm done with a project and, at that time, I usually don't want to have to look at CSS for a few weeks. In researching front end...
Rather than having to deal with XSL-FOhttp://www.w3.org/TR/2006/REC-xsl11-20061205/, another XML based vocabulary to create PDF content, we'll use XSLT to create another HTML file and process it with CSS Paged Mediahttp://dev.w3.org/csswg/css-page-3/ and the companion Generated Content for Paged Mediahttp://www.w3.org/TR/css-gcpm-3/ specifications to create PDF content. I'm not against XSL-FO but the structure of document is not the easiest or most intuitive. An example of XSL-FO looks like this: markup 1 2 3 4 5 Hello, world! 6 1. This is an XML declaration. XSL FO XSLFO belongs to XML family, so this is obligatory. 2. Root element. The obligatory namespace attribute declares...
With the HTML ready, we can no look at the CSS stylesheet to process it into PDF. The extensions, pseudo elements and attributes we use are all part of the CSS Paged Media or Generated Content for Paged Media specifications. Where appropriate I've translated them to work on both PDF and HTML. Book defaults The first step in creating the default structure for the book using @page at-element. Our base definition does the following: 1. Size the page to letter 8.5 by 11 inches, width first 2. Use CSS notation for margins. In this case the top and bottom margin...
One of the biggest advantages of working with XML is that we can convert the abstract tags into other markups. For the purposes of this project we'll convert the XML created to match the schema we just created to HTML and then use tools like PrinceXMLhttp://www.princexml.com or AntenaHousehttp://www.antennahouse.com we'll convert the HTML/CSS files to PDF Why HTML HTML is the default format for the web and for most web/html based content such as ePub and Kindle. As such it makes a perfect candidate to explore how to generate it programmatically from a single source file. HTML will also act as...
This is the generated CSS from the SCSS style sheets see the scss/ directory for the source material. I've chosen to document the resulting stylesheet here and document the SCSS source in another document to make life simpler for people who don't want to deal with SASS or who want to see what the style sheets look like. Typography derived from work done at this URL: http://bit.ly/16N6Y2Q The following scale also using minor third progression may also help: http://bit.ly/1DdVbqKhttp://bit.ly/1DdVbqK Feel free to play with these and use them as starting point for your own work : The project currently uses...
