A flexible inline block

Flexible inline block

When working on this website, we stumbled upon an unexpected problem: How should we create the text highlighting in our headers giving each line a larger padding to the right? It took us a while, but in the end we found a clever solution.

The problem resulted from a static mockup that looked quite simple. We wanted the markup to be simple as well and as semantic as possible, so we started with just a paragraph:

<p>
    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit 
    non mi porta gravida at eget metus.
</p>

p {
    padding: 5px 45px 0 9px; 
}

But there was a problem.

Bild

Using display: block didn’t work: while it respects a given padding, it creates a single big box and doesn’t apply to lines.

Bild

Using display: inline didn’t work either, as it just creates a single line of text. So we thought: display: inline-block to the rescue! But that didn’t change the situation. We had to add additional markup for each line to get things working:

<p>
    <span>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis </span>
    <span>vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum </span>
    <span>at eros. Donec id elit non mi porta gravida at eget metus.</span>
</p>

p span {
    padding: 5px 45px 0 9px;
    display: inline-block;
    margin: 4px 0 0; // needed to separate the lines
}

This finally worked perfectly.

Making it more complicated

Nevertheless, we had another requirement: our site knows two states – a wide and a narrow one, applied responsively based on the windows size (just give it a try and resize this window). So a line was no longer a line: what might be single line in the wide version could become one and a half lines in the smaller version. We needed to add more span elements to our highlighted paragraph. This led to a new problem: every few words, for each span, the padding - needed at the beginning of the line - was repeated. Sure enough this was not what we were after.

Bild

Bild

The solution

To get rid of the newly introduced gaps, we added a matching negative margin to the right of all spans, hence removing the left padding. This nearly made everything work as needed: no gaps between lines and everything wrapping nicely when resizing the window. But the left padding we just removed was now also missing at the beginning of the lines.

Bild

What saved us was a rather neat idea: we added a pseudo element before each span. By positioning this element absolutely without specifying the top but setting a left coordinate, it automatically aligned at the beginning of each line:

p span::before {
    width: 9px;
    height: 34px;
    display: inline-block;
    content: " ";
    position: absolute;
    left: 0;
    margin-top: -5px;
}

Job done! And this is what the different layers look like when relocated by a few pixels:

Bild

Post scriptum

A few quick responses on Twitter:

@nilshoerrmann <span>That</span><span>makes</span><span>very</span><span>ugly</span><span>code</span>. <span>Unmaintainable.</span>

This is true – the described method makes the markup harder to read. But in our case maintenance is not a big problem because we have a simple XSL template that generates the needed markup on the fly. I’ll post more on this later this month.

@nilshoerrmann @yatil I made something similar with display: inline: dabblet.com/gist/1753471 This way you don’t have to markup each line.

Really nice. But this gets extra bonus points as it also solves the problem of a larger right padding:

@nilshoerrmann dabblet.com/gist/1753540 /cc @yatil

Fancy!

Ein Jahr Büro für Web- und Textgestaltung

Blick ins Büro

Vor anderthalb Jahren begann das Projekt Selbstständigkeit, vor einem Jahr folgte die Gründung des Büros für Web- und Textgestaltung. Nun gibt es einen überarbeiteten Inter­net­auf­tritt, der uns und unsere Projekte vorstellt: hananils.de.

Der zentrale Gedanke unserer Seite war es, zwei Bereichen eine Bühne zu schaffen:

