Archive for September 3rd, 2013

I've noted in the past that the CSS pseudoelements represent inserted content in the element (i.e. span::before refers to a virtual element inserted within the <span> before the rest of its contents, not to content that is inserted before the <span> itself. That makes it useful for things like decorative guillemets for next and prev links ( a[rel=next]::before { content: '« '; } a[rel=prev]::after { content: ' »'; } ) (note using rel rather than classes to keep everything really semantic).

But you can insert content even in elements that can't have content, like <hr>. See the last two examples on CSS tricks; especially the last one that sticks a glyph in the middle of the horizonal rule:

hr {
    text-align: center;
}
hr::after {
    content: "§";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

Or you can use the pseudoelement to create custom underlines. text-decoration: underline gives a solid underline in the text color. border-bottom gives far more options, but is generally too far away from the text for my taste. You can increase the distance with padding-bottom but you can't use negative values to decrease it. Instead, use a full-width ::after element with a bottom border, and move that:

a{
     position: relative;
     text-decoration: none;
}
a::after{
     position: absolute;
     left: 0px;
     bottom: 6px; /* or whatever looks right */
     content: '';
     width: 100%;
     border-bottom: 1px dotted green
}

Or for numbering paragraphs, use a CSS counter with the ::before element (this is what I used for my line numbering function, and for numbering quotes on kavanot.me):

p {
	margin-left: 10em;
	position: relative;
	counter-increment: p-counter;
}
p::before {
	content: counter(p-counter);
	font-weight: bold;
	position: absolute;
	left: -2em;
}

Posted by Danny on September 3, 2013 at 8:12 pm under Web Design.
Comment on this post.

Typography

Butterick has a few rules for block quotations: Reduce the point size and line spacing slightly, and indent the text block be­tween half an inch and a full inch on the left side, and op­tion­al­ly the same on the right.

Since I'm using both Hebrew and English quotes, I'll indent on both sides. Rather indenting with margin, I set the width and use margin: auto to center it. That way, if the quote ends up wider than the fixed width (see the issues with comparing texts, below), it will remain centered.

blockquote {
  font-size: 92%;
  line-height: $linespacing;
  width: $linewidth - 1in;
  margin: 0 auto;
}

Note that I'm using SCSS, so I can use variables and math. I have to repeat the line-height since what is inherited is the actual amount of the line height, not the relative amount (I set line-height: 1.35 on the <body> which is 21px, but I want the <blockquote> line-height to be 1.35 times its own font-size).

Continue reading ‘Using <blockquote>’ »

Posted by Danny on September 3, 2013 at 7:17 am under Web Design.
Comment on this post.