Every Day is Exactly the Same

The following post is about death, grief, and mortality. Important, but potentially touchy subjects. Consider this fair warning if you plan to read further.

My grandfather died recently, and I’m trying to process my emotions. My father was a Mennonite and his whole side of the family can come across as rather…stoic when it comes to occasions usually replete with intense emotions. I follow in his footsteps as far as the external expression of emotion, and though the recently deceased is not from that side of the family, I expect that they will understand my stony countenance.

Some background on my emotions: while they may not often rise to the surface, are certainly there. For instance, the only movie that brings me to tears is “Hook”: not because I had an absent, success-driven father (I didn’t/don’t), but because Peter could fly and I have been denied that ability/privilege by a paranoid government regulatory agency with little-to-no transparency when it comes to rulemaking. I find “A Beautiful Mind” to be terrifying, and “Pi” to be more-or-less normal. I can’t bring to mind any specific examples of music that educes specific emotions, but I do know that it does so, even for me, though the mood of a piece and the emotion felt may seem dissonant to another.

The point is, while my emotional neurology might be a little askew, and despite outward appearance to the contrary, I do feel a profound sense of loss for my grandfather. I’m sure his children are feeling it far more intensely. But processing this grief, and mentally preparing for the people and the sentiments I will encounter tomorrow and a week from Friday is already beginning to drain the limited emotional budget I seem to have. I’m hoping that putting it to words makes things better.

I’m doing this also as an exercise because I know no one will live forever—though I loved my grandpa, I expect to feel far more intensely the loss of my parents, or, should I remain, the loss of my brother or wife. Should I pass on first, it may help them know how I dealt with it in dealing with their own pain.

Grief is something that no one wishes to practice. Some are “destined” to do so, others will never know it. But the people who have had to deal with it provide the following words of experience, which I will paraphrase (much of this is gleaned from posts at GBB):

One does not “get over” a death. the pain will be with us for the rest of our lives, but the impact the person had on us will also be there. The memories, good and bad. Not everyone can find relief in the expectation of being reunited with their loved one in an afterlife. And the inability to mend fences now after a protracted separation may make the pain even more acute. But recognize that life itself—the one led by the aged grandfather or the teenager “taken” in the prime of her life or any other who was with us, and the life led by you or I from now on—is beautiful, and was, perhaps, just that much better for the life of the one who is now gone. Resolve to remember that person and honor their memory. Make sure you’ve got a life worth living because that’s what they would have wanted.1 Celebrate the past, look to the future. The pain will fade—albeit slowly—but it will never go away. The people in our lives leave indelible marks—the closest ones are the darkest—and when the person is gone, the mark does not go away. If it feels as though that person has been ripped from you, there will be a scar, but scars, even of this type, heal.

To-morrow, and to-morrow, and to-morrow,
Creeps in this petty pace from day to day
To the last syllable of recorded time,
And all our yesterdays have lighted bards
The way to dusty death. Shine on, brief candle!
Life’s all a walking canvas, a rich artist
That paints and dances quickly ‘cross the stage
And then is heard no more: it is a tale
Told by a poet, full of life and beauty,
Signifying everything.2

