seeseekey.net - Invictus Deus Ex Machina

In bestimmten Fällen benötigt man in EPUB-Dokumenten einen Seitenumbruch. Mit der App Ulysses lässt sich ein solcher Umbruch allerdings nicht in der Standardkonfiguration realisieren. Stattdessen ist etwas Handarbeit vonnöten.

Die Style-Verwaltung von Ulysses unter Mac OS X

Im ersten Schritt muss ein neuer Stil angelegt angelegt. Dieser Stil wird anschließend bearbeitet und am Ende des Stiles folgender CSS-Schnipsel hinzugefügt:

hr {
	page-break-after: always;
	visibility: hidden;
}

Wird das Dokument nun mit diesem EPUB-Style exportiert, so wird jedesmal wenn im Quelltext ein:

----

genutzt wird, automatisch ein Seitenumbruch im EPUB erzeugt.

Gestern suchte ich nach einer Möglichkeit die CSS-Selektoren von zwei unterschiedlichen Dateien sauber zusammenzuführen. Zwar gibt es eine Menge Webdienste, welche CSS verdichten und minimieren, allerdings haben diese meist ein Problem mit der sauberen zusammenführen der Selektoren.

Devilo.us

Fündig geworden, bin ich schließlich beim Webdienst Devilo.us, welche die gestellte Aufgabe ohne Probleme meistert. In den erweiterten Optionen kann man die Optimierung nach seinen Wünschen konfigurieren, so unter anderem auch ob Selektoren zusammengeführt werden sollen oder nicht.

Für ein kleineres Webprojekt war ich auf der Suche nach einem brauchbaren Hintergrund. Allerdings wollte ich kein klassisches Hintergrundmuster, sondern etwas was wie aus einem Stück wirkte, ohne das es sich dabei um ein Bild handelt welcher nur gestretcht wird.

Der Generator

Fündig geworden bin ich beim Zen Background Generator welcher unter mudcu.be/bg/ zu finden ist. Dort kann man in einigen wenigen Schritten den gewünschten Hintergrund erzeugen. Dazu werden die Textur, der Gradient und einige andere Kleinigkeiten eingestellt. Anschließend erzeugt der Generator den passenden Hintergrund. Das ganze kann das als Bild, oder als CSS Anweisungen mit den entsprechenden Kacheln exportiert werden.

Das mittlerweile mit CSS Dinge wie Logos und Formen abgebildet werden, hat sich sicherlich schon herumgesprochen. Witzig wird das ganze immer dann, wenn neue Grenzen ausgelotet werden, wie dies auch bei den „CSS Creatures“ geschieht.

bennettfeely.com/csscreatures/

Dort werden kleine Monster gezeigt, welche vollkommen in CSS erstellt wurden. Daneben kann man sich auch eigene Monster erzeugen. Zu finden ist das ganze unter http://bennettfeely.com/csscreatures/.

Mit den „Cascading Style Sheets“ ist mit jeder Version mehr möglich. In neuerer Zeit werden so auch Formen und Logos in CSS nachgebildet. Einer der Vorteile dieser Technik ist die gesparte Bandbreite bei der Übertragung.

Die Hauptseite von „Shapes with CSS

Auf der Seite „Shapes with CSS“ welche unter http://cssshapes.iweb.uz/ zu finden ist, kann man sich Formen mit den entsprechenden CSS Quelltexten anschauen. Auch das Vorschlagen neuer Formen ist dort möglich, welche ebenfalls auf der Seite erscheinen sollen.

Kaum nimmt man einen Server aus dem Serverschrank, zeigt der entsprechende Server einem welche interessanten Fehler er über die LEDs an der Front ausgeben kann. In diesem Fall leuchtete bei einem Fujitsu Server die CSS LED. CSS steht dabei laut Fujitsu für „Customer Self Service“.

Die leuchtende CSS LED

Der erste Schritt führt bei einem solchen Fehler (wenn ein Windows auf dem System läuft) in die „Computerverwaltung“ und dort in die „Ereignisanzeige“ in den Unterpunkt „Anwendung“. Dort sollte die Quelle „ServerView Agents“ einen Fehler geworfen haben:

