Tag Archives: text

Animating Text Underlines

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results.

This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy 🤩

See the Pen
Underlines (Chrome solution with Houdini) by Michelle Barker (@michellebarker)
on CodePen.

Animating Text Underlines →

Using CSS to Control Text Selection

Will Boyd digs into the user-select CSS property:

CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in!

His posts includes a very nice hack to make user-select: all; work only at first click.

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

🐛 As noted in the comments by Kel: this animation-hack doesn’t work in Safari.

I’ve extended his example to re-enable user-select: all; whenever the snippet is blurred, so that upon a next selection it will restart with selecting all again. Feels more natural.

See the Pen Select All… Then Select Some by Bramus (@bramus) on CodePen.

🤔 This looks like something that should be added to the CSS Spec. It would require a new value for user-select, as user-select: all; explicitly says that all must be selected:

If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.

Using CSS to Control Text Selection →

Chrome vs. WordPress: All Text Showing as Glyphs / Symbols 🤯

Ever since mid december I’ve had a few reports from people that they were seeing my blog – the thing you’re reading now – rendered in unreadable text. Instead of seeing a nice serif font, they got presented with some wingdings-like symbols for all the text when visiting through Chrome on macOS.

Very strange, as I myself am also using Chrome for my main browsing and am not seeing it. So I kind of ignored the first report, as I thought it was a standalone case: “The user visiting might have overwritten their local font stack, and therefore things went wrong” I thought to myself. After the second report I started to get suspicious though …

~

With a few Google Search Coupons in hand, I found that I wasn’t the only one with this problem, and that it’s related to the use of Hoefler Text. “Hoefler Text” is the font used for all regular text here on bram.us, as it is on many other WordPress sites as I’m basically running the default WordPress Twenty Nineteen theme with a few CSS tweaks sprinkled on top. For some weird reason “Hoefler Text” gets replaced with its “Hoefler Text Ornaments” counterpart when one has that font installed.

~

With the holidays I kinda forgot the whole thing, but after a third report today I dug deeper and found the root cause: it’s not a bug in a local font stack nor in WordPress itself, but it’s a bug in Chrome

The issue appeared between these two Chrome releases:

  • 78.0.3904.108 (not broken)
  • 79.0.3945.88 (broken)

And seems fixed in Canary:

  • 81.0.4001.0 (not broken)

It also seems to happen only on macOS 10.15.x

Brave browser on the same version seems affected too. No other browser is affected.

~

As this is a very specific browser bug, and WordPress themselves are awaiting a Chrome update. In the meantime I’ve updated the CSS here to no longer use Hoefler Text, falling back to Garamond.

🧐 On a side note: the font-stack is defined about 10 times in the default WordPress Twenty Nineteen theme, plastered all over the CSS file. Weird choice imho. Anyways: know that you’ll have to do as many adjustments to get it fixed.

🙏 Thanks go out to all who reported the issue (@wolfr_2, @tommyquissens, and @edwinm)

Text Effect Generator

Nice tool to generate custom text effects such as underline, strikethrough, italic, small caps, circles, upside down, etc.

The tool does not use custom fonts, but translates your entered text to other UTF-8 code points which have the effect built in — 🄻🄸🄺🄴 🅃🄷🄸🅂, 🄵🄾🅁 🄴🅇🄰🄼🄿🄻🄴

🚨 Before you go wild with it though, don’t forget that generated text like that is inaccessible. Screen readers for example won’t pronounce ⓐ as the letter “a”, but instead will read out “Circled Latin Small Letter A”.

Font Generator →

Truncating Multi-line Text with CSS

To truncate multiline text in CSS, Safari introduced -webkit-line-clamp a long time ago (first mentions I found date back to 2010).

.line-clamp-3 {
  /* Required declarations: */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* Limit the text block to three lines */
  -webkit-line-clamp: 3;
}

By now the property has been standardised as line-clamp. Firefox announced that it is also about to support it in Firefox 68, which due July 2019. In said version Firefox will support -webkit-line-clamp (-webkit-prefixed!), this as per CSS Overflow Module 3 Spec:

For compatibility with legacy content, UAs that support line-clamp must also support the -webkit-line-clamp property.

Neat! But … while testing – using Firefox Developer Edition 68.0b4 – I noticed that Firefox:

  1. Supports only the prefixed -webkit-line-clamp, and not line-clamp
  2. Also requires the extra display: -webkit-box; and -webkit-box-orient: vertical; declarations

This feels weird to me … I’d (1) also support the non-prefixed version and (2) would’ve dropped those extra requirements if I were Firefox. I guess this is a direct side-effect of us only having two rendering engines (e.g. WebKit and Gecko) anymore?

The CSS feature for truncating multi-line text has been implemented in Firefox →

💁‍♂️ What about older browsers that don’t support it? For those I used to limit the height of the box to a multiple of the line-height:

Multiline `text-overlow: ellipsis`

CSS Transparent and Outlined Text

For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly.

Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen:

See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) on CodePen.

The code above uses @supports to apply text-stroke when supported. If not supported it falls back to the (ugly) faux outline technique.

This is how it looks like in browsers that support text-stroke:

css-outlined-text

And this is how it looks like in browsers that don’t support text-stroke (note the ugly outline around the letter A):

css-outlined-text-fallback

Note: Unfortunately this technique does not work on emoji (cfr. Emoji Silhouettes and Emoji Outlines with CSS)

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)