Hacking at 0300

I never really liked how my hotkeys plugin (that allows things like $('body').on('keydown', {keys: '^A'}, function() {alert ('Control-A!'); })) worked internally, and it didn't allow multiple handlers on a single element for a given key combination, and required initialization. I went back and looked at it some more, and studied John Resig's hotkeys, and came up with a simpler, better version. Use is largely the same, but there's no $.keymap.hotkeys('keydown') to initialize, and you have to explicitly remove handlers with $().off() rather than replacing with a new handler.

See the code.

Code and demo are on github.

I wanted to have a simple word count on the Kavanot editor, and this:

$('span.wordcount').text($('#editor').val().split(/\s+/).length+' words');

is enough for me. Keeping it live is straightforward:

$('#editor').on('input', function(){
  $('span.wordcount').text(this.value.split(/\s+/).length+' words');
});

But that won't show the word count when the page is first loaded. The ready event only works on document, and there isn't any event that just fires immediately (as far as I can see). So I created one.

$(selector).on('immediate', function() {...}); just calls the function with the relevant element as this. That's pretty much worthless, but you can combine the events:

$('#editor').on('immediate input', function(){
  $('span.wordcount').text(this.value.split(/\s+/).length+' words');
});

And now the word count shows immediately and is live, and remains DRY.

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;
}

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).