1

I want to display some text on a low-quality image background. So instead of smooth text, I want to show jagged text like.

enter image description here

I tried to scale small text using transform: scale(), blur text using text-shadow, font-smoothing:none but it can not make jagged text.

How can I do this using CSS (or Javascript)?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Linh
  • 57,942
  • 23
  • 262
  • 279
  • Do you need the text to be copyable? – Sebastian Simon Dec 22 '20 at 02:49
  • yes, it better if it's still copyable, but if there is no solution, none copyable may be ok – Linh Dec 22 '20 at 02:55
  • 1
    Non-copyable jagged text is possible by using `fillText` in a Canvas, then in CSS using `image-rendering: optimizeSpeed;` and a `scale` transform. – Sebastian Simon Dec 22 '20 at 02:56
  • Thank you, I think your idea is possible. however, because my current code is using `p` tag for text instead of canvas so maybe I will try to find an easier solution then I will switch to canvas if there is no easy solution – Linh Dec 22 '20 at 03:19
  • There’s also the [CSS `element` function](https://developer.mozilla.org/en-US/docs/Web/CSS/element%28%29) that `image-rendering` and `scale` also apply to. But it also doesn’t offer copyability. You might find some SVG filter that does this. But so far, it seems that you need the path from text to bitmap to scaled up bitmap, and bitmaps cannot be copied as text. – Sebastian Simon Dec 22 '20 at 03:55
  • 2
    related: https://stackoverflow.com/questions/65191293/how-to-get-an-aliased-retro-style-html-text-effect/65191458#65191458 – Kaiido Dec 22 '20 at 04:56

1 Answers1

0

It may not be exactly what you're after, but font-smooth might be close.

font-smooth: never;

It is not standards compliant, so be careful where you use it. On Chrome, I had to prefix it with webkit-

Edit: On Chrome it seems to be -webkit-font-smoothing: none;

peteredhead
  • 2,394
  • 1
  • 15
  • 21
  • I tried it `-webkit-font-smooth: never;`, tested on Chrome and Edge but it don't make jagged text (my current text font is Arial) – Linh Dec 22 '20 at 02:52
  • Ah, sorry. I wonder if it's a Mac specific thing. Here's how it looks if I just disable it for the heading on this page https://imgur.com/a/02KpwoY – peteredhead Dec 22 '20 at 02:58
  • Just added a small clarification for Chrome if you want to give that a go – peteredhead Dec 22 '20 at 02:59
  • Currently, I am using Window, after I add `-webkit-font-smoothing: none;`, the font doesn't change. I read from this https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth, it look like `-webkit-font-smooth: never;` only work in MacOS – Linh Dec 22 '20 at 03:10