Automatische Silbentrennung

Lange durfte/musste Kunden erklärt werden, dass der Textfluss in HTML nicht so schön flüssig sein kann wie in Word & Co, weil es keinen automatischen Zeilenumbruch gibt – entweder man setzt händisch Umbrüche (oder mögliche Umbruchsstellen) oder man überlässt es rein den Gegebenheiten. Zusätzlich verkompliziert hat diese Lage, dass Textbreiten von Browsern, Betriebsystemen, Schriftarten usw. abhängig waren, wodurch es nahezu unmöglich war, passende Umbrüche zu setzen.

CSS3 bringt nun endlich die lang ersehnte Lösung – zumindest weitgehend:

body {
	 -webkit-hyphens: auto;
	 -moz-hyphens: auto;
	 -ms-hyphens: auto;
	 hyphens: auto;
}

Damit wird – richtigen HTML-Language Code vorausgesetzt – die Silbentrennung des Browsers aktiv.

Leider haben Browser aber noch immer kein Gefühl für Schönes, für Harmonie, sodass die Trennungen oft sehr stur gesetzt wirken. Es wird getrennt, was trennbar ist – egal, ob es wirklich Sinn macht.
Rein mit Technik kommt man also weiterhin nicht aus. Auch in Zukunft braucht es Leute mit Gespür für Ästhetik, sodass automatische Trennungen nur in Bereichen mit umfangreichen Texten gesetzt werden, ansonsten aber doch lieber weiterhin von Hand an den richtigen, den schönen, den notwendigen Stellen.

Quellen

  1. http://kulturbanause.de/2012/02/silbentrennung-im-browser-css-eigenschaft-hyphens/
  2. http://scheible.eu/automatische-umbruche-mit-css3/

HTML5 / CSS3 » Fonts via Google einbinden

Es gibt seit eben die Möglichkeit in modernen Browsern endlich zuverlässig auch andere Schriften einzubinden. Technisch völlig unspektakulär.
Eine Übersicht der Fonts gibt es hier: http://code.google.com/webfonts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<style type="text/css">
body {
	font-family: 'Yanone Kaffeesatz', serif;
	font-size: 100px;
}
</style>
</head>
<body>
Hello World
</body>
</html>