Wrapping Arbitrary HTML to Assign a common Universal Attribute

A few days ago I checked the HTML validity of my own blog. I have to admit that I didn’t do that after I wrote the jugglingPostLang plugin (wrote about that in my blog post Simple Language-Defined Posts in WordPress) for WordPress. I realized that my plugin produced invalid html in many cases, so that was an issue:

The issue is, that <span> elements forbid block level content, while <div> elements are not allowed as a child of any element that only accepts phrasing content (which is roughly running text and what’s inside).

To solve that I read through the html specifications to find a solution but unfortunately there isn’t a simple solution on the horizon.

In the following I’m going to summarize the html specification details on the topic and give a rough sketch on the algorithm to determine what’s a valid wrapping node. Wrapping Arbitrary HTML to Assign a common Universal Attribute weiterlesen

HTML5-Audioplayer für 1LIVE

In einem anderen Artikel habe ich bereits darüber geschrieben, wie unnötig die großen deutschen Medienanstalten bis heute auf den Flash-Player als Abspielsoftware für Medieninhalte setzen.

Die Audio-Streams auf einslive.de habe ich mir mal etwas genauer angesehen. HTML5-Audioplayer für 1LIVE weiterlesen

Flash-Zwang beim öffentlich-rechtlichen Rundfunk

Vor einigen Tagen habe ich Windows frisch installiert. Wie üblich kommt dann die wichtigste Software zuerst, weniger Wichtiges kommt erst später, oder fällt dabei letztlich weg, weil ich feststelle, dass ich es doch nicht benötige.

Diesmal traf es (beinahe) Adobes Flash-Player: Zunächst hatte ich nur etwas weniger Werbung im Netz (obwohl sich hier offenbar viele Werbetreibenden mittlerweile von Flash abgewandt haben oder zumindest Alternativen ausliefern).

Größere Probleme hatten interessanterweise vor allem der öffentlich-rechtliche Rundfunk. Flash-Zwang beim öffentlich-rechtlichen Rundfunk weiterlesen

Customized WordPress-Template for Category-Subtree

For the Advent calendar categories I wanted to have a custom template that applies to all categories below the Adventskalender category (that one included).

WordPress has a great Template system, using inheritance between templates, as shown in the Codex. Utilizing this system it is possible to customize all category pages or one category page in particular – but there seems to be no way to customize a set of categories based on the category hierarchy.

On the other hand WordPress contains a function to get a Breadcrumb trail from the root to the current category. For this function, get_category_parents() no non-grapical equivalent seems to exist unfortunately.

On the other hand the code is quite simple: Start at the category of your choice and recursively get the parent category up to the root.

My current solution is based on a fixed „root“ category, as that is what I want to have (more ideas on how the template system could be extended nicely see below).

My solution utilizes the action hook  ‚category_template‘ which is not documented unfortunately in the codex (although listed in the filter reference). The following is the code listing of the function:

function get_advent_category_template( $archive_template )
{
  // get the category:
  $catId = get_query_var('cat');
  $found = false;

  $yourcat = get_category($catId);
  do {
    if ($yourcat->slug == 'adventskalender')
    {
      return dirname(__FILE__).'/category-adventskalender.php';
    }
    $yourcat = get_category($yourcat->parent);
  } while (true);

  // not found in the parent hierarchy, return the default template:
  return $archive_template;
}

The parameter of this function is the default template that would be applied without the hook implemented here. We have to detect if we’re in a matching category and if so, overwrite that template by returning our customized one. Therefore the loop from the current category up to the root category and search for our anchor category which is the root for the categories we want to apply the custom template for.

If found, we return the custom template file, otherwise we return the default one.

Now this function has to be registered, and that’s it:

add_filter( 'category_template', 'get_advent_category_template' ) ;

How the WordPress Template system could be extended

When I stumbled over this issue I asked in the WordPress IRC channel after not seeing a proper solution, where I was told that it is a quite common problem, and more people asked for a solution in the past.

In fact it would be quite easy to extend the WordPress template system by another template „class“ in the second line of the graphical overview. Inserting another variant between category-$id.php and category.php would fit nicely from a logical point of view.

A Category archive that is defined for a single category is preferred (left of the new one), but the tree-based category template (the new one) is preferred over the generic category template.

Zahlen formatieren im Web

Anfang der Woche stolperte ich über eine Auswertung zu OSM-Adressen von Simon Poole. Wie das bei statistischen Auswertungen so üblich ist, dominieren dabei Tabellen und Zahlen.

Gerade große Zahlen sind aber schnell schwer zu lesen. Wie viele Nullen hat 1000000 genau? In der Typographie werden Zahlen deshalb nicht einfach Ziffer für Ziffer mit identischem Zeichenabstand gesetzt, sondern gesondert behandelt. Ein paar Beispiele für eine Million:

  • 1000000
  • 1.000.000
  • 1 000 000
  • 1’000’000
  • 1,000,000

