How to Specify The Use of Text or Titling Figures in CSS

Is there a way to specify the use of text or titling figures in CSS?

Firefox 4.0 has basic text figure support. Here's how to turn on text (old-style) figures:

.text-figures {
  -moz-font-feature-settings: "onum=1";
}

Looks like there's a set of css3 properties, such as font-variant-numeric, to control common properties. These are not yet supported by any browser, as far as I know.

Here's a jsFiddle where you can play around with the styles. It toggles between lining and old-style figures. I'm using Minion Pro on Windows 7, so you might have to find your own supported font on other platforms.

Can you specify tabular lining figures for webfonts?

Simply, yes.

Presently you can use the attribute "font-feature-settings" in its prefixed forms and add "tnum" to the value list (example) to access tabular numerals in OpenType enabled fonts:

font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';

Check caniuse to see if the prefixed versions are still needed.

Note, if you are using Typekit to serve your webfonts, make sure to select "All Characters" under Language Support.

HTML figure with both caption and notes

Just add a paragraph inside the figure.

Permitted content of a figure includes "flow content" which allows a p

A <figcaption> element, followed by flow content; or flow content followed by a <figcaption> element; or flow content.
MDN

img {
max-width:100%;
}

figure {
text-align:center;
}

<figure>
  <figcaption>Wikipedia logo</figcaption>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Wikipedia_logo_%28svg%29.svg">
  <p>Lorem ipsum dolor sit amet.</p>
</figure>

How align a image and avoid text below in title using HTML CSS

You can define a bigger height for the icon. For this you have to add float:left and a fixed defined height in the .header-icon class.

For example like this:

.page-header {  width: 400px;}.page-header .header-icon {  display: block;  vertical-align: middle;  padding-right: 10px;  float: left;  height: 100px;}.page-header .page-title {  display: inline;  vertical-align: middle;}

<div class="page-header">  <div class="header-icon">    <img src="http://placehold.it/30x30">  </div>  <h1 class="page-title">Não está em aula <small>2016-02-14  14:04</small></h1></div>

How to semantically provide a caption, title or label for a list in HTML

Option 1

HTML5 has the figure and figcaption elements, which I find work quite nicely.

Example:

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

These are then easily styled with CSS.

Option 2

Using CSS3's ::before pseudo-element can be a nice solution:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::before instead, or whatever you need.

This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit"> and ul[data-title]::before { content: attr(data-title); }).