Macbeth (was struck with despair about his own imminent death, but I try to capture that it is the life that should be celebrated. Yesterdays guide the future, while at the time they may seem petty, plodding, possibly perpetual (couldn’t resist the alliteration, sorry). Death awaits us all in the end, but we paint pictures, dance dances, play music, and imbue our influence to the world. Another Shakesperian monologue states that “All the world’s a stage/And all the men and women merely players;” and describes seven ages of man in life. Regardless, the past is there to remember, the future a canvas to paint given the palette by our forebears.

“It’s not a perfect metaphor” (to quote another sage), but maybe it will help me or you.

The sermon here is one that, appropriately modified, I would be willing to deliver (were I called upon to do so) as a eulogy, or that I might like delivered on the occasion of my own death.

  1. There are exceptions to these sentiments, of course. My memory is pleasant, but if, say, one has lost a domineering spouse or abusive father, one could decide to abandon the past, to break a cycle and do something different because of that person, even while admitting the loss of an abhorrent person can still be devastating emotionally, as love and loss can (and does) transcend that type of pain. I haven’t lived this, but I hope I’m not stepping on the toes of those who have.
  2.  My rework of The Bard’s Macbeth leaves something to be desired, I admit. If I come up with something better, I might remember to stick it here, or someone else can change it.

Dear X, You Don’t Own Me

CSS is fun. I’ve noticed on The New Yorker’s website that any text that is underlined omits the descenders from that underline, and it looks really classy (looking classy is something The New Yorker has been good at, while being classy is a bit more of a mixed bag). So how would one bring that to, say, a humble blog? This is almost identical to what’s over there, too.

Here’s normal underlined text. With descenders, the letters g, j, p, q, and y do nicely, and, depending on the font, 34579. The quick brown fox jumps over the lazy dog.

Doesn’t look terrible, but it could be better. Underlining straight through the descenders just looks lazy.

Here’s fancy underlined text. With descenders, the letters g, j, p, q, and y do nicely, and, depending on the font, 34579. The quick brown fox jumps over the lazy dog.

This uses a couple of features I wasn’t aware of before, and I’ll explain those before I clean up the above (there are still some issues) and deal with how hideous it looks when highlighted.

First, in the CSS Background & Borders Module Level 3, there is (finally) support for multiple background images! This is something I wanted to do way, way “back in the day” when I first started learning CSS. Instead, I had multiple container divs for each image, positioned where I wanted each to go. Now, to specify multiple images or backgrounds, the syntax is as follows:

background: url(/path/to/image1.png), #123456, -webkit-linear-gradient(white,black);

And the syntax for related properties, like position, repeat, size, etc., is comma delimited, e.g.

background-size: 0.05em 1px, 0.05em 1px, 1px 1px;

The full CSS for my fancy underlines above is this:

.smart-underline {
	text-decoration: none;
	background: -webkit-linear-gradient(#fff, #fff),
		-webkit-linear-gradient(#fff, #fff),
		-webkit-linear-gradient(#000, #000);
	background-size: 0.05em 2px,
		0.05em 2px,
		2px 2px;
	background-repeat: no-repeat,
		no-repeat,
		repeat-x;
	text-shadow: 0.03em 0 #fff,
		-0.03em 0 #fff,
		0 0.03em #fff,
		0 -0.03em #fff,
		0.06em 0 #fff,
		-0.06em 0 #fff,
		0 0.06em #fff,
		0 -0.06em #fff,
		0 -0.09em #fff;
	background-position: 0 90%,
		100% 90%,
		0 90%;
	}

Going through this one property at a time:

text-decoration: none;

This specifies explicitly that there is to be no (normal) text-decoration for this. Your typical underline goes here (you should technically be using  <span style=”text-decoration:underline;”>underline</span>  rather than <u>underline</u>  for typical underlines if you aren’t already). But we don’t want normal stuff, and we can’t use the normal underline in this instance.

background: -webkit-linear-gradient(#fff,#fff),
	-webkit-linear-gradient(#fff,#fff),
	-webkit-linear-gradient(#000,#000);

This specifies the background colors we’re working with. My page has a white background and black text, thus the colors. The first two should be the background of your page, and the last the text or underline color you want. The only reason I’m using the -webkit-linear-gradient (with no difference between the colors) is that, for some reason, the solid colors produce absolutely no effect at all. I don’t yet know the reason, but I make this change and, voilà, it works.

background-size: 0.05em 2px,
	0.05em 2px,
	2px 2px;

Now that we’ve specified the colors, how big are these backgrounds? They’re specified in x‑size y‑size, so if you want a bigger gap between the underline and the descender, change the 0.05em  in the first two lines. If you want a thicker underline (this is something I will change in my cleaned up version below, because it looks really tacky when you zoom in/scale up the page), change the first number in the last line. I would recommend against using a scalar height (like percentage, em, or ex) as at small enough sizes, they won’t even show up (sometimes pixel widths don’t show up either, but they’re less likely to disappear).

background-repeat: no-repeat,
	no-repeat,
	repeat-x;

The repeat structure: we don’t want to repeat the background, but we do want to repeat the underline (the third background), and only along the x-axis.

background-position-x: 0%,
	100%,
	0%;
background-position-y: 90%,
	90%,
	90%;

The background-position section is actually rather important. Well, part of it is, which is why I split them apart. For the x position, the first and second offsets for the “white” backgrounds deal with the underline immediately before and immediately after the underlined text. Recall that this is 0.05em wide, so it just sticks an 0.05em tag on the front and back of the text, in white. Honestly, this is not a big deal, and if you wish to say 0% for all of these, it won’t look bad at all. The background-position-y argument is actually the important section: how far from the top of the box do you want the underline? Honestly, this does have something to do with the font itself. Unfortunately, I don’t know from where this is measured, but I would imagine it’s the top of the box. 90% seems to be about right for the font I use. The Whatever value you pick, though, make sure it’s proportional! a solid pixel value probably won’t work quite right. The most important thing is that all three of these y-values are identical. This places the “background” in the proper position to act as an underline.

text-shadow: 0.03em 0 #fff,
	-0.03em 0 #fff,
	0 0.03em #fff,
	0 -0.03em #fff,

The text-shadow property is probably the hardest to grasp, and it’s the most important to get the effect we want. There are, in this case, four properties. The way shadows work in CSS is that they are stacked on top of one another. And the first shadow is on top. There are differences between text-shadow and box-shadow which you can read about in the Text Decoration Module Level 3 candidate recommendation, but I don’t need/want any of those other properties here. What this does, in effect, is block out (in the background color) the “underline” background on all sides of the text: right, left, top, bottom, in that order. A more patient person could add top-right, top-left, bottom-right, and bottom-left, but this is usually sufficient to capture the bits of underline that one would want erased.

After tweaking, here’s what I will use/am using for my blog:

::selection {
	background:rgb(50,142,254);
	}
.smart-underline::selection {
	text-decoration:underline;
	background:rgb(50,142,254);
	color:#fff;
	text-shadow:none;
	}
.smart-underline {
	text-decoration: none;
	background: -webkit-linear-gradient(#fff, #fff),
		-webkit-linear-gradient(#fff, #fff),
		-webkit-linear-gradient(#000, #000);
	background-size: 0.05em 1px,
		0.05em 1px,
		1px 1px;
	background-repeat: no-repeat,
		no-repeat,
		repeat-x;
	text-shadow: 0.03em 0 #fff,
		-0.03em 0 #fff,
		0 0.03em #fff,
		0 -0.03em #fff,
		0.06em 0 #fff,
		-0.06em 0 #fff,
		0 0.06em #fff,
		0 -0.06em #fff,
		0 -0.09em #fff;
	background-position: 0 90%,
		100% 90%,
		0 90%;
	}

Testing: The quick brown fox jumps over the lazy dog.

The second section, with the ::selection pseudo-selector is so that underlined passages don’t look bad when sections of text are highlighted. Without this, the text-shadow property is highlighted, making the underlined text look bold instead. Not sure if such text, when copied, would retain the underline formatting (quick testing indicates the answer is “no”), and I can only pick one background color for the highlight, which means on other people’s computers, on other browsers, etc., the color probably looks off, but the letters don’t look fat, and it still looks underlined. Fixing that is the point of the first ::selection  section.

Now that I’ve shown you all that, here’s another way to do it:

.smart-underline-2 {
	text-decoration: underline;
	text-decoration-skip: ink;
	}

Unfortunately, no UA I’m aware of at this writing supports it, so instead we get this for now:

Theoretically fancy underlined text, simple CSS! With descenders, the letters g, j, p, q, and y do nicely, and, depending on the font, 34579. The quick brown fox jumps over the lazy dog.