Dies direkt so anzugeben hat jedoch diverse Nachteile.

  1. Beim Kopieren von Tabellen wird der Inhalt insgesamt kopiert. Kopiert man insbesondere aus dem Web in Tabellenkalkulationsprogramme wie Calc oder Excel, so werden da aufwendige Algorithmen oder Handarbeit notwendig, um Zahlen deutlich als solche zu erkennen. Insbesondere sind 1,001 sowie 1.001 je nach Herkunft ungefähr eins oder knapp über tausend.
  2. Auch beim Lesen ist die Verwendung von Punkt oder Komma schwierig, weil nicht eindeutig.
  3. ungeschützte Leerzeichen wären notwendig, um einen Zeilenumbruch innerhalb der Zahl zu verhindern.
  4. Gerade bei großen Tabellen ist die durchgängige Formatierung aufwändig.

Betrachtet man Zahlen mit Nachkommastellen, tauchen zusätzliche Herausforderungen auf. Um untereinander stehende Zahlen schnell vergleichen zu können, wäre eine Ausrichtung wünschenswert, bei der das Komma aller Zeilen an der gleichen Stelle steht. In Tabellenkalkulationsprogrammen wird dies üblicherweise erreicht, indem die Anzeige auf eine feste Anzahl von Nachkommastellen konfiguriert wird: zusätzliche Ziffern werden abgeschnitten, fehlende Ziffern in Form von Nullen angehängt.

Natürlich kommt einem bei all dem sofort CSS in den Sinn. Sollten Stylesheets nicht in der Lage sein, auch die Formatierung von Zahlen anzupassen? Tatsächlich stößt man bei der Suche im Netz auf einen früheren Entwurf in der Richtung: Im Wiki der CSS-Working-Group vom W3C.

Die aktuelle Liste von Standards und Entwürfen vom W3C enthält jedoch kein Modul mit entsprechenden Angaben.

Um dieses Problem anzugehen (und anstatt für meine letzte Prüfung zu lernen) habe ich ein Modul für jQuery geschrieben. Eine Beispielseite zeigt der folgende iframe:

Wie funktioniert das Plugin?

Zunächst wird mit letteringjs dafür gesorgt, dass beliebige Zeichen mit CSS-Selektoren zugänglich sind. Lettering.js kapselt dazu jeden einzelnen Buchstaben von gewünschten Elementen in ein entsprechend klassifiziertes <span>-Element. Die Klassen (char0, char1,…) werden allerdings im Folgenden gar nicht mehr genutzt. Vielmehr lassen sich die einzelnen Zeichen mit CSS über die Pseudoklassen :nth-child(n) und :nth-last-child(n) ansprechen. Durch die Möglichkeit, den Platzhalter n zu verwenden, ist dies deutlich einfacher als der Weg über die einzelnen Klassen.

Zunächst werden aber die per lettering zerlegten Zeichen klassifiziert und dann gruppiert: Als Klassen gibt es das Vorzeichen, Ziffern, das Komma und Einheitenzeichen. Heuristisch wird dabei davon ausgegangen, dass die Einheit mit der ersten nicht-Ziffer (nach dem Komma, falls nötig) beginnt.

Tausender-Gruppierung

Um jeweils drei Ziffern zu gruppieren, wird per CSS-Pseudoklasse :before das entsprechende Trennzeichen generiert. Per default ist dies ein Leerzeichen, das sich aber per Überladung der CSS-Klasse sowie durch Angabe beim Aufruf des Plugins überschreiben lässt.

Für die Zahl vor dem Komma wird :before auf :nth-last-child(3) angewandt, für die Nachkommastellen auf :nth-child(3). Hier wird dann das Trennzeichen über die CSS-Property content generiert.

Ausrichtung am Komma

Um einheitlich am Komma ausrichten zu können, wird per Javascript zunächst die maximal notwendige Breite der Nachkommastellen ermittelt. Das Ergebnis wird dann dem mit display: inline-block formatierten Block der Nachkommastellen zugewiesen. Hier entsteht jedoch ein Problem, das dexter entdeckte: Skaliert man im Browser nur den Text, aber nicht die gesamte Darstellung, so werden Absolute Werte wie solche in Pixeln nicht mitskaliert.

Um dieses Problem zu lösen muss die notwendige Breite in Schrift-relativen Größenangaben wie em angegeben werden. 1em entspricht dabei nach Spezifikation der Kantenlänge eines typographischen Gevierts in der verwendeten Schriftgröße, und  dessen Höhe wird durch die Schriftgröße bestimmt, die sich mit jQuery herausfinden lässt. Aus der berechneten Pixel-Zahl lässt sich also zur Einheit em umrechnen, so dass auch bei einer reinen Schrift-Skalierung kein Problem mehr auftritt.

Ausblick

Zunächst fehlen noch ausgiebigere Tests. Außerdem wäre die Anwendung auch außerhalb von Tabellen praktisch. Mal sehen, wozu ich in den nächsten Tagen komme.

Danach plane ich das Plugin auch „offiziell“ zu veröffentlichen.