Originally published at: Online archive of e e cummings poetry | Boing Boing
…
If I was really immature and had a lot of cash, I would buy a domain called “Old Sock” that would redirect to that page.
2 Likes
and what i want to know is
how do you like your copyright
Mister Death
2 Likes
I’m a front-end developer here and feeling like a total idiot. How come the spaces in the html below work without them being characters?
If I copy one of those spaces, it’s just a space, U+0020 : SPACE [SP], not some magical invisible character.
If I copy the whole source and stick it in a new webpage, they go away.
CSS:
white-space: pre;
2 Likes
nice
(in
deed) it
may
w
e
l
l
be
p
e
r
f
e
c
t
l
y . . . cromulent
3 Likes
Ohh I see. Fancy-schmancy CSS 2. Well we don’t use any of that stuff.
2 Likes
You are truly a generous spirit for asking me this SUPER NERDY QUESTION THAT I WAS DYING FOR SOMEONE TO ASK ME
The solution has a couple parts to it. As I know you know, HTML collapses whitespaces. So the first challenge was the preserve them.
The source data files are YAML with the whitespaces in there with a monospace style treatment
In the preprocessor “view” before they get passed to the static framework’s templates, each line is split. Then a regex is used to wrap any case of consecutive white spaces in a span with a special class.
The lines are printed into the HTML with a wrapper div. The CSS then targets the indents and sets white-space to “prewrap” so the spaces are preserved.
But you’re not done yet.
The spaces take up next to no space in the font, so even if you preserve them the look comes out wrong on the page.
So I give each blank character in the indent span a fake letter-spacing “fudge” width.
That is eyeballed to make most of the indents come out roughly right.
On a case by case basis, it is still off, especially on long lines when the imperfections in the fudge factor add up and don’t hit it just right.
In those cases, you need line by line hacks.
So, I have a hidden data attribute on each line of the poem with its line number, which you can see in your screenshot above.
I target CSS at particular lines that tweaks the letter-spacing for just that line, to get it right. That is accomplished with a SCSS mixin, which is then applied with carefully targeted CSS, as in “Buffalo Bill 's.”
Thank you for letting me do this nerdsplaining.
11 Likes
NB: He spelled his own name with capital letters: “E.E. Cummings.” The lower cases in the poems were his idea; the lowercasing his name was the publisher’s art director’s.
1 Like
2 Likes
This topic was automatically closed after 5 days. New replies are no longer allowed.
