Dublin Library

The Publishing project

Typography II: Fonts to the page

We have typography on the web! As John Allsopp points out in his blog Happy 17th Birthday CSShttp://www.webdirections.org/blog/happy-17th-birthday-css/ we have come a long way but we still have very far to go. When I first started playing with web design back in 1996 the web was just plain. It was meant as a way to exchange information, not produce the high-end, high-gloss content we see today. Surprisingly enough we've had the ability to embed fonts for over a decade. CSS2 included the ability to embed fonts when it was first released but it wasn't highly used until CSS3 came out...

Continue reading →

Typography Part I: Designing Text on the page

When I first started working on web development I had absolutely no clue as to what typography was or how to make pages 'look' visually pleasing, easier to read and more engaging to the user. Over the years I've developed a sensibility to the way text lies on the page, how it relates to the other elements on the page and how to make the text pleasing and easier to read. In more recent times I've learned the science to go along with the art along with the tools and resources to make it happen. Homework to do before starting...

Continue reading →

CSS Units of Measurement

Defining Length According to the W3C: > Lengths refer to distance measurements > > The format of a length value denoted by >length > Some properties allow negative length values, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be converted to the nearest value that can be supported. > > If a negative length value is set on a property that does not allow negative length values, the declaration is ignored. > > http://www.w3.org/TR/CSS2/syndata.htmllength-unitshttp://www.w3.org/TR/CSS2/syndata.htmllength-units Absolute length size units\ Absolute length units are fixed in relation...

Continue reading →

CSS paged media

In paged media the content of the document is split into one or more discrete pages. Paged media includes paper, transparencies, pages, Microsoft Word documents, Adobe PDF portable document format files among others > This needs to be tested with modern browsers. As far as I know this is only supported on Chrome and, maybe, Firefox > > I am currently working on a sample page and associated stylesheet to test the concept and see how well it works. See the bottom of this post for more information We no longer need to convert our documents into PDF or Word...

Continue reading →

Expressing colors in CSS

As part of my research in Web Typography I got reacquainted with the many ways you can express colors in CSS. This was originally in my typography document but I think it's better if I move it out to prevent an already long document from becoming unmanageable. sRGB colors 3 or 6 digits This was what I always associted with colors in CSS and until not too long ago it was the only way to express colors. You can use either syntax but, as you can see in the example below, the 6 digit syntax allows for more precision in...

Continue reading →

Using SASS smartly

This is a continuation to my earlier post on SASS: SASS, SCSS and Modular Designhttps://publishing-project.rivendellweb.net/sass-scss-css-and-modular-design/. This presents new ideas and more advanced mixins, tools and concepts. During development, watch what you're doing An additional parameter to the SASS command line tool allows you to watch files for changes and then automatically recompile them. This reduces the commands that you have to type at the terminal and it makes it easier to track changes. The command I use to watch the folder containing my SASS is: sass \ --scss \ tells SASS that we're using the SCSS syntax --update \ compile...

Continue reading →

HTML5 video captioning using VTT

Introducing VTT WebVTT Web Video Text Tracks, formerly known as WebSRT, is a W3C community proposal for synchronized video caption playback. It is a time-indexed file format and it is referenced by HTML5 video and audio elements. As with many assistive technologies, it would be a mistake to assume that they are only meant as a way to provide for accessibility accomodations. We can enable captions when the ambient noise is too loud to listen to a recorded presentation, we can use chapters to navigate through a long lecture video just like DVD or Blue Ray movies. Captions can also...

Continue reading →

Modernizr and Prefix Free

As a designer we all hit the point where we want to use a specific feature of HTML5 and you don't know what browsers support what version of the specification in question. This is particulary important when we're asked to support older browsers where the same script we use to trigger a feature may be ignored or have unexpected results. In the CSS front we have to deal with "prefix hell". In their efforts to be in the bleeding edge of CSS feature development, and to show how the features may work in standard implementations, browser vendors all of them...

Continue reading →