Let's assume we have this html:
<h2>TITLE</h2>
Is it possible, through the power of CSS alone, to make this either be or behave like:
<h2>T I T L E</h2>
Reason being that I want to justify the letters over a given width in the title, and I don't want to resort to serverside regular expression witchcraft before having properly evaluated the CSS options.
I already managed to justify the single letters through CSS using these rules:
h2 {
text-align: justify;
width: 200px; // for example
}
h2:after {
content: "";
display: inline-block;
width: 100%;
}
I've looked into text-replace, but there's no support in any major browser. Other than that, I've not yet found any hopeful candidate.
CSS3 would be ok if there's ok support, JS is not of any help.
UPDATE
letter-spacing is not an option since it has to adjust to the width dynamically AND I do not want to check browser implementation of kerning perpetually. But thanks to the guys suggesting it, I knew I had forgot something when formulating the question :)
Here's a jsfiddle for fiddling
Why not just use letter-spacing?
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
A much easier way to do this would be to use the letter spacing css styling.
for example
h2 {
letter-spacing:10px;
}
Use CSS's letter-spacing:
h2 {
letter-spacing: 2em;
}
jsfiddle demo
Related
I've this snipped for which I want to remove the space between the link and the upcoming text, but I can't figure our how to do it. I've tried using padding and margin, but nothing works.
HTML:
A link. Some text.
Output:
Here's is an example: http://codepen.io/anon/pen/gPQVXx
You could try removing the letter-spacing on the last letter of the word.
A lin<span style="letter-spacing: 0;">k</span>. Some text.
It's not a neat solution, but if it's a one-off it'll get the job done. If not for the underline from the link, a negative right margin equal to the letter spacing would have done the trick as well.
This behavior is a clear violation of the spec.
A given value of letter-spacing only affects the spacing
between characters completely contained within the element for which
it is specified:
p { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>bb</span>c</p>
This also means that applying letter-spacing to an element
containing only a single character has no effect on the rendered
result:
p { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>b</span>c</p>
An inline box only includes letter spacing between characters
completely contained within that element:
p { letter-spacing: 1em; }
<p>a<span>bb</span>c</p>
It is incorrect to include the letter spacing on the right or trailing
edge of the element:
You only have to wait until browsers fix this. I suggest against fixing it with hacks like negative margins because it will backfire when browsers implement the standard behavior.
Although this answer has been accepted, I do not recommend using it. It breaks in some browsers and won't be compatible with screen-readers. Besides that, it is also bad practice to just flip letters around. I've created this answer to show some of the possibilities, not as a good solution
That being said. Here it is.
It does require some extra effort, but it works without the use of negative margins or extra html.
You basically have to swap all the letters around, and you're good to go!
This works because of the use of two things. letter-direction and :first-letter.
a{
display: inline-block;
letter-spacing: 1em;
direction: rtl;
unicode-bidi: bidi-override;
}
a:first-letter{
letter-spacing: 0;
}
This would've been much easier with a :last-letterselector :)
Hope this helps
A link. Some text
This is ugly, but it does the trick.
JSFiddle
Try this
A lin</span>k. Some text.
you can try this one:
A lin<span>k</span>. Some text.
CSS
span{
letter-spacing: 0;
}
HERE MY DEMO
I have a website called DaltonEmpire.
When a user copies "DaltonEmpire" I would like "Dalton Empire" to be added to their clipboard.
I only came to one solution; use a space, but make the letter-spacing -18px.
Isn't there a neater solution, such as a HTML character for this?
My example JSFiddle and code:
span.nospace {
letter-spacing: -18px;
}
<ol>
<li>Dalton<b>Empire</b></li>
<li>Dalton<b>Empire</b></li>
<li>Dalton<b>Empire</b></li>
<li>Dalton<b>Empire</b></li>
<li>Dalton<span class="nospace"> </span><b>Empire</b> <i>The only one that works</i>
</li>
</ol>
Are you looking something like this:
HTML space: ?
Here is some interesting and related info. It doesn't solve your problem, but it may help people who are searching for a way to create an optional line-break, like I was. The Zero-Width Space and <wbr> element are two possible options.
https://en.wikipedia.org/wiki/Zero-width_space
https://en.wikipedia.org/wiki/HTML_element#wbr
http://graphemica.com/search?q=space
You can use word-spacing for this. However to make a more dynamic property you want to use the em unit. This way the unit is based on the font-size, so actually supports all the font families and font sizes:
ol li
{
word-spacing: -.2em;
}
em is not an absolute unit - it is a unit that is relative to the
currently chosen font size.
source: Why em instead of px?
jsFiddle
You can also use font-size: 0; demo
span.nospace {
font-size: 0;
}
How about this? Looks neat enough to me:
ol li{
word-spacing: -4px; /* just enter an appropriate amount here */
}
You can now remove the nospace span.
you can give margin-left or Font-size CSS property
DEMO
span.nospace {
margin-left: -4px; /* or font-size:0px */
}
I would like to vertically align the div ".person-user" so that is vertically in the center of the parent element ".person" (The text to be in the center of the photo but to the right) How can I do this?
Thanks
http://jsfiddle.net/mpBW5/5/
This is something that should be simple, but is actually a pain in the backside to do. Here's a quick jsFiddle, using display: table on the person div, and display: table-cell on the picture wrapper and info divs:
http://jsfiddle.net/2yfDs/1/
What follows is a combination of markup and style that will accomplish exactly what you want, without JavaScript and JQuery.
Markup:
<div class="person">
<img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
<div class="profile">
<div class="name">Colin Pacelli</div>
<div class="fact">Ohio University</div>
</div>
</div>
Style:
.person {
display: table;
}
.person img.profile{
height: 50px;
margin-right: 10px;
/*border-radius: 4px 4px 4px 4px;*/
}
.person div.profile {
display: table-cell;
vertical-align: middle;
/*font-family: calibri;
font-size: 14px;
color: #444;*/
}
/*.person .profile .name {
font-weight: bold;
}*/
I have commented out the rules that do not principally affect the solution, so that all can see how little it takes with CSS if done right. Compared to 10 lines of code running using 32Kb of client side code running on top of a virtual machine. And you thought Adobe Flash Player was evil. I do not mind JQuery much, especially for things it can do well, but frankly, involving JQuery in a clear cut case of pure style is a just bit too much.
As you probably can figure, I have edited your JSFiddle, stripping it of non-essentials and cutting it down to a minimal example that exhibits the desired behavior while leaving the visuals in place.
Since you specified html and css as tags, and since it is in nearly all cases a better idea not to resort to JavaScript/JQuery when they can be avoided, I would really use a markup and style solution like the above instead.
The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:
$("div.person-user").each(function() {
$(this).css("marginTop", function() {
var imgH = $(this).prev("div.person-user-pic").height(),
thisH = $(this).height(),
h = (imgH/2) - (thisH/2);
return h;
});
});
BUT: if every div and image has the same height, you could just do this:
div.person-user {margin-top: 8px;}
I hope that this answers your question?
This is a very common question and the best explanation so far is here:
http://phrogz.net/css/vertical-align/index.html
I have a problem with margin-top in IE.
I have given a link a margin-top of 2px to align it out correctly in Chrome. But this caused a offset in IE9.
Some code:
CSS
.show_cart{
display: block!important;
float:left;
padding-left: 10px;
margin-top: 2px;
}
HTML
<div class="show_cart">
Toon Winkelwagen
</div>
I hope there is a quickfix but I couldn't find it.
EDIT - Sorry I edit it here but I can't find the code thingy in the comment box. Anyway, I changed it to this based on the answer which stated that I should use the vertical align. Chrome is still displaying properly but in IE its now off by 2px to the TOP.
.vmCartModule .show_cart{
display: inline!important;
float:left;
padding-left: 10px;
}
.vmCartModule .show_cart a{
vertical-align: baseline
}
There is more to it than just a margin. You should also consider font-size, vertical-align and more when you trying to line-up elements with texts. I would not recommend calculating pixels, it will never be consistent in all browsers and very hard to maintain. Instead, try to stick to "vertical-align: baseline", that is more deterministic. Using it you can be sure that your texts are always properly aligned.
This sounds exactly like IE's famous double margin bug, there is an easy fix as described here.
Try changing display: block; to display: inline;. Or you can find another solution to it (there are plenty) or you can use the mentioned HTML5 boilerplate or something similar like headjs, etc.
Just in case if you are using using HTML5 Boilerplate http://html5boilerplate.com/
You can use different value for the same class for IE9 -
.ie9 .show_cart{
margin-top: 0px;
}
Or only if you wish to use jQuery for this, you can write -
if ($.browser.msie && parseInt($.browser.version) == 9){
$('.show_cart').css({'margin-top':'0px'});
}
Lately i've been through a lot of times on a single situation problem:
I have a text input element in a web formulary, inside a bigger div with defined width.
Inside that bigger div, i'll put a span text like "Name: " and then i'll put the input.
I want the input to auto become as much as wider the space of the div that the span is not using.
The code would be something like this:
<div>
<span>Name:</span>
<input type="text" name="name" />
</div>
And the CSS:
div {
width: 200px;
display: block;
}
span {
display: inline-block;
font: 11px 'Lucida Sans', Verdana, Arial;
}
input {
height: 20px;
width: auto;
display: block;
}
I've been doing some research, but i seem unable to find a precise solution for this problem.
So far i've been skipping this problem by putting a inline style defining a different width for each element. But if i change the font, size, or whatever, it'll explode.
I don't like to build a fortress wall and leave it full of holes for snipers. That's why i'm looking for help :)
If you guys have any suggestion, solution or workaround way, I'd be glad to know. =D Thanks.
Semantically it's better to use label tags for this purpose:
<label>Name:</label>
Concerning your question, take a look at the CSS3 flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Or if you prefer a video: http://www.youtube.com/watch?v=-OubGOxKa5I
At the time of writing, Mozilla and Webkit support this and there is a fallback for other browsers: https://github.com/doctyper/flexie
Sorry, but it's not possible with that markup. Actually the only way to do it is to shudder use tables (or display: table-cell, etc but that doesn't work in IE7 or earlier). It also generally looks better to have all the inputs aligned, don't you think?
Change display: block to display: inline for input and I think it should work.
Here is an example
http://jsfiddle.net/KYvzM/