i'm struggling with the fact that webkit browsers like safari won't support letter-spacing smaller than 1 pixel. is there any solution yet?
i was thinking about converting my font and adding letterspacing directly to that new font:
would this work and any ideas if there's a converter which supports that?
thanks
You could always use em's.
letter-spacing: 0.5em;
I tested the following on Safari and Chrome (Win 7):
<style>
.foo { letter-spacing: 0.7px; }
</style>
Hello world! This is sample text.
<div class=foo>Hello world! This is sample text.</div>
Initially the difference is barely noticeable, but if you zoom by Ctrl + you will see that the second text gets visibly wider, due to slighly larger letter spacing.
The quality of implementation might be subject to debate, but the support is there.
On the other hand, if you don’t like the natural appearance of a font, with spacing as caused designer’s decisions, use a different font. Mechanically increasing all letter spacing in text expresses distrust in font design and is a coarse tool. Letter spacing might be needed in special occasions for short texts, though—but less than a pixel is hardly useful then.
Sure they do. Try 0, -1px, etc.
Demo: http://jsbin.com/ovepan/edit#html,live
Output:
HTML:
<p id="one">Letter spacing 1px</p>
<p id="zero">Letter spacing 0px</p>
<p id="negative-one">Letter spacing -1px</p>
CSS:
#one {letter-spacing: 1px }
#zero {letter-spacing: 0px }
#negative-one {letter-spacing: -1px }
Related
This is a very strange bug I have encountered in Safari 8.0.6, when Safari renders the word/letter combination 'fit' it ignores the CSS 'letter-spacing' property. I have observed this with a custom webfont, but also with Arial (not reproducible with 'Times').
http://jsfiddle.net/aaronpruzaniec/hqt7bs0y/2/
http://imgur.com/1uM6LRw
<span style="letter-spacing:15px;font-family:times;">Every word will have 15px letter spacing exept for the word: fit, for no apparent reason. xxfitxx fitness</span>
<br>
<br>
<span style="letter-spacing:15px;font-family:arial;">Every word will have 15px letter spacing exept for the word: fit, for no apparent reason. xxfitxx fitness</span>
Disclaimer: I don't have that particular version of Safari here to test on, so this answer may not solve the issue properly, in which case I apologise.
In addition, the issue appears also in some versions of Chrome, and the solutions seem to work differently in different versions. So test carefully!
The problem is that in some fonts, certain letter combinations are replaced with ligature glyphs. This is normally done to improve the rendering quality, but in this case, it backfires.
Solution: switch off ligature substitution.
This can be done with either the modern font-variant-ligatures property or the older font-feature-settings one. Or you can try both...
p {letter-spacing:1em; font-family:'DejaVu Sans', 'Times New Roman';}
.ffs {-webkit-font-feature-settings:"liga" 0;
font-feature-settings:"liga" 0;}
.fvl {-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;}
<p>fit fisticuffs fluffie offline</p>
<p class="ffs">fit fisticuffs fluffie offline</p>
<p class="fvl">fit fisticuffs fluffie offline</p>
<p class="ffs fvl">fit fisticuffs fluffie offline</p>
Hope this helps! As I said, I can't test this with Safari 8; the only Safari I have (5) doesn't display the problem, but an older Chrome version does. And these styles have an effect.
Right now I've got a paragraph and I'd like to capitalize the entire first line. I've set the first paragraph to an ID "firstp" and tried:
#firstp::first-line {
text-transform: uppercase;
}
I've tried it with text-transform: capitalize but that doesn't work either. It's strange because I've managed to change the first letter (changed font size) using #firstp:first-letter.
text-transform on :first-line is really buggy right now, see the reference here http://reference.sitepoint.com/css/text-transform
You can use this jquery plugin called linify https://github.com/octopi/Linify to select the first line and then apply the property of text-transform: uppercase
Regards,
I think Chrome has a problem with ":first-line". Try removing that and using james31rock's syntax on this page, except in his example the CSS should be "#firstp{..." to reflect the ID in his HTML rather than ".makeupper".
You might want to use:
font-variant: small-caps;
It looks better in my opinion and is supported in all major browsers.
More info
http://en.wikipedia.org/wiki/Small_caps
In order to accomplish this you must use the following Pseudo-element within the correct syntax. Example:
HTML PORTION:
<selection id="Welcome">
<p>Some text</p>
</section>
CSS SHEET:
#Welcome p:first-of-type:first-line {
text-transform: uppercase;
}
I hope this helps. Sorry for the late entry. I guess, better late than never!
There might be another way ...
What if you have two spans with text inside paragraph, one of the spans would have position set to upper left corner of the paragraph, so the two spans would overlap. Now set height of the upper span to about line-height of your text and overflow to hidden so only first line of the span would be visible. Set text-transform to uppercase on the upper span and vou la you have first line in uppercase.
Downside of this solution is, uppercase text is wider so there might be missing words on next line. You can fix this by using fixed-width font or try to set letter-spacing on both spans so width of uppercase and lowercase texts would be same.
Here is jsFiddle, though it's not ideal sometimes when you change the window size, it might be sufficient.
It doesnt seem to work either way, in Chrome. In I.e. text-transform works. I do not have firefox to test with.
http://jsfiddle.net/vJSeq/4/ - using text-decoration
http://jsfiddle.net/vJSeq/3/ - using text-transform
You can see that the selector is right because it is highlighted.
My suggestion would be to use something to seperate the text you want highlighted, by creating a span tag inside of the paragraph and assign it a class
<p id="firstp">to stop the degradation of the planet's natural environment and to build a future in <span class="makeupper">which humans live in harmony with nature, by; conserving</span> the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
and the css
.makeupper
{
text-transform: uppercase;
}
http://jsfiddle.net/vJSeq/5/
It's better to see a bug for yourself in Firefox: http://jsfiddle.net/kizu/btdVd/
The picture, showing the bug:
And the bug filled in 2007 on bugzilla.
The bug appears when you're adding ::first-letter pseudo-element with display: inline-block, and then change the font-size of this first-letter.
More letters in a word after the first: more extra space added (or subtracted — if the font-size is lesser than block's).
Adding float: left to the first-letter inverts the bug: with bigger font-size the width of inline-block shrinks.
So, the question: is there any CSS-only workaround for this bug? It's somewhat killing me.
I've found that triggering reflow on the whole page (or any block with a problem) fixes the problem, so I've found a way to trigger it on every such block with one-time CSS animation: http://jsfiddle.net/kizu/btdVd/23/
Still, while this fix have no downsides in rendering, it have some other ones:
it would work only for Fx5+ (that supports animations);
it still flashes the original bug for a few ms, so it's maybe somewhat blinky.
So, it's not an ideal solution, but would somewhat help when Fx4- would be outdated. Of course, you can trigger such fix onload with JS, but it's not that nice.
I don't think there's a good solution.
I have come up with a flaky solution for you though:
.test:first-letter {
font-size: 2em;
letter-spacing: -0.225em;
}
Add the letter-spacing style to the :first-letter selector in your Fiddle, and you'll find the blocks go back to roughly the right size.
Explanation:
Basically, the bug is being caused by the whole block taking its size from the font specified in the first-letter.
What I'm doing here with the letter-spacing is trying to adjust the size of this font, without affecting it's physical appearance. Adjusting the letter spacing in this way in normal text would result in the letters overlapping each other by .225 of a character width on either side.
I was initially hoping that a value of -0.25 would be sufficient -- ie a quarter of a character on each side would reduce the width of each character by half, which would be what we want because the first letter is font-size:2em, so it's twice as big.
However, the calculation isn't quite as clean as that, because the first and last characters in the string would only be overlapped on one side each, and because the first letter does in fact want to be double width, even if the rest of the characters don't.
All of this means that the exact letter-spacing value required to counter-act the bug will vary depending on how long the text, as well as the font sizes of the original text and the first letter. This is why I had to experiment a bit with the value of the letter spacing to get it working, and also explains why I couldn't get quite a perfect fit on all the text rows in your Fiddle. I would have needed a slightly different value for each block.
The value of -0.225 seems to be about the closest I can get to it being right for all your examples, but in practice you'll need to adjust it to suit your site.
Don't forget also that this is a Firefox bug, and therefore you'll need to write it in as a browser-specific hack of some sort. And be careful to keep an eye on the Firefox bug report you linked; when it does get fixed, you'll need to work out a way to keep your hack in place for users of old versions, but remove it for users with the fix.
[EDIT]
The only other working solution I've come up with is simply not to use the features which trigger the bug. ie drop the :first-letter selector, and use a separate <span> for the first letter of your text if you want to style it differently.
This is the obvious answer really, and would of course solve the problem (and would also mean that your styled first letter works in older browsers), but it would not be ideal from a semantic perspective, and more importantly doesn't actually answer the question, which is why I didn't offer it as a solution in my original answer.
I have been trying to find alternative work around for the bug as well, but the options are limited, and nothing I've tried has given as good results as my initial suggestion.
I tried a hack of making the :first-letter invisible, and using :before to display the big leading capital letter. However, this didn't work for me. I didn't linger on it too long so you may be able to get it working, but there is a problem with it in that you'd have to define the leading letter in your CSS, which wouldn't be ideal.
Another possible solution is to use the CSS font-stretch: condensed; property on the :first-letter. This would reduce the width of the first letter back to 1em, and thus resolve the width issue of the rest of the text. The down sides of this, however, are that firstly it would make the leading letter look squashed, which is probably not what you want, and secondly this style only works for fonts which support the condensed property. It turns out that this isn't well supported by the standard fonts, so may not be workable for you.
In the end, the original letter-spacing solution is still the only way I've found to really work around the bug.
This bug still exists, but some of the fixes don't work anymore. Even after triggering a reflow with an animation, the inline-block returned to the same size for me. I couldn't use the letter-spacing trick because I am already using it on the first letter, that is what is causing the problem for me. I solved the problem by adding this to the CSS for the affected selector:
-moz-padding-end: *number of pixels to compensate*;
At the moment, moz-padding-end seems to be specific to Firefox, and it can add or remove width to the end of the inline-block. Because this is a Firefox specific bug, that did the trick for me.
I know this thread is quite old now, but apparently this bug has not been fixed yet.
Using animation does work but there is a noticeable FOUT (Flash Of Unstyled Text). I was able to work around the problem by wrapping the first-letter in a span. This does work around both the sizing issue and the FOUT, it does add extra elements to the markup, so it depends on the needs of your site/application if this is the best fit.
.test {
background: rgba(0,0,0,0.15); /* For visualisation */
display: inline-block;
}
.test:first-letter {
font-size: 2em;
}
.test2:first-letter {
float: left;
}
.test3:first-letter {
font-size: .5em;
}
<h1>Inline-block with bigger first-letter</h1>
<span class="test">Broken</span>
<br><br>
<span class="test"><span>F</span>ixed</span>
<h1>+ floating to first-letter</h1>
<span class="test test2">Broken</span>
<br><br>
<span class="test test2"><span>F</span>ixed</span>
<h1>small size for first-letter</h1>
<span class="test test3">Broken</span>
<br><br>
<span class="test test3"><span>F</span>ixed</span>
<h1>small size, floating first-letter</h1>
<span class="test test2 test3">Broken</span>
<br><br>
<span class="test test2 test3"><span>F</span>ixed</span>
As of 2023, this is still happening in Firefox.
This is my solution using SASS, but you can see how to make it bare CSS:
txt-brand {
display:inline-block;
}
///Firefox only ///
#-moz-document url-prefix() {
margin-right: .1em;
white-space: nowrap;
&::after {
content: '\00a0';
}
}
}
.txt-brand::first-letter {
letter-spacing: -.11em;
}
Image below displays the result for:
div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }
One using Wiesbaden (which is font-face) and the other without.font-face font seem to ignore the line-height property.
Is it font-face issue or the font?
The property line-height only specifies the vertical distance between the start of one line and the start of the next. If you typed out something that took up two lines, the start of the 2nd line should be in the same vertical position using either font.
It seems like that's just how your font looks at 'font-size: 50px'. If you wanted to, you could increase the font-size while keeping line-height: 50px to correct it.
In short, it's not an issue with either. They're behaving exactly how they should be. See your blue background? That's your line-height. Line-height doesn't affect the font itself, but rather the spacing of the lines of the text.
Some fonts are different sizes even when set to the same font-size. It's the way the glyphs are rendered. If you want your text larger, increase the font size. If you want fallbacks to be the same size, you can use similarly-sized fonts (look up "font stack generators" for help on this), or check out the CSS3 font-size-adjust property (do note that it is CSS3, so you'll want to double-check support of it).
I had a similar issue, but I used a Cufon script instead of fontface to avoid browsers issues. To solve my line-height issue I changed the doctype from transitional to strict. Try that.
The following fiddle illustrates the differences between 4 fonts (3 being very common fonts found on Macs, PCs, etc). One is a Google-font. Regardless, 4 fonts - four different results. If a design is going to rely heavily on a 'non-standard' font, be sure the fallbacks don't blow the whole thing up.
Pay particular attention to the differences in:
the top spacing between the capital Q and its parent's border
the various heights of the Xx (especially, the lower-case vs capital)
descender of the lower-case G (some actually come out of their
parent)
_http://jsfiddle.net/suK2U/
I tried this and it works perfectly!! just play with percentage until you find the needed result.
Apply this on your #font-face:
ascent-override: 90%;
Hope it helps!
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/ascent-override
I would also like to reset the font-size of <small> tag too normal HTML elements.
Like I want the content in small tag to be 13px of what other tags are.
How do I do this ?
I think a better way is to do
small {
font-size:inherit;
}
This way, the small tag will be the same size as whatever element it's contained in, so if for some reason you have:
<h1>This is some <small>small</small> text</h1>
The word "small" would be the same size as its surrounding words.
The one caveat with this is that I'm not sure if it will work in IE. I suspect that it will, but you'd have to try it to be sure.
You might want to look into using a CSS reset that takes care of this and similar issues for all tags.
First, it's hard to tell what you're asking. Here's how to set the font-size of those tags to 13px.
small {
font-size: 13px; /* you can use !important, but I wouldn't recommend it */
}
Second, 13px is not a very small size, unless the rest of your text is enormous. That fact, together with your phrasing ("I want the content in small tag to be 13px of what other tags are") leads me to suspect that what you really mean is you want the <small> text to be a percentage of the rest of the text. You can do this as follows:
small {
font-size: 13%;
}
However, this seems rather small. If you really want a percentage, I'd suggest something between 60% and 80%.
If you want to make it 13px exactly, Keltex's answer will do it for you.
If you want to reduce the size by 13 pixels from the base font-size of its parent, you have the following options as there is no "make it exactly 13 pixels less" operator available:
If you know the base font-size, hardcode a value that is your 13 pixels less in your selector.
Rely on percentages or ems to size it down appropriately. For instance, instead of "13 pixels less" think of it as being a given percentage of the base font-size. i.e.
p{ font-size: 24px; }
small{ font-size: 45% /* Will make it approximately 13 pixels smaller */ }
Your question is hard to understand. Do you want to make text in small tags the same size as the rest of the text? I'll assume that.
small {
font-size: 100%;
}
This will make the small tag have the same font-size as the rest of the text.
Why you would want such a thing is beyond my comprehension, but you have your answer.
[edit] this has the same effect as #notJim's answer - if the parent's font-size changes, this one adapts accordingly and adopts that new size.
Add this to your CSS:
small
{
font-size: 13px !important;
}