I am looking for a way to underline heading that has more than one line, gradient background [EDIT - background image that is not solid color, but gradient], ignore descenders (so border-bottom is not a solution) and that it will look good in Chrome (simple text-decoration: underline is very thick in Chrome).
I have checked all solutions mentioned here: https://css-tricks.com/styling-underlines-web/ but nothing there solving my problem (exept "avoid using an underline altogether" :)).
And as far as I now, Chrom still doesn't support text-decoration-thickness
The requirement to ignore descenders means that one is more-or-less forced to use CSS text decoration because who else knows where there are descenders? The alternative might be to have span around every character with different formatting, not really practical.
It transpires that Chrome will support text-decoration-thickness but only with certain conditions. From https://caniuse.com/?search=text-decoration-thickness:
The text-decoration-thickness property does not work unless either
text-underline-offset is set to something other than auto or
text-decoration-color is set to something other than currentColor. See
Chromium bug 1154537
It is therefore possible to control the underline thickness. It is more problematic trying to get the Chrome and Firefox implementations look exactly the same from the point of view of offset (FF seems to place underline by default further down than Chrome) and the two browsers do not treat descenders exactly the same way. Hopefully setting the thickness and tweaking the offset will result in an acceptable heading.
Here's an example
div {
font-family: Arial, Helvetica, sans-serif;
font-weight; 400;
font-size: 3em;
width: 300px;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: black;
text-underline-offset: 0.1em;
}
<div>To jest kryzys ekologiczny i klimatyczny</div>
I'm experiencing the following issue in both Safari and Chrome.
body {
font-size: 15px;
line-height: 1.2;
}
body, .same-font {
font-family: Helvetica, sans-serif;
}
code {
font-family: Courier New, sans-serif;
}
<ul>
<li>Without any code - 18px height.</li>
<li>With <code>code</code> - 20px height.</li>
<li>With <code class="same-font">code.same-font</code> - 18px height.</li>
</ul>
Run the above snippet and the inspector. You can notice that the code element doesn't have anything modifying its font-size or line-height except body which it's inheriting from.
It's not adhering to that inherit though, because the height of its containing li is 20px, not 18 like the others... I'm not sure where that height is coming from, because the code element itself has a height of 17px (which is also of unknown origin).
When the normal/body is applied to the code element (like on the third list item), it goes back to 18px like normal. To me this means it's not any other properties that the user agent has imposed on the code element affecting the height - solely the font-family.
EDIT: For reference, something in StackOverflow's styles prevent this behaviour. The following list items all have the same height:
One
two
Three
EDIT 2: Apparently not.. if you change their monospace font to Courier New then the same problem would persist.
How can this change in size be prevented? i.e. How can you specify a line height that will be used even if the fonts within that line continue to change?
An example use case would be in a design with vertical rhythm - each line's height and the total height used by an element should be a multiple of 18px (i.e., if using that grid size) - a 20px line throws off the rhythm.
I ended up solving my own problem (to an acceptable extent) by simply tweaking with the font family and size until it worked for me:
body {
font-size: 15px;
line-height: 1.2;
}
body, .same-font {
font-family: Helvetica, sans-serif;
}
code {
font-family: Menlo, Courier New, sans-serif;
font-size: 0.9333em; /* 14/15 */
line-height: 1.28571; /* 18/14 */
}
<ul>
<li>Without any code - 18px height.</li>
<li>With <code>code</code> - 18px height.</li>
<li>With <code class="same-font">code.same-font</code> - 18px height.</li>
</ul>
Why Menlo?
I noticed that StackOverflow used Menlo and that didn't have this problem. When I tried it, it also solved the problem, however the font isn't built in on Windows.
So simply using Menlo solved the problem on Mac and didn't change anything on Windows.
Why the different font-size?
The different size changed nothing (except the font size...) when Menlo is in use - it still adhered to the line height, so Mac is all good.
However this font-size in combination with the Courier New fallback on Windows somehow got it adhering to the line height there too!
If I used 14px instead of 0.9333em it'd still work fine, but if I used 18px for the line-height instead of 1.28571, it wouldn't work. That doesn't bother me as I use relative values in my designs anyway.
So...
The Menlo font in combination with a Courier New fallback with a different font-size worked to solve my problem to a good-enough extent on Mac (Safari and Chrome) and Windows (Chrome).
My situation is lenient - a pixel difference wouldn't break my design, but just my rhythm. In cases where pixel perfection is required, I wouldn't feel safe with this voodoo method of playing with fonts and sizes...
If anybody can still explain where all of these numbers are coming from and what makes the actual difference here, that'd be great.
I ask this because when I try to create a CSS font stack for multi-language content, such as English and Chinese, the final rendering is affected by the first font in the stack (usually Latin ones, since most Chinese font comes with Latin support).
See this Codepen, for example.
div.a p {
overflow: hidden;
}
p {
background-color: red;
border: 1px solid black;
display: inline-block;
}
.chinese-only {
font-family: "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.english-chinese {
font-family: "Avenir Next", "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.chinese-english {
font-family: "Hiragino Sans GB", "Avenir Next", sans-serif;
font-size: 24px;
line-height: 48px;
}
What I am seeing:
Since Chinese glyphs only appear in the Hiragino Sans GB, I expect all Chinese blocks to use the same line height. But they are apparently affected by adding the Avenir Next font at the top of the stack.
Since both Firefox and Chrome on OSX renders my example the same, I wonder if the CSS specification mentions anything about this. CSS 2.1 fonts spec doesn't appear to state what to do with line height when you fallback on missing glyphs.
Updated: Safari does render differently, but unfortunately the difference is due to overflow: hidden, not glyph fallback. My updated example may show this a bit clearer.
On Chrome and Firefox
On Safari
And if you are really into font-related headaches, try this example showing different font stacks, and see how they differ on each browser.
This is pretty much going to come down to the user agents. Any time the CSS specification says, “not defined by this specification”, that’s code for “we’ll let browsers do whatever they think is best and then try to get them all to behave consistently after a few years of doing it differently”.
Furthermore, the latest CSS Inline Layout Module states right at the top of Section 1 (Line Heights and Baseline Alignment):
This section is being rewritten. Refer to section 10.8 of [CSS21] for the normative CSS definition or the 2002 Working Draft if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.)
That’s from last month. So, you know, good luck and Godspeed, basically.
Interestingly, I see a different result in Safari 6.2.2 than you posted:
If there’s a difference between that and the latest Safari, you might be able to track down a bugfix between the two versions that explains why it changed.
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)
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
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>
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>
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
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)
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>
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
I have the following CSS on my
h2 {
font-family: Arial, Verdana, sans-serif;
color: #fff;
text-shadow: 0 6px 0 #E5E5E5
}
The problem is that this looks good only on some font-sizes, in others it looks really bad. If the font is really big the shadow is barely noticeable, if the font is too small the shadow makes the text unreadable. In my webpage the font of this particular element changes sizes dynamically. It can be as small as 10px and as big as 200px.
For some reason setting the shadow position in % do not work, one would hope it would take a % of the font-size attribute.
So I'm asking here if there is any way to make text-shadow works on fonts that changes size using CSS alone. I'm hoping for a solution that doesn't use javascript.
You can use em instead of px in the text-shadow and em relates to the actual set size of the typeface.
Examples on w3.org
Understanding em
see
http://rcljr.com/rcl/tests/TextShadow%20Supreme/index.html
for a text shadow formatter