WordPress in bestehende Webseiten integrieren

wpInHtml

Ausgangssituation

Geht es Ihnen auch so? Irgendwann, in den grauen Zeiten vor dem sogenannten Web 2.0 hat manch einer unter uns Zeit, Geld, Nerven usw. in den Aufbau einer eigenen Webpräsenz investiert. Diese basiert meist auf purem HTML, garniert mit etwas CSS (soll ja in möglichst vielen Browsern hübsch aussehen), greift hier und da auf ein wenig Javascript zurück und saugt ggf. sogar einige Informationen aus einer MySQL-Datenbank – im wesentlichen ist das ganze Gebilde aber ziemlich statisch. Was definitiv fehlt, ist die Möglichkeit, Inhalte ohne viel Aufwand zu modifizieren bzw. zu ergänzen und mit den Besuchern der eigenen Seite in einen Dialog zu treten. Mit anderen Worten: Es wird Zeit, den nächsten Schritt zu machen.

Zielsetzung

Konkret geht es darum, die eigene Homepage um eine Blogfunktion zu ergänzen und dafür sich der Dienste von WordPress zu versichern, d. h., die bisherigen Inhalte sollen weiterhin direkt als HTML-Dateien verwaltet und nicht über die Seitenfunktion in WordPress eingepflegt werden. Eine solche Webseite könnte z. B. den folgenden „klassischen“ Aufbau haben:

  1. einen Kopfbereich (hier <div id=“banner“>) für die Darstellung des Firmennamens, Logos sowie der Hauptnavigation,
  2. den (zweispaltigen) Dokumentenbereich, welcher in unserem Fall von den beiden <div>-Containern „mainContainer“ und „helpBox“ definiert wird und
  3. einen Fußzeilenbereich (<div id=“status“) mit Anschrift, Telefon usw.

htmlStrukturFerner wird von der Möglichkeit abgesehen, die WordPress-Seiten mittels IFRAME in das vorhandene Layout einzubetten. Über die Sinnhaftigkeit des Unterfangens kann trefflich gestritten werden – betrachten wir das Ganze einfach als eine Machbarkeitsstudie.

Voraussetzungen