A critical error happend while BIOS selftest in cabinet 0 of server EXAMPLE. See server management message log (recovery log) for detailed information.

Der Fehler an sich ist nicht sehr aussagekräftig, so das man hier den Fehlerspeicher des Servers auslesen muss. Dies geschieht über die „Fehlerspeicheranzeige“ welche Teil der „Fujitsu ServerView Suite“ ist. Dort sieht man dann auch das der Fehler in diesem Fall nicht wirklich dramatisch ist:

Ursachen:
• Keyboard error detected during Power-On Self-Test (POST)
Problemlösungen:
• Check in the case of headless mode (without local keyboard) that AVR license is enabled or keyboard check is disabled
• Check keyboard cable
• If problem persists replace keyboard / cable.

Die entsprechende Einstellung wird im BIOS geändert und schon läuft der Server wieder wie am Schnürchen.

Die Texteingabeelemente sind unter Safari so z.B. auf dem iPad mit runden Ecken versehen. Wer dies nicht möchte, der sollte in die passende CSS Datei einfach folgendes eintragen.

input {
    -webkit-appearance: none;
    border-radius: 0;
}

Damit sind die runden Ecken dann verschwunden. Das zusätzliche „border-radius: 0;“ muss angegeben werden damit das ganze auch unter iOS 5 funktioniert.

Beim bearbeiten einer CSS Datei viel mir folgendes Stück Quellcode ins Auge:

a {
	padding: 5px;
	#margin-left: -12px;
}

Die Eigenschaft „#margin-left“ ist nicht standardkonform und sollte nicht interpretiert werden, was zur Frage führte was sie in der CSS Datei zu suchen hatte. Nach einiger Suche ergab sich die Lösung, es handelt sich dabei um eine Form der Browserweiche welche nur vom Internet Explorer ausgewertet wird.

Weitere Informationen gibt es unter:
http://de.selfhtml.org/css/layouts/browserweichen.htm

Der pre Tag dient dazu einen Text wiederzugeben wie er eingegeben wurde. Das ist an sich auch ganz schön, kann aber bei kleinen Auflösungen oder einem responsiven Design zum Problem werden. Den dort wird entweder das Layout zerschossen oder der Inhalt des pre Tags durch eine overflow CSS Anweisung abgeschnitten. Abhilfe schafft hier:

pre
{
        white-space: pre-wrap;
}

im CSS. Dadurch wird der pre Tag im Zweifelsfall umgebrochen und bleibt somit lesbar.

Weitere Informationen gibt es unter:
http://www.css4you.de/Texteigenschaften/white-space.html
http://blog.bissinger.biz/zeilenumbruch-im-pre-tag/
http://de.selfhtml.org/html/text/praeformatiert.htm

Responsives Design ist schon eine tolle Sache. Je nach den Fähigkeiten des Ausgabegerätes wird die Webseite angepasst. Vor einigen Wochen habe ich mich auch daran gemacht und mein Design um eine reponsive Komponente erweitert. Das ganze sieht auf kleineren Geräten nun so aus:

Dabei wird per CSS geschaut ob eine bestimmte Mindestbreite unterschritten wird:

@media screen and (max-width: 850px)
{
 ...
}

Wenn das der Fall ist werden bestimmte Elemente (wie die Siderbar) ausgeblendet, die Größe der Schriftart verändert, et cetera. Nur gibt es anscheinend ein Problem mit ungeklärter Ursache. Wenn ich auf einem Mobilgerät die Seite „Blog“ aufrufe so ergibt sich folgendes Bild:

Er ignoriert anscheinend das angepasste CSS für Bildschirme kleiner 850 Pixel und zeigt stattdessen die „normale“ Seite an. Dies passiert auf allen getesteten Geräten und auch nur auf der Blog Seite. Nun zum Rätsel: Woher kommt das? Über Ideen zur Lösung des Problems würde ich mich freuen :)

Weitere Informationen gibt es unter:
http://www.elmastudio.de/webdesign/webseiten-optimierung-fur-mobile-gerate-verschiedene-losungen-im-vergleich/
http://www.elmastudio.de/webdesign/diskussionsanregung-wie-wichtig-ist-die-webseiten-optimierung-fur-mobile-gerate-heute-schon/