Nils Hörrmann Nils Hörrmann (english articles) https://nilshoerrmann.de 2012-09-25T15:40:00+02:00 A flexible inline block 3355 2012-02-06T17:49:00+01:00

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>

Eric Eggert, @yatil


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.

Dennis Frank, @freshmango


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

Dennis Frank, @freshmango


Fancy!

Symphony Extensions 3343 2012-01-22T19:39:00+01:00

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.

Digital Reading: The Guardian 3349 2012-01-21T16:10:00+01:00

Last autumn, British newspaper The Guardian released its own iPad app. Quite late as one could say, but the developers took their time for a good reason: in my eyes, this is the first truly convincing daily newspaper app created for the iPad.

The iPad version came with a generous testing period that ended early this year, making it possible to really get an overview over a longer span of time. The app’s design is modern, fits the device and does not try to imitate the paper version. Nevertheless, the Guardian’s visual style is maintained by sticking to the well-known colour scheme and font selection. All articles reside on pages side by side, the content itself is scrollable - wonderful!

A detailed review of the app with screenshots and background information has been posted by the Ministry of Type. Aegir Hallmundur summarises it perfectly:


The simplicity and straightforwardness of the Guardian app is (like its iPhone version before it) going to stand for quite a while as the acme of how these things should be done.

ministryoftype.co.uk


Pictos Server 3348 2012-01-21T14:40:00+01:00

The fine art of creating professional icons is only mastered by a handful of people. Drew Wilson is one of those few: he created Pictos, an icon set that has been very popular over the last years. Anyone surfing the web will have come across it to at least some extent. Now there is a new service available that provides the icons as personalised web fonts: Pictos Server.

Similar to web font hosters like Typekit or Fontdeck, the icon fonts will be included as short code snippets. The service also offers options to bundle only a selection of needed icons. This opens up new options for web designers, because icon fonts use less disk space: they load faster than static graphics and they can be scaled losslessly. In this matter, Jon Hicks published an article about using fonts to add icons to websites by making use of the new data attributes just before Christmas. Even if there are still a few problems to be solved as Eric Eggert pointed out in response to that article, things are moving into an interesting direction.

For me there is only one general question: who is Pictos Server aimed to? With $49 for the basic and $99 for the pro plan, subscriptions are still quite expensive in my eyes. How many icons need to be served to a common website? If you need to pay as much money for only a few icons as you would for the entire Typekit library, I guess many people will stick to customized pixel graphics. With its vector and pixel sets, Pictos is competing itself. Let’s see how prices will change over time.

Update, January 25th 2012: That was fast – there’s now an additional personal plan for $19.