Jonathan's Blog

Jonathan's Blog

Mindful Leadership and Technology


Poetry Poetry on the Web Writing Technology

Trouble @ Work - Minimum Viable Poems

Posted on .

The side project that I've posted about occasionally (here, here, and here) is in a beta state, and ready for a few eyeballs.

You can check it out here: Trouble @ Work.

This is what I am calling an MVP, which stands for Minimum Viable Poems. I have put together what I feel is good content (poems), and I have basic site navigation and responsive design working.

I realize there isn't huge overlap for those who might be interested in this blog for the technical or work related stuff and those who might be interested in poems and literature.

None the less, it's an area of interest for me: poetry and technology. I am curious about these two things, how they overlap, and how they can help us in our everyday lives.


Writing CSS Poetry Poetry on the Web

CSS for Formatting a Poem on a Mobile Device

Posted on .

This took me longer than I thought it would to get right. In the end the solution is simple.

The main idea is that each line of a poem needs to wrap in such a way that you can tell it is a line. So, to accomplish this each of the lines of the poem are contained in a <p> tag.

Here was my final class:

  p{margin: 0px 0px 0px 20px; text-indent: -20px;}

This works for both mobile and non-mobile. The crux is that text-indent: -20 will outdent the first line by 20 px. The margin setting ensures that the text doesn't accidentally overlap something else on the page.

If the screen is small enough and any lines wrap, text-indent will not impact any subsequent lines causing them to appear indented, which is the poetry convention for a wrapped line.

This is web-only, and not designed for e-readers. I started with an article on that here, but ultimately the first-line stuff led me astray for a while. For my purposes, text-indent alone was enough.