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.