I’ve now done four CSS Katas, and four times I ended up Googling “CSS first-word selector”. Of course, every time the answer was the same: not possible.

Today I made final attempt to avoid introducing non-semantic elements and use purely CSS to hack the actual movie poster together. However, it requires you to resort to some pretty hefty hacks to get things working. Take, for example, the heading for the movie stars:

In markup for this I can still rationalize grouping the two names into their own elements, but separating first name and surname feels like a bit too much. So we end up with markup like this:

Now, without a “first-word” selector: what’s left in CSS to style first names differently from surnames? All I could think of was this dirty trick:

This creates a linear gradient left-to-right, with stops at oppropriate horizontal positions: exactly between words. After that, it sets the text to clip out that background, so that you can only see the background where there’s also text. Oh, obviously this will only work in webkit browsers (and will look pretty awful in others.

Other parts of this poster were less interesting. The soap bar is mostly an excercise in text-shadow, line-height, letter-spacing, and some rotation. In any case, this is the end result, compared to the original:

The code for this result can be found on cssdesk, and is as follows:

And this CSS:

Next time: Lord of the Rings. Probably with full-markup-cheats turned on!

Here’s the slogan for today’s Kata:

Commas: use them bitches!

Or in general: interpunction is important. Turns out with this poster that even certain content (e.g. slashes) may not be content after all, but just styling.

First things first though. For the Face/Off Kata the first thing I did was to get the text in there, with only a wee bit of styling to get going. This is the markup:

And this is the CSS:

For some reason I did place a “/” in the movie title, yet not between the actor’s names, even though it was clearly there in the original poster. This is probably a problem, that can be discovered by imagining how a screen reader would go about this text. Basically, the Windows Narrator tells me this:

John Travolta Nicolas Cage in order to trap him, he must become him Face slash Off June 27nd

Not good. I’ve tried to improve my markup into this, using commas and other important interpunction:

This is much, much better. It is read by Narrator like this:

John Travolta, Nicolas Cage. In order to trap him, he must become him. Face, off. June 27nd.

Okay, so let’s assume the Narrator is my Oracle, and this markup is perfect. This poses a challenge for my CSS to still get a resulting visual that resembles the original poster. Here’s the result I settled for (compared to the original):

I’m not happy with this, as in: I wish I was more succesful in finding hacks to fix the differences. These include:

• Getting the actor names to spread out on two lines, with the actor’s first names in a smaller font. I’ve tried using “first-line”, but as soon as I decrease the font-size the second word will also fit on the first line. Highly frustrating, I see no simple solution here.
• Replacing “, ” (comma + space) with a single “/” (slash). I’ve tried several things, including the experimental unicode-range descriptor. No dice.
• Getting rid of the periods at the end of sentences. Alas, there is no “last-letter” or “nth-letter(…)” pseudo-selector.
• Finding CSS to fix the horizontally stretched text shadow on the titles. A meager “text-shadow” was as close as I could get.

In short: a failed attempt. Educational, though.

Given that I’m fine with not blogging for a few months, I might as well also be fine with posting twice in one week! I had some inspiration to work on the second CSS Kata: “Citizen Kane”. Here’s what I decided to do differently this time:

• Include all the other texts (next to the movie title) as well (as suggested by a friend of mine);
• Pick low-hanging fruit in making my effort look less shitty (e.g. using Paint.NET to find the correct color codes in the original poster);
• Use this Kata as an excuse to make an animated gif;

Here’s a comparison of the final result:

Pretty darn close! To clarify, the rightmost one is the same as the middle one with an opaque background showing the non-textual elements on the movie poster.

Oh yeah, I mentioned an animated gif, right? I kept track of all the changes I did, here’s my train of thought visualized:

(Animated GIF may not display correctly in RSS feed readers; open image or post directly to view it.)

No cheating was involved: these were the actual steps from zero to final result. Here’s the html I ended up using:

And this is the CSS to get to the end result:

Next up: “Face/Off”. Tomorrow, next week, next month, next year: who knows! Whenever I feel like it. Because blogging should be (mainly) for fun!

Last post I set up five related CSS Katas. The callenge is to recreate a movie poster with just css and minimalistic html. The idea is not to come up with an ultimate and production-ready solution. The idea is to practice, and to think outside the box.

Turns out it takes quite some effort to set aside perfectionism while trying these Kata. Turns out it takes even more effort to publicly post my imperfect attempts. Nonetheless, here goes!

I’ve tried two approaches in reproducing the “Malcolm X” movie poster. Here’s a comparison:

What I noticed immediately while practicing: it does in fact challenge you to think about some basic meta stuff. This particular kata had me stumped with one very basic question: “Is the big ‘X’ semantic, or not?”. That is: is it a drawing shaped like an ‘X’, or is it an actual letter ‘X’? So first thing I considered was changing the actual markup to something like this:

Notice the extra “X” as the main div content.

It’s an option, but it’s a bit too much for me though. It would be as if the poster said “Malcolm X, X”. However, you could say that “:after” the h1 tag comes a big “X” as additional graphical content. This led to Version A:

There’s several things I can notice about this:

• The big X has to be in a certain font. The only widely available font that comes close to the original “X” is the one from “Courier New”, and it’s not all that close. In fact, it looks a lot different.
• It’s pretty tough to control the width of the lines that make up the X. I’m not at all happy about how the top of the “M” isn’t aligned with the top of the big “X”.
• Turns out the “Malcolm X” in the original poster is quite dense. I resorted to using css transforms, but I think there’s also some font-stretching css modules (just haven’t looked into that yet).
• It’s extremely tough to make everything scale nicely. That is, all the various dimensions, font-sizes, paddings, etc. are in absolute pixels. Changing one would mean tweaking all others. I just decided that’s okay for now, allowing me to focus on the other parts of this kata.
• The screenshot was made in Chrome. In other browsers it’s not right at all. I just chose not to focus on browser differences for now.

My other attempt tries to trade semantics for more pixel-perfectness, or at least explore whether that’s a possible path to take. Here’s the code for Version B:

Here are my notes:

• It looks a lot more like the original than Version A does. Far from perfect, but this direction looks promising.
• This version is equally hard-coded: exact dimensions everywhere, all interdependent.
• There’s some peculiarities about the rotation transforms I haven’t quite grasped yet. For example, the two diagonal bars don’t quite both start equally far from the outer borders.
• After 15 years of CSS, z-indexes still make my head hurt. I need to practice that seperately some time.

All in all I’m quite pleased. Both my solutions look like shit, but hey: it made me practice! I’ll try to charge up, and may even publicize my epic failures for the second Kata as well.

In one of the books I read recently I came across Dave Thomas‘ excellent idea of “Code Katas“. These are in essence nothing more than a way to train your programming skills. Small excercises with no real consequence, allowing you to focus on the programming instead of the result.

This idea really stuck with me, even though I don’t do them enough to my taste. I’ve honed my TDD skills with the first 20 Project Euler problems, and sometimes answering a Stack Overflow question may qualify. However, I don’t quite “excercise regularly”.

Regardless of whether it will get me excercising again, I thought it’d be fun to come up with a set of kata myself. So here’s a basic challenge for you (= me?): recreate these titles on movie posters in CSS3. Just the texts of course.

Before we get to the five posters, let’s first lay down the ground rules:

• CSS3 so modern browsers (IE10+, latest Chrome, FF, Safari). Great if it works in one of em, bonus points if it looks alike across browsers.
• Fonts is a tricky bit. Google Fonts is okay I guess, but bonus points for sticking with Arial, Verdana, Georgia, Times New roman, etc.
• Images are out of the question of course.

In addition, or even to extend on these bullets: there are no real “hard and fast” rules. It’s not a competition (even though I personally love treating it as such), it’s an excercise.

Enjoy!

1. Malcolm X

“The biopic of the controversial and influential Black Nationalist leader.“

Here’s the suggested markup to style:

2. Citizen Kane

“Following the death of a publishing tycoon, news reporters scramble to discover the meaning of his final utterance.“

Here’s the suggested markup to style:

3. Face/Off

“Famous actors shoot at eachother.” Or something. Fun title for this excercise though!

Here’s the suggested markup to style:

4. Fight Club

“An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more…”

Here’s the suggested markup to style:

5. The Two Towers

Second movie in the Lord of the Rings trilogy.

Here’s the suggested markup to style:

However, I can imagine different “correct” kinds of markup for that data, feel free to tweak accordingly.