Mozilla

Font Inspector and <time> and <data> elements – Firefox Development Highlights

Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

Font Inspector

A Font Inspector is now available in the Firefox DevTools.

image

In the Firefox Inspector, a “Fonts” panel is now available. It exposes different information about the @font-faces used in the page:

  • Font name and font family
  • Its location (system vs. remote, and URL)
  • A preview (you can change it)
  • @font-face code

HTML5 and

We have implemented support for two new elements:

<time> element

The HTML time element (

Example:

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>

More information can be found in the MDN documentation for the <time> element, and in the W3C specification.

<data> element

The data element represents its contents, along with a machine-readable form of those contents in the value attribute. The value attribute must be present and its value must be a representation of the element’s contents in a machine-readable format.

The <data> element adds a new attribute, value, which contains a string representation of the data. In script we can use the .value property to get the reflected value:

Example:

<data id="user" value="humphd">David Humphrey</data>
document.getElementById("user").value; // "humphd"

It’s available in the WHATWG specification, and David Humphrey’s wrote more about it in HTML5 time and data elements in Firefox.

5 comments

Comments are now closed.

  1. Chris Adams wrote on March 13th, 2013 at 16:09:

    I work with a lot of multilingual content. One thing the font inspector could do which would be extremely useful is listing when font substitution occurred and which font was used – sometimes it’s non-trivial to answer the question of where a glyph came from, particularly if it’s on someone else’s computer

  2. Anthony Caudill wrote on March 13th, 2013 at 17:07:

    Finally we have an alternative to invisible textareas.

  3. Aftab Khalid wrote on March 13th, 2013 at 23:54:

    Really nice, there was a problem with fonts that how to check font performance and quality within the browsers and now we can inspect it and check the performance..

  4. Bastian wrote on March 15th, 2013 at 10:32:

    Instead of making font inspector, you could work on making advanced network inspector, which could push FF native tools a way closer to firebug.

    1. Robert Nyman [Editor] wrote on March 18th, 2013 at 02:51:

      Well, one thing doesn’t exclude the other. We want to do many things to the Developer Tools as good as possible.

Comments are closed for this article.