Damit wir WordPress verwenden können, benötigen wir eine MySQL-Datenbank und einen PHP-fähiger Server. Zunächst sind beide Voraussetzungen mit dem Provider unseres Vertrauens zu klären, ihre Nutzung sollte gegen eine überschaubare monatliche Gebühr problemlos möglich sein. Die größeren unter den Serviceanbietern unterstützen den Einsatz von WordPress direkt, so daß nach Aktivieren der entsprechenden Option die Software nach wenigen Minuten nutzbar ist. Andernfalls kann die aktuelle deutsche Version etwa auf den Servern von wordpress.org geladen werden, dort finden wir auch eine Anleitung zur Installation von WordPress. Die weiteren Ausführungen basieren auf der Annahme, daß PHP- und MySQL-Server laufen und WordPress auf der eigenen Domäne im Verzeichnis blog (Order http://www.meineSeite.de/blog/) installiert wurde.

Man nehme …

Die folgenden Arbeitsgänge zeigen eine Möglichkeit auf, wie die formulierte Aufgabenstellung gelöst werden kann. Daneben existieren weitere Varianten, sich dem Ziel zu nähern, der beschriebene Weg ist einfach und mehrfach erprobt.

Zu Beginn etwas Arbeit am Dateisystem der WordPress-Installation.

  1. Per FTP-Verbindung wechseln wir in den Ordner themes unserer WordPress-Installation (d. h., wir befinden uns im Verzeichnis blog/wp-content/themes).
  2. In diesem Ordner erzeugen wir parallel zu den bereits vorhandenen Vorlagenordnern ein neues Verzeichnis beliebigen Namens (etwa foo).
  3. In diesem Ordner foo legen wir die beiden, vorerst leeren Dateien index.php und style.css an. Letztere wird von WordPress zur Identifikation der neuen Vorlage benötigt und ist mit den folgenden, auf die eigenen Bedürfnisse zugeschnittenen Codezeilen zu füllen:
/*
Theme Name: foo
Theme URI: http://www.meineSeite.de
Description: WordPress Vorlage für meine Seite.
Author: Xaver Unrath
Version: 1.0
*/

foo zur aktuellen Vorlage der WordPress-Installation machen.

  1. Wir rufen die Seite http://www.meineSeite.de/blog/wp-login.php auf.
  2. In der linken Navigationsleiste wechseln wir zu Design Themes.
  3. Aus den verschiedenen Vorlagen wählen wir nun unsere Vorlage foo aus und aktivieren diese. Im Falle von Fehlermeldungen haben wir die zuvor gespeicherte style.css zu kontrollieren. Im Erfolgsfall zeigt die Vorschau nichts als eine leere Seite.

Anpassen des Navigationsmenüs bzw. der Menü-Datei.

  1. Abhängig von der konkreten Umsetzung sind Änderungen am Menübereich bzw. einer separaten Navigationsdatei (z. B. navigation.php) erforderlich.
  2. Für unseren angenommenen Fall haben wir den <div id=“banner“> Abschnitt um einen neuen Listeneintrag zu erweitern (letzte Zeile innerhalb von <ul>…</ul>). Wichtig ist, daß der Link auf die leere Blogseite verweist (hier: /blog/).
<ul id="navList">
	<li><a href="index.php">Willkommen</a></li>
	<li><a href="services.php">Dienstleistungen</a></li>
	<li><a href="about.php">Wir sind ...</a></li>
	<li><a href="contact.php">Kontakt</a></li>
	<li><a href="/blog/">Tagebuch</a></li>
</ul>

Erzeugen der WordPress Kopfdatei.

Im foo Verzeichnis legen wir die Datei header.php an und fügen die folgenden Codezeilen ein:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
<?php
/* Print the tag based on what is being viewed. */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
    echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?>
</title>
<link href="http://gmpg.org/xfn/11" rel="profile" />
<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" media="all" type="text/css" />
<link href="<?php bloginfo( 'pingback_url' ); ?>" rel="pingback" />
<?php // wp_head(); is required.
    wp_head();
?>
</head>
<body>

Hiermit werden neben anderen Sachen der <title>-Tag der Seite verankert, die Stylesheet-Datei style.css eingebunden und der <body>-Bereich eröffnet.

WordPress Fußzeilendatei generieren.

Als nächstes wird im Ordner foo die Datei footer.php erzeugt und in dieser die folgenden Einträge abgelegt:

<?php wp_footer(); ?>

</body>
</html>

Den WordPress Kopf- und Fußbereich der index.php hinzufügen.

  1. In der (bislang leeren) index.php Datei aus dem Verzeichnis foo werden nachstehende Einträge gespeichert:
<?php get_header(); ?>

<!-- SPECIFIC PAGE CONTENT BEGINS HERE -->

<!-- SPECIFIC PAGE CONTENT ENDS HERE -->

<?php get_footer(); ?>
  1. Die WordPress-Vorschau sollte nun eine leere Seite, aber mit dem Seitentitel zeigen.

In die WordPress Stylesheetdatei style.css importieren wir unsere individuellen Stylesheets.

Im Ordner foo öffnen wir die Datei style.css und ergänzen diese unterhalb des Kommentarblocks um den Importaufruf unserer Stylesheetdatei css/layout.css:

@import url("http://www.meineSeite.de/css/layout.css");

Wir sichern alle zu inkludierenden Dateien im foo-Verzeichnis.

  1. Sofern eine eigene Header-Datei existiert, sichern wir eine Kopie dieser im foo Ordner (wir verwenden „sprechende“ Titel als Dokumentenbezeichnung die etwa banner.php). Nach Möglichkeit sollte das Dokument nicht in einem Unterordner abgelegt werden.
  2. In analoger Weise ist mit den Menü- und Fußzeilen-Dateien zu verfahren, d. h., wir erzeugen wieder Kopien der Originaldateien im Ordner foo (in unserem Beispiel sind dies die beiden Dateien navigation.php und status.php).

Die Kopf- und Menüdateien werden in der header.php zugewiesen.

  1. Die header.php aus dem foo-Verzeichnis ergänzen wir um die PHP-Funktion get_template_part(para), welche es uns erlaubt, beliebige Dateien der WordPress-Vorlage hinzuzufügen. Hierzu fügen wir direkt nach dem <body>-Tag folgenden Aufruf ein:
<?php get_template_part('banner'); ?>

Da wir unsere Kopfdatei banner.php genannt haben, übergeben wir den Dokumentennamen ohne Erweiterung als Parameter an die Funktion.

  1. Für unsere Navigationsdatei navigation.php rufen wir ein weiteres mal die PHP-Funktion get_template_part(para) auf:
<?php get_template_part('navigation'); ?>

Die Fußzeilendatei in der footer.php bekannt machen.

  1. In der footer.php aus dem foo-Verzeichnis binden wir in der ersten Zeile die PHP-Funktion a get_template_part(para) mit dem Namen unserer Fußzeilendatei als Parameter ein:
<?php get_template_part('status'); ?>
  1. Die Blogvorschau sollte nun Kopf-, Navigations- und Fußbereich unserer Seite zur Anzeige bringen.

Struktur unserer Webseite

Unsere Beispielseite weist die nachstehende Struktur auf:

<div id="container">
    <div id="banner">
        <ul id="navList"> </ul>
        <!-- #navList -->
    </div>
    <!-- #banner -->
    <div id="helpBox"> </div>
    <!-- #helpBox -->
    <div id="mainContainer"> </div>
    <!-- #mainContainer -->
    <div id="status"> </div>
    <!-- #status -->
</div>
<!-- #container -->

Diese <div>-Abschnitte befinden sich zwischen dem öffnenden und schließenden <body>-Tag.

In der header.php Datei

  1. Unmittelbar unter dem öffnenden <body>-Tag fügen wir <div id=“container“> ein. Dieser wird später in der Datei footer.php geschlossen.
<div id="container">
  1. Nun werden die beiden get_template_part(para)-Aufrufe mit para=’banner‘ bzw. para=’navigation‘ in die Struktur eingebaut.
<div id="banner">
<?php get_template_part('banner'); ?>
    <div id="navList">
    <?php get_template_part('navigation');?>
    </div>
    <!-- #navList -->
</div>
<!-- #banner -->
  1. Hieran schließt sich der Bereich mit id=“helpBox“ an, welchen wir später den Inhalt der WordPress-Sidebar zuweisen werden.
<div id="helpBox"></div>
  <!-- #helpBox -->
  1.  Als letztes wird der mainContainer-Abschnitt geöffnet. Diesen schließen wir wie auch den Abschnitt <div id=“container“> erst in der Datei footer.php wieder ab.
<div id="mainContainer">

In der Datei footer.php.

  1. Am Anfang der footer.php fügen wir den schließenden Tag des <div id=“mainContainer“>  sowie einen Zeilenumbruch <br /> der Klasse „clearfloat“ ein.
</div>
<!-- #mainContainer -->
<br class="clearfloat" />
  1. Innerhalb des Bereichs mit der id=“status“ wird die PHP-Funktion get_template_part(‚status‘) aufgerufen und schlußendlich der Bereich <div id=“container“> wieder geschlossen.
   <div id="status"><?php get_template_part('status'); ?></div>
   <!-- #status -->
</div>
<!-- #container -->

Wenngleich unsere Blog-Seite noch keinen Inhalt aufweist, wird in der Vorschau deren Gestalt erkennbar.

Der Blog- und Sidebar-Inhalt

Den Sidebar-Inhalt einfügen

Wir öffnen die Datei header.php, suchen in dieser den Bereich <div id=“helpBox“> und fügen in diesen die PHP-Funktion get_sidebar() ein. That‘s it.

<div id="helpBox"><?php get_sidebar();?></div>
<!-- #helpBox -->

Den Blog-Inhalt zur Anzeige bringen

  1. Aus dem Verzeichnis foo öffnen wir die Datei index.php.
  2. Zwischen den HTML-Kommentaren <!– SPECIFIC PAGE CONTENT BEGINS HERE –> und <!– SPECIFIC PAGE CONTENT ENDS HERE –> notieren wir die PHP-Funktion get_template_part, welche für die sogenannte WordPress-Loop verantwortlich ist. Der Loop-Code generiert die Ausgabe der Beiträge und Seiten.
<!-- SPECIFIC PAGE CONTENT BEGINS HERE -->

<?php get_template_part( 'loop', 'index' );?>

<!-- SPECIFIC PAGE CONTENT ENDS HERE -->
  1. Die Vorschau zeigt nun eine rudimentär gefüllte Sidebar, während der Hauptdokumentenbereich weiterhin leer ist. Ursache hierfür ist die fehlende loop.php, welche von der Funktion get_template_part( ‘loop’, ‘index’ ) aufgerufen wird. Wir lösen das Problem durch Kopieren weiterer Dateien aus der TwentyTen-Vorlage.

Kopieren von Dateien aus der TwentyTen-Vorlage.

  1. Die folgenden Dokumente sind aus den Vorlagenorder TwentyTen in unser Vorlagenverzeichnis foo zu kopieren. Nach diesen Dokumenten sucht die Funktion get_template_part( ‚loop‘, ‚index‘ ):
    • comments.php
    • loop-attachment.php
    • loop-page.php
    • loop-single.php
    • loop.php
  2. Bei dieser Gelegenheit kopieren wir gleich noch die beiden Dateien sidebar.php (fügt den Code der WordPress-Sidebar-Widgets hinzu) und functions.php aus dem twentyten-Ordner in unser foo-Verzeichnis.
  3. Jetzt sollte die Vorschau erstmals auch Inhalt darstellen.

Verschiedene Dateien für die unterschiedlichen Blog-Seiten

Mit diesem Schritt sorgen wir dafür, daß einzelne, spezialisierte Dateien des foo-Ordners individual zugeschnittene Informationen ausgeben. Die Datei archives.php etwa stellt die Beiträge nach Archiven geordnet zur Verfügung, während category.php dies nach Kategorien sortiert tut . In der Datei index.php haben wir den Code zwischen den Kommentaren <!– SPECIFIC PAGE CONTENT BEGINS HERE –> und <!– SPECIFIC PAGE CONTENT ENDS HERE –> für alle Seitentypen geändert. Exemplarisch zeigen wir die notwendigen Handlungsschritte am Beispiel der Datei 404.php. Diese sind analog auf die restlichen Dateien anzuwenden.

  1. Im Ordner foo öffnen wir die index.php.
  2. Die Datei 404.php aus dem Ordner twentyten wird geöffnet.
  3. Aus dieser kopieren wir die Codezeilen zwischen <div id=“content“ role=“main“> und </div><!– #content –> in die Zwischenablage, also hone den öffnenden und schließenden <div>-Tag:
<div id="post-0" class="post error404 not-found">
    <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
    <div class="entry-content">
        <p><?php _e( 'Apologies, but the page you requested could not be found. Perhaps searching will help.', 'twentyten' ); ?></p>
        <?php get_search_form(); ?>
    </div><!-- .entry-content -->
</div><!-- #post-0 -->
  1. Wir speichern index.php aus dem foo-Ordner als 404.php in diesem.
  2. Den Code zwischen den Zeilen  <!– SPECIFIC PAGE CONTENT BEGINS HERE –> und <!– SPECIFIC PAGE CONTENT ENDS HERE –> ersetzen wir durch den Inhalt der Zwischenablage. Die 404.php sollte nun wie folgt aussehen:
<?php get_header(); ?>

<!-- SPECIFIC PAGE CONTENT BEGINS HERE -->

<div id="post-0" class="post error404 not-found">
    <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
    <div class="entry-content">
        <p><?php _e( 'Apologies, but the page you requested could not be found. Perhaps searching will help.', 'twentyten' ); ?></p>
        <?php get_search_form(); ?>
    </div><!-- .entry-content -->
</div>
<!-- #post-0 -->

<!-- SPECIFIC PAGE CONTENT ENDS HERE -->

<?php get_footer(); ?>
  1. Wir speichern das Ergebnis als 404.php im Ordner foo.
  2. Die Schritte 1–6 sind analog für die nachstehenden Dokumente aufzurufen:
    • archive.php
    • attachment.php
    • author.php
    • category.php
    • onecolumn-page.php
    • page.php
    • search.php
    • single.php
    • tag.php
  3. Danach sollten in unserem Blog alle Seiten inhaltlich richtig funktionieren, aber höchstwahrscheinlich noch nicht optimal dargestellt werden.

Styles

WordPress verwendet Unmengen an CSS, aber nicht alle CSS-Definitionen sind optimal auf die vorhandene Webseite zugeschnitten. Daher sind vielerorts Modifizierungen wünschenswert.

Importieren der CSS-Styles aus dem TwentyTen-Ordner.

  1. Im Verzeichnis foo öffnen wir unsere style.css.
  2. Vor der Zeile, in welcher die Stylesheets der existierenden Webpräsenz importiert werden, fügen wir den Aufruf @import url(„../twentyten/style.css“); ein, wodurch die style.css etwa so aussieht:
/*
Theme Name: foo
Theme URI: http://www.meineSeite.de/
Description: WordPress Vorlage für meine Seite.
Author: Xaver Unrath
Version: 1.0
*/
@import url("../twentyten/style.css");
@import url("http://meineSeite.de/css/style.css");

Hiermit wird sichergestellt, daß die eigene Stylesheet-Datei gleichlautende Definitionen innerhalb der WordPress-Stylesheets substituiert.

CSS-Definitionen in Einklang mit dem Webseiten-Layout individualisieren.

Diese Arbeiten können auf unterschiedlichste Weise erfolgen. Grundsätzlich sollten keine Änderungen an der Datei style.css aus dem Verzeichnis twentyten vorgenommen werden, u. a. weil jede Aktualisierung der Vorlage diese Modifikationen überschreiben wird. Folglich haben wir die Überarbeitungen entweder an der CSS-Datei unserer Webseite oder – und dies sollte die bevorzugte Variante sein, da hierdurch nur die Blogseiten beeinflußt werden – an der Datei style.css im Ordner foo vorzunehmen.

  1. Um beispielsweise den Bereich für die Darstellung der WordPress-Sidebar an die eigenen Erfordernisse anzupassen, ergänzen wir die folgende CSS-Definition unterhalb der beiden @import Zeilen in der Datei style.css aus dem Ordner foo:
#primary, #secondary { width: 300px; }

Hiermit ändern wir die Breite der <div>-Abschnitte mit der Bezeichnung id=“primary“ bzw. id=“secondary“ von 220px auf 300px.

  1. Weitere Anpassungen sind in analoger Weise an der Datei vorzunehmen.
#mainContent h1, #mainContent h2 { margin-bottom: ... }

Vor der Veröffentlichung sollte der so gestaltete Blog-Bereich einer letzten, kritischen Kontrolle unterzogen werden.


Quellen

[1] Anne Mühlbauer: WordPress in eine normale Seite einbinden
[2] Integrate WordPress into Any Website Using TwentyTen 2011
[3] How to Integrate a WordPress Blog Into An Existing Website

Woran erinnert uns diese Schriftart?

ledZeppelin-1

Wem es aufgrund des kurzen Textes und/oder der Illustration noch nicht eingefallen ist, hat sich noch etwas zu gedulden. Zunächst wollen wir klären, auf welche Weise man (fast) jede Schriftart in Webseiten einbinden kann. Ich greife hierzu wieder einmal auf mediaevent.de zurück und fasse wie folgt zusammen:

Das Zauberwort lautet diesmal Webfonts. Mit der @font-face-Regel in CSS3 lassen sich endlich auch solche Schriften einbinden, die mit hoher Wahrscheinlichkeit auf dem Computer des Webnutzers nicht installiert sind. Der Browser wird in solchen Fällen die fehlende Schrift einfach nachladen. Dies funktioniert analog zum Laden von Grafiken: Die Schrift wird über die @font-face-Regel mit der src-Eigenschaft dem Webserver bekannt gemacht.

         Dateiname der Schrift im Webordner  +
                                             |
@font-face { font-family: Zoso; src: url(HillHouse.woff); } 
    ^             ^         ^     ^
    |             |         |     |
    |             |         |     +- Link zur Schriftdatei
    |             |         |
    |             |         +- Frei wählbarer Schriftname
    |             |
    |             +- Schriftart
    |            
    +- @font-face-Regel zum Einbinden einer Schriftdatei

Nun kann die Schrift, von welcher der aufmerksame Leser jetzt den Namen kennt, den HTML-Elementen zugewiesen werden, wobei eine Liste von Alternativen als zusätzliche Absicherung nicht schadet.

h2 { font-family: Zoso, fantasy; }

Browser mit Webfonts-Unterstützung

WOFF (Web Open Font Format) ist ein vom W3C standardisiertes Format für Web-Schriften, welches als modifiziertes TTF von den Mainstream-Browsern unterstützt wird. Auch Smartphones vom iPhone bis Android und iPad sind heute in der Lage, WOFF-Webfonts anzuzeigen. Somit können die bislang alternativen Formate wie TTF, EOT (nur noch für veraltete IE-Versionen von Bedeutung), OTF oder SVG entfallen.

firefox_logo3.6+ chrome_logo6.0+ safari_logo5.0+ ie_logo9+ opera_logo10+

Obwohl wir uns fortan nur auf ein Format konzentrieren brauchen und dieses eine gute Kompression hat, sind Speichergrößen zwischen 200 und 300 KB für ein Paket mit verschiedenen Schnitten keine Seltenheit. Wir sollten daher vor dem Laden überprüfen, ob die zugewiesene Schrift nicht bereits dem Betriebssystem bekannt ist.

@font-face {
  font-family: Helvetica;
  local: Helvetica;  // Erst nachsehen, ob die Schrift
              // beim Besucher schon installiert ist
  src: url(fonts/Helv.woff); // Wenn nicht, wird die Schrift
                             // vom Webserver geladen
}

Quellen für Webfonts

Google Web Fonts hostet eine Liste von Webfonts. Die Web-Fonts werden über einen einfachen Link (Google Font API) in die eigene Seite eingebunden.

<link rel="stylesheet" type="text/css"
 href="http://fonts.googleapis.com/css?family=Tangerine">

Ähnlich gestrickt ist Adobes Web Edge Fonts Angebot. Hier ist z. B. für die Schrift Muli der folgende Link in den <head> des HTML-Dokumentes einzufügen. Anschließend kann sie mittels font-family: muli, serif; in CSS zugewiesen werden.

<script src="http://use.edgefonts.net/muli.js"></script>

Meine Seite ist in der Schrift PT Sans in den Schnitten Regular, Italic, Bold, Caption und Narrow gesetzt. Diese stammt vom Anbieter Font Squirrel, der vor allem kommerzielle Schriften als Freeware zugänglich macht. Ferner sind die Überschriften der Beiträge mit der HillHouse formatiert und das Banner zusätzlich mit der BlackJack gestaltet wurden.

Was uns zur nächsten Frage führt: Welche Schriften und wie viele davon sollten auf einer Webseite Einzug halten? Ausführlich habe ich diese Problematik in einem separaten Artikel zur Typographie besprochen. Deshalb seien hier nur die wesentlichen Aspekte genannt:

  1. Weniger ist mehr. Egal, um welche Art von Publikation es sich auch handeln möge, mehr als drei verschiedene Schriftarten sind Ausdruck eines schlechten Stils.
  2. Kommen verschiedene Schriften zum Einsatz, sind diese so auszuwählen, daß sie sich deutlich voneinander abheben (z. B. Kombinationen aus Serifen- und serifenlosen Schriften). Dagegen können die verschiedenen Schnitte einer Familie bedenkenlos vermischt werden.
  3. Verzichten Sie auf das Unterstreichen von Worten. Zwar kollidiert diese Forderung mit Usuability und Ergonomie von Webseiten (Hyperlinks werden nun einmal durch Unterstreichungen kenntlich gemacht), in meinen Augen rechtfertigt dies aber nicht die ästhetische Vernichtung der Gemeinen mit Unterlänge.
  4. Der Schriftgrad sollte auf Webseiten 11 px nicht unterschreiten, wobei diese Angabe stark fontabhängig ist. Für den Zeilenabstand ist jeweils das 1,2-fache des Schriftgrades optimal. Die Verwendung von schlanken Serifenschriften (wie z. B. die Onyx) ist grundsätzlich zu hinterfragen.

Bleibt noch die Eingangsfrage. Hier ein weiterer (kryptischer) Hinweis:

zoso

Na dämmert’s allmählich? Die Spätgeborenen werden mit den Hinweisen herzlich wenig anfangen können, Vertreter meiner Generation wissen aber spätestens jetzt, daß hier die Rede vom vierten Werk der wahren Götter des Rocks ist. Die Seite der LP-Innenhülle mit den Songtiteln ist in einer Schrift vergleichbar der HillHouse gesetzt. Wer’s nicht kennt, sollte umgehend den nächsten Plattenladen stürmen (behelfsweise geht auch der Download bei iTunes & Co.), aber eigentlich zählt nur das leider vergriffene Vinyl.

ledZeppelin-II ledZeppelin-IIII ledZeppelin-IIIIII ledZeppelin-IVIV (Zoso) ledZeppelin-VHouses of the Holy ledZeppelin-VIPhysical
Graffiti

Und sofern es das Haushaltsgeld hergibt, empfehle ich uneingeschränkt gleich noch den Zukauf der anderen fünf Meisterwerke aus der ersten Schaffensperiode der Zeppeline.


QUELLEN

[1] CSS Fonts Module Level 3
[2] On Web Typography

MathML: Formeln in HTML5 einbetten

HTML5MathMLWie kommt die Mathematik ins Web? Obwohl HTML maßgeblich von einem Physiker entwickelt wurde, können wir der Auszeichnungssprache und mathematischen Symbolen kein allzu inniges Verhältnis nachsagen. Zwar ist der Bedarf, wissenschaftliche Belege, Masterabschlüsse oder gar Dissertationen direkt in HTML zu verfassen, (momentan noch) überschaubar, dennoch kann der Einsatz von Grafiken – wie z. B. auf Wikipedia – als Ersatz für eine native Unterstützung (optimal in LATEX-Syntax) nicht überzeugen. Jeder, der nachträglich einmal Änderungen an Formeln vornehmen mußte, weiß, wovon ich rede.

Aber es gibt Grund zur Hoffnung: HTML5 erlaubt fast nach Belieben Formeln mit MathML-Tags via <math>…</math> innerhalb des body-Bereichs einer normalen Webseite einzubinden.

Presentation Tags und Content Tags

Grundsätzlich wird in MathML zwischen zwei Arten von Tags unterschieden:

  1. »Presentation Tags« ermöglichen das Setzen von Formeln in HTML-Seiten als mathematische Notation. Sie können mittels CSS und zugehörigen MathML-Attributen näher beschrieben werden. Mehr braucht es fortan nicht, um in Webseiten wissenschaftliche Formeln einzubauen.
  2. »Content Tags« codieren die Bedeutung mathematischer Formeln und Ausdrücke. Sie lassen sich programmatisch auswerten – sind für das pure Layouten aber zu geschwätzig. Das Ergebnis könnte dann etwa für das Quadrat der Variablen x so aussehen:
<apply>
 <power/>
   <ci type="real">x</ci>
   <ci type="integer">2</ci>
</apply>

<ci>
  <msup>
    <mi>x</mi>
    <mi>2</mi>
  </msup>
</ci>

Browser mit MathML-Unterstützung

Grau bleibt alle Theorie, wenn ein praktischer Einsatz an den Browsern scheitert. In ihren jeweils aktuellen Versionen können Firefox & Co. Formeln mit MathML in Webseiten darstellen. Safari bringt halbwegs akzeptabel MathML auf Mac, iPhone und iPad (Probleme gibt es z. B. mit der Darstellung von Klammern). Firefox und Opera zeigen Formeln mit MathML innerhalb einer HTML5-Webseite korrekt an, in IE9 und Chrome erscheinen diese als flacher Text. Allerdings existiert für den Internet Explorer ein Plugin für MathML.

firefox_logo3+ chrome_logo24+ safari_logo5.1+ ie_logo7+ (mit Plugin) opera_logo9.5+

Die in XML-Derivaten gängige Praxis des Ablegens der Inhalte in logischen Strukturen treffen wir auch in MathML an. Da die üblichen Verdächtigen unter den Editoren sich bezüglich der Integration dieses Dokumentenformates bislang bedeckt halten, bedeutet dies natürlich einen gehörigen Eingabeaufwand.

Die Anzeige des math-Tags kann global durch CSS geändert werden.

math { font-size: large; color: navy; display: block; }

Tabelle mit MathML-Tags

Für Variablen, Operatoren, Zahlen und Konstante werden verschiedene Tags verwendet, um ihre Typographie zu individualisieren. Variablen werden z. B. kursiv gesetzt, Operatoren brauchen etwas mehr padding rechts und links. Die Sonderzeichen der Mathematik werden mit HTML-Entities wie &int; (Integral) und &sum; (Summe) geschrieben.

Fast alle MathML-Tags lassen sich durch die Attribute class, id, style, dir, href, mathbackground und mathcolor erweitern. Die nachstehende Tabelle wie auch die entscheidende Anregung zu diesem Beitrag habe ich bei mediaevent.de gefunden. Sie zeigt die individuellen Attribute der einzelnen MathML-Tags.

MathML Tag Funktion Attribute
<mrow> gruppiert Ausdrücke mit einem oder mehr Operatoren und ihren Operanden. mrow erzeugt eine horizontale Zeile – ähnlich dem tr-Tag in HTML.
\(1+2=3\)

<math>
    <mrow> 
        <mn>1</mn><mo>+</mo><mn>2</mn>
        <mo>=</mo><mn>3</mn> 
    </mrow> 
</math>
<mi> eine Bezeichnung, z.B. Name einer Funktion, Variablen oder eine Konstante. mathsize (small, normal, big, length), mathvariant (normal, bold, italic, bold-italic, double-struck, bold-fraktur, script, … )
\(\text{e}=2,7182818\ldots\)

<math>
    <mi>e</mi><mo>=</mo><mn>2,7182818…</mn>
</math>
<mo> Operator im weitesten Sinne, dazu zählen auch Klammern, Kommas und Semikolons accent, fence, form, largeop, lspace, mathbackground, mathcolor, mathsize, mathvariant, maxsize, minsize, movablelimits, rspace, spearator, stretchy, symmetric
Eulersche Zahl e mit MathML
\(\text{e}=\displaystyle\lim_{n\to\infty}\left(1+\frac1{n}\right)^n\)

<munder>
   <mo>lim</mo>
   <mrow>
      <mn>n</mn>
      <mo>→</mo>
      <mn>∞</mn>
   </mrow>
</munder>
<mfenced> öffnende und schließende Klammern und Trenner wie Kommas oder Semicolons open, separators
\(\{0.815,0.32168,1.2345,47.11\}\)

<math>
   <mfenced open="{" close="}" separators=",">
      <mi>0.815</mi><mi>0.32168</mi>
      <mi>1.2345</mi><mi>47.11</mi>
   </mfenced>
</math>
<mn> Literal, meist eine Folge von Ziffern mit Separator (Punkt oder Komma) oder ein Text, der für eine Zahl steht mathsize, mathvariant
\(0\\4711\\\text{GgT}\)
<mroot> Wurzel mit Index close
Umrechnung von XYZ nach Lab
\(L^{*}=\displaystyle 116*\sqrt[3]{\frac{Y}{Y_n}}-16\)
<msqrt> Quadratwurzel ohne Index, nur ein Argument close
\(\sqrt{x}\)
<mfrac> Brüche bevelled (nebeneinander oder untereinander), denomalign, linethickness, numalign
\(\displaystyle\frac{a}{b}\)

<mfrac bevelled="true">
   <mi>a</mi>
   <mi>b</mi>
</mfrac>
<msubsup> Element mit Superskript und Subskript; Natation ist
<msubsup> base subscript superscript </msubsup>
subscriptshift, superscriptshift
\(\int_0^\infty\text{e}^{-x}\;\text{d}x=1\)

<msubsup>
	<mo>∫</mo>
	<mn>0</mn>
	<mi>∞</mi>
</msubsup>
<mtable> Tabelle oder Matrix. Innerhalb eines mtable-Tags dürfen nur mtr- und mtd-Tags liegen (ähnlich wie tr- und td-Tags im table-Tag). alignmentscope, columnalign, columnlines, columnspacing, columnwidth, displaystyle, equalcolumns, equalrows, frame, framesspacing, groupalign, minlabelspacing, rowalign, rowlines, rowspacing, side, width
\(\left[\begin{array}{c}X\\Y\\Z\end{array}\right]=\left[\begin{array}{lll}0.412453&0.357580&0.180423\\0.212671&0.715160&0.072169\\0.019334&0.119193&0.950227\end{array}\right]*\left[\begin{array}{c}R\\G\\B\end{array}\right]\)

Gut, nun mal Butter bei die Fische. Da der visuelle Editor von WordPress mit der Codierung der MathML-Syntax mir etwas Kopfzerbrechen bereitet, habe ich kurzentschlossen das MathJax-LATEX-Plugin installiert, weshalb die hier gelisteten Beispiele im Quelltext auch nicht die vorgestellten MathML-Tags zeigen, dafür aber über das Kontextmenü zu den mathematischen Symbolen die erweiterten Funktionen von MathJax erreichbar werden.
MathJax-KontextWenn, wie im folgenden Beispiel, die Formeln komplexer sind, ist das Einbetten in LATEX-Syntax unter Verwendung von MathJax deutlich handlicher und robuster als MathML. Wird dieser dennoch benötigt, kann er (wie oben dargestellt) komfortabel über das zugeordnete Auswahlmenü ausgegeben werden. Rufen wir nun noch mit den beiden Tags <figure>…</figure> und dem optional einzubindenden <figcaption>…</figcaption> für Bildunterschriften zwei weitere Neuerungen aus HTML5 auf, verströmt unser Dokument sogar einen leichten „Taste of LATEX“.

$$\begin{eqnarray*}
b_{k} &=& \frac{1}{\pi}\int_{-\pi}^{\pi}f(t)\sin(kt)\;\text{d}t=\frac{2}{\pi}\int_{0}^{\pi}f(t)\sin(kt)\text{d}t\\
&=& \frac{2}{\pi}\Bigg[-\frac{\cos(kt)}{k}\Bigg]_{0}^{\pi}=\frac{2}{\pi}\Bigg(\frac{1}{k}-\frac{\cos k\pi}{k}\Bigg)=\begin{cases}0 & \mbox{für }k\mbox{ gerade}\\4/(k\pi) & \mbox{für }k\mbox{ ungerade}\end{cases}\ .
\end{eqnarray*}$$

(5.2) \(b_k\)-Koeffizienten der Fourier-Reihe einer Rechteckschwingung

Ausführliche Informationen zur vorgestellten Thematik gibt’s natürlich auf den entsprechenden Seiten des W3C.


Quellen

[1] Mathematical Markup Language (MathML) Version 3.0
[2] MathJax features and benefits