Pens from Den McHenry https://codepen.io/denmch/ en nospam@codepen.io Copyright 2024 2020-05-30T17:59:15-07:00 STIKHOI (vanilla JS) https://codepen.io/denmch/pen/ExVqKEo https://codepen.io/denmch/pen/ExVqKEo Den McHenry

See the Code - See it Full Page - See Details

<p>STIKHOI: Displaying Greek & Latin Verse on the Web</p> <p>This is a method for rendering Greek and Latin verse on the web, designed from the perspective of progressive enhancement using semantic HTML and employing CSS and optional jQuery for presentation.</p> <p>If, for any reason, either JavaScript or CSS doesn't load, the presentation of the poetry will degrade gracefully to reveal the semantic markup, which retains proper line numbering.</p> <p>Why this matters</p> <p>There hasn't been a standard for citing classical verse on the web in a way that is (1) semantic and (2) aesthetic (i.e., aligned with print conventions). People often copy and paste snippets of poetry within a <code>blockquote</code> element when citing smaller pieces or painstakingly creating tables with manual line numbers when displaying larger works. Like the makers of every infomercial, I believe there has to be a better way.</p> <p>Semantics of verse composition</p> <p>Classical verse is composed in lines, either uniform in meter ("stichic" verse) or varying on a pattern ("strophic" verse).</p> <p>In either case, a poem (or a passage of a poem) is a list of lines, each with a numbered identifier, following a repeating pattern of varied complexity. Line numbers are part of the meaning of poetry, so in semantic markup the ordered list (<code>ol</code> element) is most appropriate.</p> <p>First, I'll briefly explain how the HTML, CSS, and optional jQuery work, and then display several examples of verse of different meters cited from different starting lines, all showing proper line numbering, and where appropriate, consistent indentation.</p> <p>Markup</p> <p>In HTML, we can identify the starting line number with the ordered list's <code>start</code> attribute. In the absence of CSS and JavaScript, the list of verses will still display with the proper numbers, but we prefer to display line numbers for each fifth line, rather than every line, and that's a presentation issue.</p> <p>Styling</p> <p>The stylesheet does the following:</p> <ol> <li>It suppresses line numbers so that they may be conditionally revealed as needed.</li> <li>It reveals the line numbers based on the value of the <code>start</code> attribute (i.e., only lines ending in 5 or 0 will display, regardless of the start number).</li> <li>It indents even-numbered lines if a poem is composed in couplets, whether the start line is even or odd.</li> <li>It provides proper indentation for strophes (verse patterns greater than two lines).</li> </ol> <p>In a strophe (e.g., a repeating ABCD pattern), the logic for indentation changes based upon whether the first line is an A, B, C, or D line.</p> <p>All of this is accounted for by a small number of classes. Two classes cover the vast majority of classical verse:</p> <ul> <li><code>.verse</code> ensures that every fifth line is numbered</li> <li><code>.couplet</code> indents even numbered lines</li> </ul> <p>A few more complex classes cover most strophic poetry:</p> <ul> <li><code>.from-B</code>, <code>.from-C</code>, and <code>.from-D</code>, are used with strophes when a passage is quoted from any but the first line in the ABCD pattern.</li> <li><code>.indent-C</code> and <code>.indent-D</code> are used when either the C or D needs to be indented</li> <li><code>.indent-C-D</code> is used in the special case where the C line is indented and the D line is indented even further (e.g., Alcaic).</li> </ul> <p>jQuery</p> <p>The optional jQuery replaces native numbering with a CSS counter that resembles the types of line numbers used in print. It does so by pulling in the start value from the ordered list and performing a calculation (since CSS counters are zero based), and applying a new set of styles.</p>

]]>
STIKHOI (vanilla JS) 2020-05-30T17:59:15-07:00
Sortes Magicae: Your Fortune darkly told by MTG cards https://codepen.io/denmch/pen/zbmPZK https://codepen.io/denmch/pen/zbmPZK Den McHenry

