Dotted text in css?

Question

Is it possible to make dotted text with css?

I know that the obvious thing would be to use a dotted font, but If I only need to use dotted text sparingly, then having th

Answer 1

Short Answer:

No. Not possible.

tl;dr;

I'm looking for a solution where

1) The dots will increase in size as font-size increase, and

2) preferably each letter should only be shown with only one single line of dots - not the double line as it is now.

Edit: When I say one single line of dots - I mean that each stroke should be made up of only one dot. For example: In the above picture notice that the 'm' char has 2 columns of dots....well I would prefer only one.

This cannot be done without a custom font.

There are two inherent problems with other workarounds:

1. There is no text-fill-pattern in CSS. Not even in SVG. There is text-fill-color in both CSS and SVG. However, it is limited to browser-specific implementation and non-standard vendor-prefixes in CSS. Then there is stroke style. It has the same limitations in CSS (as that of fill) of being non-standard, and also is limited only to width and color. Although, SVG adds stroke-linecap and stroke-dasharray, but that is all there is.

2. text-outline could have helped. If it worked like a border, then we could have done a text-outline: Npx dotted red;. And increase the Npx to virtually eliminate the text-fill. But, there are other problems with that: (1) The specs says, it will work as shadow i.e. with no style. As in text-outline: 2px 2px #f00;. There is no solid / dotted / dashed style option. (2) W3C says that the feature is at risk and may be cut from the spec. (3) As of now, it is still not implemented by any browser as yet. Ref: http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline

3. The only way left out, is to use a background pattern and then make it clip to the text. This is very much what you have already tried in your question.

The problem with the last approach (background) is that the fonts are not same. Not even similar. The glyphs are different. The ascenders and descenders are different. Even strokes on the same character are different.

This can be understood by this illustration:

If you notice the characters in the above sample (Times New Roman font), while the vertical lines have nearly same width, the horizontal lines (the horizontal bar in "e") are narrower. Further, the serifs are also of differing widths and taper towards the end. When a background with a pattern is applied (any mechanism, image or SVG or radials), it will not line-up neatly with the font lines. Because of whitespaces and proportional fonts have varying distances.

Notice the two ts in the above illustration marked in red. Even though the glyphs are same, but depending on the distance from the origin, the background pattern cannot line-up neatly. Thus while the second t has the dots lined up, the first t does not. The pattern visible is shifted partly and hence white space is prominent. The same pattern-shift occurs randomly across the characters.

Notice the taper of the serifs and that of e, as marked in red circle in the above illustration. In the middle, the font is fatter and accommodates more dots from the pattern (some full, some partial). At the serifs and tapers, it gets narrower and the pattern cannot fit. With curves, the dots in the pattern cannot bend, it is after all a grid pattern.

We cannot reduce or increase the individual dots in the pattern to fit with the fonts. And we cannot shift background to line-up across all characters. When you use mono-space fonts, then the proportional distance problem is mitigated to some extent, but the curves still remain and the pattern cannot be lined-up with that.

So, the background technique for this is inherently flawed. The only solution is to use a custom font.

However, if approximations are good enough for you, then your own technique of radial background works well. At least apart from Firefox, your own technique works across other browsers.

I will also attempt to provide one more similar solution. Combining SVG pattern with the background-image and keeping the background-size in percent may work to some extent on monospace fonts at larger sizes.

Disclaimer: This snippet will work only with webkit based browsers (Chrome / Safari), because other browsers don't seem to support SVG as background-image and also -webkit-background-clip: text; is, well webkit dependent.

Snippet:

.dotted {
    padding: 0px;
    background-image: url("data:image/svg+xml;utf8,");
    font-family: sans-serif;
    font-weight: 300;
    font-size: 32px; background-size: 0.9%;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
div:nth-of-type(2) { font-size: 64px;  }
div:nth-of-type(3) { font-size: 80px;  }

Some dotted text
Dotted text
More dotted text