Font embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended.
Modern browsers support the W3C standard for custom fonts, WOFF, at http://caniuse.com/#search=wof. WOFF is compressed TrueType/OpenType font that contains information about the font’s source. You can learn more about these at CSS3 Tutorial – Custom Fonts.
But what about earlier browsers?
Continue reading “Snippet — Custom Fonts Fix”
You can use template feature in Knockoutjs to render your data. Templates are a straight forward way to build complex UI structure, often with repeating or nested blocks. You can use templates to show repeating data, such as data in tables or portfolios.
Templates as they are used in this post, are reusable chunks of HTML that relate to your observables in Knockout.
There are two main ways of using templates:
- Native templating where you use foreach, if, with and other control bindings. The control flow bindings use the HTML markup in your element and render against your data. The feature is built into Knockout.
- String-based templating connects Knockout to third-party template engine, such as jQuery Templates, MustacheJS, or underscore.
In our previous posts, you learned how to build modules. In the next series of posts, you will learn how you can connect up modules to the user interface. You will learn, step by step how to use observables for your user interface to dynamically update itself.
Knockout helps you build rich client-side interactivity by using an MVVM-like (Model, View, and ViewModel) pattern. It does this by helping you separate the UI behavior and the data structures. To do this, you will use declarative bindings with observable data.
Knockout is free, open source, and available for your projects using the MIT License.
Knockout helps you:
- Synchronize JSON models with HTML elements using Observable Properties.
- Synchronize arrays, using Observable Arrays.
- Provide calculated properties using Computed Properties.
The <track> element represents a timed text file to provide users with multiple languages or commentary for videos. You can use multiple tracks and set one as default to be used when the video starts.
You can provide a transcript of the video.
This article introduces how can use WebVTT (Web Video Text Tracks) and Media Multiple Text Tracks API as part of your video.
Continue reading “HTML5 Tutorial – Captioning video tracks”
When you display video in HTML5, you have may want to display a set of controls to the user. The HTML5 video tag has a control attribute that lets you display the controls that come with the browser.
But you may want to build custom controls using its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values).
This post shows how you can build a custom media player using different the media API attributes, events, and methods.
Continue reading “HTML5 Tutorial – Custom Controls for Multimedia”