Pens from John Skowronski https://codepen.io/john_skowronski/ en nospam@codepen.io Copyright 2024 2016-12-30T17:28:58-07:00 VoiceOver says “bullet” with non-standard bullet https://codepen.io/john_skowronski/pen/PbMXPw https://codepen.io/john_skowronski/pen/PbMXPw John Skowronski

See the Code - See it Full Page - See Details

NOTE: For this Pen to make sense, you need to view it with a screen reader. It has only been tested with VoiceOver on iOS. If anyone else has access to other screen readers I would appreciate knowing if it works with them. If you use one of the standard <ul> bullet styles, the screen reader will say “bullet”, at each <li>. However, all the standard bullet styles are butt-ugly. If we use the character we really want for our design (&middot; or "\00b7"), it looks fine on the screen, but the screen reader speaks it as “mid dot”, not “bullet” (because we have removed the actual semantic bullet with list-style:none on the <ul>. However, there is a Unicode character that just happens to be named “bullet”. So we use this character (&bullet; or "\2022") and the screen reader is fooled into saying “bullet”, even though our ::before character is just impersonating, if you will, an actual semantic bullet. Unfortunately, this bullet character is still too clunky for our design, and needs to be restyled and repositioned. Unfortunately, this is not a general solution to the problem, because it relies on the coincidental existence of the “bullet” character. Supposedly, some day we will just be able to do this with any character instead of using the ::before pseudo-element, like so: ul { list-style-type: "\00b7"; } or maybe: li::marker { content: "\00b7"; }

]]>
VoiceOver says “bullet” with non-standard bullet 2016-12-30T17:22:49-07:00
Checkbox non-hack https://codepen.io/john_skowronski/pen/ZBmPBd https://codepen.io/john_skowronski/pen/ZBmPBd John Skowronski

See the Code - See it Full Page - See Details

Most methods for styling the checkbox element rely on some variation of Ryan Seddon's “checkbox hack.” Unfortunately, every version I have ever seen has one or more problems. Because the checkbox hack involves hiding the actual checkbox and covering it with something else, it breaks the behavior of the focus outline while navigating the form using the tab key. This version uses the appearance property (admittedly controversial), but retains default behavior of the checkbox in all browsers. Unlike other css-stylable checkboxes, notice: —You can tab/shift-tab between the checkboxes —You get a focus outline, so you know where you are —The style of the focus outline is the style that is native to the browser you are using (i.e. blurred blue for Chrome and Safari, dotted black for Firefox —You can check/uncheck using the spacebar —You can check/uncheck by using the mouse to click on the box itself, or on the box’s label

]]>
Checkbox non-hack 2016-12-29T04:47:49-07:00
Punctuation of ship name prefixes https://codepen.io/john_skowronski/pen/bBvvXv https://codepen.io/john_skowronski/pen/bBvvXv John Skowronski

See the Code - See it Full Page - See Details

The prefix part of a ship’s name may be punctuated either without periods (i.e. USS), or with periods (i.e. U.S.S), depending on the style guide in use. If your style guide were to change, you would have to search for every occurrence in the HTML. This combination of HTML markup, CSS, and JavaScript allows you to change the punctuation style by simply changing which of two functions is used in the JavaScript. NOTE: The <i> element is NOT being used as a non-semantic italic style, but according to the W3C’s new semantic definition “represents a span of text that is offset from the normal prose.” Further, the class attribute in the <i> element is being used to identify why the element is being used “so that if the style of a particular use is to be changed at a later date, the author doesn’t have to go through the entire document (or series of related documents) annotating each use.”

]]>
Punctuation of ship name prefixes 2016-12-05T23:02:24-07:00
CSS 3-D Beveled Picture Frame https://codepen.io/john_skowronski/pen/Egqqjy https://codepen.io/john_skowronski/pen/Egqqjy John Skowronski

See the Code - See it Full Page - See Details

Initially I used "inset" and "outset" for the beveled borders, but different browsers (most notably Firefox) interpreted the color shift differently, so I had to specify the exact color for every side of every beveled surface.

]]>
CSS 3-D Beveled Picture Frame 2016-11-02T21:17:01-07:00
Fake two-em dashes https://codepen.io/john_skowronski/pen/BLMJRZ https://codepen.io/john_skowronski/pen/BLMJRZ John Skowronski

See the Code - See it Full Page - See Details

For this header, I wanted a long dash on either side of the words "of the" as a little typographical flourish. In theory, two-em (U+2E3A) and three-em (U+2E3B) dashes exist in the Unicode character set, but no actual font that I know of implements them—you end up with a little rectangle instead. You could simply put two regular em-dash characters in a row, and in some fonts this would create a continuous two-em dash, but in many fonts it results in an unsightly gap between the dashes. So I put a series of em-SPACEs (U+2003 or &emsp;) in the HTML and styled them with a line-through. This creates a continuous dash effect. The line-through is not exactly the same as a dash, as the thickness of the line-through is thinner than that of an em-dash. But I actually prefer the thinner line, and found the effect preferable to the possibility of a gap in the dash.

]]>
Fake two-em dashes 2016-10-25T18:09:49-07:00
Alegreya Sans font switching from curly to straight apostrophe https://codepen.io/john_skowronski/pen/VKzxjy https://codepen.io/john_skowronski/pen/VKzxjy John Skowronski

See the Code - See it Full Page - See Details

All my iOS browsers (Safari, Chrome, Firefox, and Opera) were changing curly apostrophes followed by an "s" to typographically incorrect straight apostrophes. They did NOT make this change if the apostrophe was not followed by an "s". None of my OSX desktop browsers exhibited the behavior (UPDATE: I was using OSX v10.7.5. Newer versions of OSX do exhibit the same incorrect behavior as iOS). Apparently, it's not a problem with any browser or OS, but the Alegreya Sans font itself: https://ask.libreoffice.org/en/question/27606/why-does-libreoffice-replace-alegreya-sans-curly-quote-with-its-regular-quote/ My fix is to 'glue' the apostrophe between the surrounding characters using the Word Joiner character (&#8288; ), but I am dismayed at the kludginess of this solution.

]]>
Alegreya Sans font switching from curly to straight apostrophe 2016-12-30T17:28:58-07:00