Is it possible with CSS to adjust kerning in CSS? I'd like to be able to kern a block of text such that it will actually look like a block of text (both left and right edges are aligned).
EDIT: Using http://letteringjs.com/ in conjunction with http://www.kernjs.com/ makes for pretty good kerning. As for the original problem, http://fittextjs.com/ solves this nicely.
As user Typeoneerror answered, letter-spacing does not influence kerning.
See the kerning concept at Wikipedia.
Kerning is not controlled by letter-spacing, and there are no font-kerning for CSS1 or CSS2. The new specification, CSS3, has not been approved as a standard (W3C Recommendation), but there are a property proposed for font-kerning, see 2012 draft,
https://www.w3.org/TR/css-fonts-3/#font-kerning-prop
Only specific fonts, like OpenFonts, have this property.
CSS not "controls kerning", but if using non-zero letter-spacing the "human kerning perception" can be lost. Example: enhance kerning with letter-spacing:-0.1em and lost with letter-spacing:0.5em.
With CSS1 letter-spacing property you can lost or enhance kerning perception, and into a "letter-spaced text" you can simulate kerning:
<div style="font-size:20pt;background-color:#bcd">
VAST <small>(normal)</small>
<br/>
<span style="letter-spacing:-0.1em">VAST</span>
<small>(enhance perception)</small>
<br/>
<span style="letter-spacing:0.5em">VAST</span>
<small>(lost perception)</small>
<br/>
<!-- SIMULATE KERNING AT SPACED TEXT -->
<div style="letter-spacing:6pt">
SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT
</div>
</div>
See the above example here.
EDIT 2014: I not changed the original text above today, I am opening the answer for your changes (Wiki mode), for proofreading and updates. At the moment this is the most voted answer (21 vs 10) and HTML5 will be a recommendation... Please, help to improve this text (and/or the Wikipedia's linked text!).
Update: CSS3 defines a font-kerning property that can be used to enable or disable kerning for specific elements.
Older answer:
Some control on kerning can be achieved in CSS using the letter-spacing attribute.
However, if all you need is to get "both left and right edges aligned", you might want to try using text-align: justify.
Typographic alignment both left and right is called justification. Kerning is more about the adjustment of spaces between letters, and doesn't have much to do with alignment (because justifying text is more adjustment of spaces between words than characters). Anyway, you want to set the text-align property to justify:
<p style="text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum tincidunt ante mollis ornare. Nulla id
nulla justo. Mauris quis sapien ac orci consequat accumsan. Quisque iaculis ipsum ac nulla venenatis sagittis. Aliquam
hendrerit mi a turpis malesuada nec dictum est vehicula. Curabitur quis dolor eu metus malesuada dictum adipiscing et
risus. Aliquam erat volutpat. Aenean pharetra aliquam magna, fringilla tempus erat iaculis eu. Suspendisse potenti.
Sed fringilla lobortis viverra.
</p>
Kerning, letter-spacing (aka tracking) and justify blocks are three different typography properties.
The newest link I found about kerning is from TypeKit, with directions on how to enable the embedded kerning data with their webfonts. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916
Manual kerning - adjusting the space between each single letter in a word - will always be a matter of taste and preference. And can be achieved thru kern.js or kerning.js
What makes the TypeKit solution stand out to me, is it enables kerning for all body text automatically by utilizing the meta data in OpenType fonts. I just found it, and am pretty excited to use it in my next project!
For easy reference, the new css properties discussed in the link are:
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
font-kerning: normal;
With prefixes for font-feature-settings including:
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
Check out my project Jerning.com [see below] for kerning text.
Usage is very simple and is based of pairs of characters, for example:
<h1>Hello World</h1>
The W and o will look weird without kerning.
Simply do:
$('h1').jerning("Wo", -0.1);
which will apply kerning between all upper case Ws and lower case os in h1 tags.
I retired the Jerning project but please find the minified source code below for inclusion in your project if you wish:
(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return'<span style="letter-spacing:'+b+'em">'+a+"</span>"};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f,
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery);
Unfortunately I don't have the non-minified version any more; the above comes with no guarantees of all cases working!
What seems to be required is dynamic kerning, because what the Thread Opener and also I am/is in need is this: justify does block alignment, as good as possible, by adding space between the words, which leaves "holes" in the text block. Now take instead the line with left align (so no added space), calculate it's physical width, compare with block width available, divide the diffrence trough the number of letters in that line, then use this value as the letterspace addition. This will look more like a newspaper layout than only a text-align:justify. I have to say tho, I am not sure whether the lines in a textblock can be accessed "by line number" in a dynamic page layout, can it?
edit: I tried that yesterday. I use innerHTML to read the content of a text block, then I split and copy it to an array of which each entry/line gets its own DIV tag and id. Then I ajust letterspacing accordingly. Only few of the newest browsers support subpixel-letterspacing, so it works only with medium to big sized fonts. The problem I run into is: due to no Subpixelsupport it works only to some degree, although nice looking, so I tried to additionally justify the result with the text-align attribute, but it's not working after I altered letterspacing.. Left and right alignement works, but not "justify", this one works only before the addition of letterspacing. Could be an opera problem. If I can fix this then I'll post the code.
edit 2. it works now but for some reason I cannot post code here. that is from webkit 10.3.3.13 on mobile. Send me a message if you're interested in the code.
Related
Using wordpress.org, only happening in Chrome.
Aenean lacinia bibendum nulla sed consectetur. - in backend of WP...
Renders this...
Aenean lacinia bibendum nulla sed consectetur.
There aren't additional or padding, etc. Just one space that is at least double wide. Seems to fix when I delete the space (so there is none), then space again in the areas that are being affected.
Please help!!
Looks like the text formatting is set to 'justifyfull'. In the post editor just select the text then change is justification to 'left'.
I'm refactoring my site to use the HTML5 details tag, as described here, in order to improve accessibility.
This is my question: I know that I can add the "open" attribute to the details tag to ensure that the contents are displayed by default:
<details open>
<summary>Show/Hide me</summary>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>
But is there a way I can set this responsively in CSS, so that the open attribute is automatically applied for pages with a width greater than 640px, and automatically removed for pages with a width below 640px?
Update: To be clear, I know I can do it with other CSS styling. I'm interested in understanding whether it's possible to do this with only the open attribute.
This isn't possible using pure responsive styling and only the open attribute.
But you can use media queries and other CSS styling to hide the element when the screen has the width you want. See: http://css-tricks.com/logic-in-media-queries/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am making a site with several image galleries. Above these galleries is a description of each collection. However, because each description varies in length, I need the to vary in size to fit the content, and the to vary to accommodate the "collection" div. I don't even know where to start.
http://jsfiddle.net/aZKjC/1/
Is this what you want?
Code:
<div class="gallery">
<div class="desc">
Aliquam et nisl vel ligula consectetuer suscipit. Morbi euismod enim eget neque. Donec sagittis massa. Vestibulum quis augue sit amet ipsum laoreet pretium.
</div>
<img src="" width="300" height="300"/>
</div>
Use CSS and float left with multiple divs with the gallery class for columns side by side with different heights.
You can use something like this
.yourDiv{
min-height:200px;
}
Just apply that class to all of the divs that need to be the same height just make the min-height bigger then your tallest div.
tag is just a container, that you can put there whatever you want that is HTML.
The benefites of using tag is that you can choose it an "id" to it, and than control it.
http://www.w3schools.com/tags/tag_div.asp
How to control tag - same as other elements. By css & some javascript :
http://www.w3schools.com/jsref/prop_style_height.asp
div - you can write this way, i.e:
<div id="id_mydivtest"> </div>
...
<script>
document.getElementById("id_divtest").height = 300;
</script>
You should take a tutorial at http://www.w3schools.com
Good luck.
I'm using PIE to achieve some cross-browser CSS3 effects (gradient backgrounds, rounded corners, drop shadows, etc), but it's messing up my jquery accordion something awful.
Basically when PIE inserts its css3-container elements into the DOM, the jquery accordion code can't recover, because it's expecting the accordion container to be filled exclusively with an alternating list of H3 and DIV elements.
Has anyone found a way to make these two tools play nice together?
Instead of CSS PIE use pie.js the simple benifit that pie.js gives you is that you decide when to apply pie classes you can find a nice documentation on how to use pie.js here . Simply by the javascript way the pie will be applied after the code is executed by jQuery hence it should NOT mess with the markup. [though i am going to test it ]
And your code with pie should look something like
$('.accordion').accordion({
parameter:value;
});
$('.pieElement').each(function(){
PIE.attach(this);
});
Another method of doing this is by using gutters , while programming mobile webapps because of webkit i found out how useful gutters can be especially with polyfills .
Using gutters your code can look like
<div id="accordion">
<h3><span class="gutter">Section 2</span></h3>
<div>
<div class="gutter">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</div>
then apply your PIE CSS3 on gutters , from what i have read about PIE it seems that it applies a VML markup inside the parent of the element and if so using gutters the style will be applied without changing your markup.
To prevent wrapping of a part of text, surrounding that part in a <span style="white-space: nowrap;"> can be used.
Given a block of justified text (text-align: justify), how do I cancel justification for a part of the text? I want to keep the whole text justified, but not allow to increase distance between two specific words.
Instead of even spacing in the second line like this:
Lorem ipsum dolor sit amet, consectetur |
adipiscing elit. Phasellus et |
ullamcorperenim sed velit fermentum. |
I want to keep the words "adipiscing elit" together, like this:
Lorem ipsum dolor sit amet, consectetur |
adipiscing elit. Phasellus et |
ullamcorperenim sed velit fermentum. |
Is this possible?
Options:
Use FOUR-PER-EM SPACE U+2005 instead of normal space, e.g. adipiscing elit. There is no guarantee that browsers treat it as non-stretchable space, but that’s what they actually do, and it’s a rather natural thing to do. After all, it is one of the fixed-width spaces. Drawback: typically fails on IE 6 (a small box is shown instead of a space), if the primary font of the text is not Arial Unicode MS or some other especially “rich” font.
Wrap the words inside some inline markup (typically span) and set text-justify: none and display: inline-block for it. Drawbacks: does not work old some old browsers, and forces the two words together (due to the latter declaration—and without it, this methods does not work on current browsers).
Use NO-BREAK SPACE instead of normal space. This used to work well, though with the drawback to forcing the two words together on the same line. But e.g. current Firefox treats no-break as stretchable, sadly enough.
Use a technique like the one in Web_Designer’s updated answer. I would suggest making the width em valued, to make it relate to the font size. The typical width of a space is 0.25em.
I wouldn't recommend using the html style attribute. If you use a class, then it's easier to make changes:
Wrap the two words "adipiscing elit." in a span with a class like this:
<span class="unjustify">adipiscing elit.</span>
And then in your CSS:
.unjustify {
word-spacing: 2px; //experiment with differen't values here.
}
Update:
After some testing the above solution doesn't seem to work. ...so I came up with the following (working) solution:
Wrap the space between your two words in a span with a class like this:
adipiscing<span class="unjustify"> </span>elit.
And then in your CSS:
.unjustify {
display: inline-block;
width: 6px;
}
One solution you should look into is to use one of several fixed-width Unicode space characters. See:
https://jkorpela.fi/chars/spaces.html
or
http://en.wikipedia.org/wiki/Space_(punctuation)
Example:
adipiscing elit.
However like Web_Designer's solution these will leave a space at the end of the line, if the line breaks there.