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'.
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.
HTML5 adds two new elements that are useful for marking up a table of contents for an article: details and summary.
The details element defaults to closed (hides everything except the summary element) and when clicked, it expands to reveal its contents. When it does this, it adds an "open" attribute to the details element.
I would like the element to default to open without having to add the open attribute to the markup. Is it possible to do this via CSS or would scripting have to come into play?
Example:
<details>
<summary>Table of Contents</summary>
<ul>
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ul>
</details>
You can add the open attribute into the details tag like this:
<details open>
<summary>Table of Contents</summary>
<ul>
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ul>
</details>
The details will then be expanded by default.
If you want a JS solution, you could give the details element an ID:
<details id="target-me">
<summary>Table of Contents</summary>
<ul>
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ul>
</details>
And then use the following JS:
document.getElementById("target-me").open = true;
You can also use the alternative below it still has the ability to open and close but initially, it's opened and you can test that (I provided the output from my computer):
<div>
<h3>Open</h3>
<details open>
<summary>Always open</summary>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</details>
</div>
check the photo of the output below:
If you want to do it in JavaScript
const details = document.querySelector("details");
details.setAttribute("open", "");
Related to html5 details tag open one by one javascript function working strange
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.
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.