Dotted text in css? - 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 the user to download a whole font might be overdoing it.
The idea that I had was to overlay the text with a pseudo element with a background pattern of small transparent circles with a white background.
Some thing like this:
<div class="dottedText">Some dotted text</div>
FIDDLE
CSS
.dottedText:after
{
content: '';
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, transparent 50%),
radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
background-size:4px 4px;
}
I think I might be close, but the above solution won't work properly if you change the font-size.
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.
Ideally something like this (taken from here):
(I'm not sure, but possibly the radial gradient needs to be tweaked to do this)
Edit:
1) I don't mind which font is used - so long as it's a built-in font. (Even a monospace font is ok)
2) The solution need not work in every browser. (So a webkit only solution will be fine)

Answer 1

To be honest, this answer may sound funny or weird, but am not sure whether its possible with CSS ONLY (As you haven't tagged any other languages), even if its, it would be an overkill to do so, and hence it makes sense in using a dotted font instead of writing too many lines of CSS.
Even if you rule out IE, you will have only single .woff file which I think is very much normal, as it will increase your http request by one, and surely it won't be over bloated much as you think.
List of cool dotted fonts can be found over here. Convert the ttf,using Font Squirrel Service.
Make sure you have permission to do so.
Demo Fonts used : Dotline
(Files are hosted on my own server, enabled CORS because the demo failed on Firefox)
If you are not looking to support crappy IE, only file you will need is woff and that's merely 23kb

Answer 2

Even if it relies on SVG inline styles , here's what I came with:
<svg xmlns="http://www.w3.org/2000/svg"
width="1450px" height="300px" viewBox="0 0 800 300">
<text x="2" y="155"
font-family="'Lucida Grande', sans-serif"
font-size="222"
stroke="red"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="5,5"
fill="none">
Some dotted text
</text>
although for some reasons the stroke-linecap isn't working..
If you want to play with a working fiddle check this .
EDIT-1 (moving svg-styles to CSS)
svg{
width:1450px;
height:300;
viewBox:0 0 1500 300;
}
text{
font-family:'Lucida Grande', sans-serif;
font-size:152px;
stroke:#000ece;
stroke-width:3px;
stroke-linecap:round;
stroke-dasharray:1,1;
fill:none;
}
<div class="dott">
<svg xmlns="http://www.w3.org/2000/svg">
<text x="2" y="155" >
Some dotted text
</text></div>

Answer 3

With a few minor adjustments we can get pretty close:
1) Change font-family to courier new
2) Add a text-shadow with a horizontal and vertical offset on the div
3) Changed units to ems - (like #BDawg suggested)
FIDDLE
div {
font-size: 40px;
font-family: courier new;
position: relative;
text-shadow: -.03em -.03em 0 black;
}
.dottedText:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, transparent 50%), radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
background-size: .1em .1em;
}
div + div {
font-size: 60px;
}
div + div + div {
font-size: 80px;
}
div + div + div + div {
font-size: 100px;
}
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>

Answer 4

Couldn't you just use the webfont Kit for this font?
http://www.fontsquirrel.com/fonts/BPdots?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y
You would simply link your CSS like so for the font-type you would like:
#font-face {
font-family: 'bpdotsbold';
src: url('BPdotsBold-webfont.eot');
src: url('BPdotsBold-webfont.eot?#iefix') format('embedded-opentype'),
url('BPdotsBold-webfont.woff') format('woff'),
url('BPdotsBold-webfont.ttf') format('truetype'),
url('BPdotsBold-webfont.svg#bpdotsbold') format('svg');
font-weight: normal;
font-style: normal;
}
Then just link whatever element you would to use this font:
h1{font-family: 'bpdotsbold', arial, helvetica;font-size:80px}
Just be sure to upload the webfonts' path to your server and update each url('LINKTOFONT') in your CSS.
There were several other Dot like fonts that font-squirrel has to offer:
http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y

Answer 5

Change the background-size to use ems.
For example:
background-size: 0.1em 0.1em;
NOTE: The above change sizes your first example with the font, but does not produce your second example. I would use inline SVG rather than a pure CSS approach if that exact effect is an absolute must. (Or the more obvious approach: change to a dotted font)

Answer 6

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:
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.
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
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,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2' cy='2' r='2' fill='#f00' stroke='#fff' stroke-width='1'/></svg>");
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; }
<div class="dotted">Some dotted text</div>
<div class="dotted">Dotted text</div>
<div class="dotted">More dotted text</div>

Answer 7

This font looks similar to what you are expecting
http://www.fontsquirrel.com/fonts/Synthetique?q[term]=dot&q[search_check]=Y
and it has 4 extensions[TTF,EOT,WOFF,SVG) fonts which is supported in all the browsers
hope this will help you