Improvements to asterism art and fancy first letters

[jonathantneal]

I'm proposing that we change "asterism" art from its current inline form like this:

.a {
  font-size: xx-large;
  line-height: .875;
  text-shadow: 0 0 2px #667;
}

<p class="a">&#x2767;

To a styled pseudo form like this:

.a {
  font-size: xx-large;
  line-height: .875;
  text-shadow: 0 0 2px #667;
}

.rotatedFloralHeartBullet:before {
  content: '\2767';
}

<p class="a rotatedFloralHeartBullet">

The result is a more manageable and meaningful source which better separates content from style without making much change.

---

I'm also proposing that we change the "fancy" first letters from their current img tag form like this:

.f img {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  -ms-interpolation-mode: bicubic;
}

<p class="f">
<img src="i/aoc-d.png" alt="D" width="104" height="105">ive Into <abbr>HTML5</abbr> elaborates on...

To a styled pseudo form like this:

.f:first-letter {
  background-size: 100% 100%;
  float: left;
  height: 105px;
  margin: 0 5px 5px 0;
  overflow: hidden;
  text-indent: 100%;
  width: 104px;
}

.f-d:first-letter {
  background: url(i/aoc-d.png);
}

<p class="f f-d">
Dive Into <abbr>HTML5</abbr> elaborates on...

The result is, again, cleaner source, in fact, much cleaner, but with the added benefit of a selectable "Dive Into HTML5", whereas the present form results in a selection of "ive into HTML5" since the img's alt is not captured as a text character.

[mathiasbynens]

+1

Btw, which browsers ignore alt text in selections? All of them? That seems unexpected.

[paulirish]

sgtm

[jonathantneal]

@mathiasbynens, in my tests, Firefox 12 used the image's alt text in selections, but Opera 11.64, Chrome 19.0, Safari 5.1.7, IE9, and IE8 (on XP) all ignored it.

[jonathantneal]

These improvements have been added. I created my own custom typeface, "Alphabets of Children", which took the place of the PNGs, and is assigned to the :first-letter of each <p class="f">. Since :first-letter is supported in IE6 and up, everyone gained, and the text is fully selectable.