See the Code - See it Full Page - See Details

]]>
Sortes Magicae: Your Fortune darkly told by MTG cards 2019-03-20T19:55:43-07:00
Vanilla JS Detail View https://codepen.io/denmch/pen/RMbVbj https://codepen.io/denmch/pen/RMbVbj Den McHenry

See the Code - See it Full Page - See Details

I had an idea of creating a gallery that zooms to a detail view to scale at actual size on mouseover. Calculations are made based on actual image file size and relative mouse position. Touch devices already enable pinch zoom, so it should render as a simple thumbnail gallery on those devices. I think it could be useful for product images (e.g., serialized in a slider) or for browsing artwork.

]]>
Vanilla JS Detail View 2018-03-07T21:14:34-07:00
skip ink link detection test https://codepen.io/denmch/pen/YevZPr https://codepen.io/denmch/pen/YevZPr Den McHenry

See the Code - See it Full Page - See Details

This is an old pen that I think I hacked together quickly after thinking about how `text-decoration-skip-ink: auto` could be difficult to see if some cases. I barely remember doing it, but I think I had an idea that extending the underline before and after the underlined selection would make it easier to spot visually.

]]>
skip ink link detection test 2019-06-23T04:19:06-07:00
Simple Responsive Tables https://codepen.io/denmch/pen/qpRrRN https://codepen.io/denmch/pen/qpRrRN Den McHenry

See the Code - See it Full Page - See Details

A stupidly simple technique for tables that switch to a vertical presentation via `display: list-item` in narrow viewports.

]]>
Simple Responsive Tables 2017-12-27T04:56:06-07:00
Lego minifig head for my son https://codepen.io/denmch/pen/pwRKyK https://codepen.io/denmch/pen/pwRKyK Den McHenry

See the Code - See it Full Page - See Details

I was showing my 6 (almost 7) year old how to draw with CSS. He art-directed.

]]>
Lego minifig head for my son 2017-06-19T04:29:43-07:00
Nervous Morty https://codepen.io/denmch/pen/LLxZdQ https://codepen.io/denmch/pen/LLxZdQ Den McHenry

See the Code - See it Full Page - See Details

A nervous Morty Smith hurtles through space on a small space craft. (I just noticed a weird glitch in the animation in Firefox and made a slight modification.)

]]>
Nervous Morty 2019-03-13T06:00:49-07:00
Selectable Screen Reader Text on Images https://codepen.io/denmch/pen/pPmZXK https://codepen.io/denmch/pen/pPmZXK Den McHenry

See the Code - See it Full Page - See Details

Sometimes you want an image to stand in for text and alt text doesn't feel right. It's not a description of an image, but an image that can be read: a logo, for example. You should be able to select the text as you would other text on the page. With this CSS technique, you can do that, and give screen readers text without framing it as alternative text.

]]>
Selectable Screen Reader Text on Images 2019-05-13T21:18:11-07:00
Drawing a Face in Pure HTML https://codepen.io/denmch/pen/bgMNVP https://codepen.io/denmch/pen/bgMNVP Den McHenry

See the Code - See it Full Page - See Details

Some people draw in CSS. I thought, "what if we did something the wrong way -- ANOTHER way?"

]]>
Drawing a Face in Pure HTML 2017-02-02T20:34:32-07:00
Hold Shift to Check Multiple Checkboxes https://codepen.io/denmch/pen/MbxxLz https://codepen.io/denmch/pen/MbxxLz Den McHenry

See the Code - See it Full Page - See Details

I added a function and toggle to select or deselect all. With a little testing, it's clear the main code is insufficient. Deselect and reselect an item within the selected region, and strange things happen. The toggle helps make it less frustrating. The ideal code would probably store the first click and then compare it with the most recent click, adjusting the selected range in either direction.

]]>
Hold Shift to Check Multiple Checkboxes 2016-12-23T23:32:33-07:00