Da alles möglichst kompakt dargestellt werden sollte, haben wir uns für einen kombinierten Seitenaufbau entschieden, der die Projekte oben und die Texte unten zeigt – unser Kontakt dient als Schieber zwischen beiden Teilen und soll einen zunächst unauffälligen, dann überraschenden Übergang beider Ebenen ermöglichen. Die Umsetzung ist ein kleines Experiment, denn die Zweiteilung des Layouts baut sich über das Scrollen der Seite auf: URLs müssen dynamisch geändert, Inhalte bei Bedarf nachgeladen werden. Ein mehrseitiges Layout versteckt sich auf einer einzigen Seite, und kommt doch ohne Hash-URL à la Twitter aus (#!).

Bild

Das Experiment hat Spaß gemacht, auch wenn – wie immer – die Feststellung gilt, dass man sich selbst der schlechteste Auftraggeber ist.

Wer Interesse hat, wie wir die Seite technisch umgesetzt haben, kann einen Blick in den Quelltext werfen. Wir sind für Fragen und Anregungen offen.

Wer Lust auf eine eigene Seite bekommen hat, kann uns kontaktieren. Wir machen gerne noch eine.

Symphony Extensions

In case you are using Symphony, you certainly know Subsection Manager and Date and Time, two extensions I have been developing over the last years. Both have moved to a new home at Github.

But maybe you have not used Symphony yet, or haven’t found an excuse to use it lately. If you have not already fallen in love with XSLT and the simplicity of the backend, you’ll have to check it out now in order to try these two extensions:

Subsection Manager

Bild

Symphony offers an easy way to create sections and model the fields the way you like. Nevertheless, from time to time you need to connect the content of two sections: you might have an articles section you’d like to link images to, or you are building a books section you’d like to connect with authors. With a default Symphony install, you can use select boxes or Selectbox Link Fields to create these connections, but you will not be able to see and manage all your content at once. Subsection Manager tries to solve this problem by providing an inline management of another section’s content. By adding the Subsection Manager field to your parent section, you can integrate another section as a subsection. The subsection’s entries can be managed through the inline interface as well as the regular Symphony section entry list. You can opt for inline editing only by simply hiding the specified section from the menu.

As of version 2.0, this extension bundles a second field type: Subsection Tab. It provides a tabbed interface of subsection entries that is well-suited to manage multilingual content. All tabs are static and have to be set up in the field settings.

Subsection Manager is now available under its new address at github.com/hananils/subsectionmanager.

Date and Time

Bild

Date and Time offers an easy interface providing a calendar widget that helps creating multiple dates and date ranges. The field respects the system settings and displays date and time accordingly. Nevertheless, it is capable to read and understand all relative date formats known to PHP 5.

It’s now available at github.com/hananils/datetime.

Both extension are released under MIT license and available for free. If you’d like to contribute, feel free to fork the source and send a pull request.

If you are using one of the two extensions as submodules in your projects, check out this excellent guide by Nils Werner over at symphonyextensions.com which also covers moved sources.

Das neue Lesen: The Guardian

The Guardian – iPad-App

Im vergangenen Herbst brachte der britische Guardian seine Zeitung auf das iPad. Reichlich spät könnte man meinen, doch die Macher haben sich mit gutem Grund Zeit gelassen: die App ist die erste Tageszeitung auf dem iPad, die mich wirklich überzeugt.

Die iPad-Version startete mit einer großzügigen Testphase bis Anfang dieses Jahres, so dass es möglich war, sich wirklich über einen längeren Zeitraum einen Überblick zu verschaffen. Die Gestaltung ist modern, dem Gerät angemessen, sie versucht nicht die Zeitung aus Papier nachzuahmen. Und dennoch geht der visuelle Stil des Guardians nicht verloren, was insbesondere auf die bekannte Schrift- und Farbwelt zurückzuführen ist. Artikel sind als Seiten nebeneinander angeordnet, die Texte selbst scrollbar – wunderbar!

Eine ausführliche Besprechung der App mit Bildern und Hintergründen gibt es beim Ministry of Type. Dort bringt es Aegir Hallmundur auf den Punkt:

Die Einfachheit und Gradlinigkeit der Guardian-App wird für eine ganze Weile (ähnlich wie die iPhone-Version zuvor) Inbegriff dessen sein, wie die Dinge gemacht werden sollten.

ministryoftype.co.uk

Pictos Server

Pictos Server

Gute Icons zu erstellen ist eine hohe Kunst. Ein gelungenes Set, das sich seit Jahren großer Beliebtheit erfreut, ist Pictos von Drew Wilson. Jeder, der auch nur ein bisschen im Netz surft, wird es zumindest auszugsweise schon einmal gesehen haben. Nun gibt es ein neues Angebot, das die Icons als personalisierbaren Webfont bereitstellt: Pictos Server.

Ähnlich wie bei den Webschriftanbieter Typekit oder Fontdeck werden die Icon-Schriften über einen kurzen Code-Schnipsel in eine Webseite eingebunden. Dabei lassen sich die integrierten Icons gezielt auswählen. Für Webdesigner eröffnet dies neue Möglichkeiten, denn Icon-Fonts verbrauchen wenig Speicherplatz: sie laden schneller als statische Grafiken und lassen sich zudem ohne Qualitätsverlust skalieren. Einen interessanten Beitrag gab es hierzu in der Adventszeit von Jon Hicks zu lesen, der sich für eine Einbindung die neuen data-Attribute zu Nutze machte. Auch wenn, wie Eric Eggert in einer Antwort deutlich machte, noch einige Probleme zu lösen sind, entwickeln sich die Möglichkeiten von Webicons in eine interessante Richtung.

Grundsätzlich stellt sich die Frage, für wen sich der Service von Pictos Server lohnt, denn mit 49 $ für das Einsteiger- und 99 $ für das Profipaket empfinde ich die Preise derzeit noch als sehr teuer. Wie viele Icons verwendet eine durchschnittliche Seite schon? Wenn das Einbinden von ein paar Icons am Ende genau so viel kostet, wie die vollständige Schriftbibliothek von Typekit, werden die meisten mit Sicherheit weiterhin auf angepasste Pixelgrafiken zurückgreifen. Pictos macht sich mit seinen Vektor- und Pixelsets selbst Konkurrenz. Es bleibt abzuwarten, ob sich hier langfristig preislich noch etwas tut.

Nachtrag vom 25. Januar 2012: Das ging schnell – nun gibt es auch ein zusätzliches Starterpaket für 19 $.