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 */
}
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
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
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'});
}
I want to align text within a list of items containing superscript such that the main text are equally spaced vertically:
HTML:
<ul>
<li>Shape: Rectangle</li>
<li>Length: 5m</li>
<li>Breadth: 3m</li>
<li>Area: 15m<sup>2</sup></li>
<li>Color: Blue</li>
</ul>
I have tried tinkering with the display, height, line-height and vertical-align properties in CSS. But none seems to work. Can anyone help me please? Thanks.
The cause of the problem is that superscripts tend to make line spacing uneven. Setting line-height to a sufficiently large value like 1.3 may help. But in general, it is best to avoid using the sup element and construct your own superscript element, using span and style that creates a superscript using relative positioning (which does not affect line spacing, unlike the vertical alignment caused by sup).
In this specific case, there is a much simpler and better approach: instead of <sup>2</sup>, use ², or enter directly the superscript two character “²” (on Windows, you can do that using Alt 0178). Being a normal character, it does not affect line spacing, and being designed by a typographer, it can be expected to look better than any superscript 2 created using HTML or CSS.
This might help you: http://jsfiddle.net/Wexcode/TgqQY/
HTML:
<ul>
<li><span></span><span>Shape: Rectangle<span></li>
<li><span></span><span>Length: 5m</span></li>
<li><span></span><span>Breadth: 3m</span></li>
<li><span></span><span>Area: 15m<sup>2</sup></span></li>
<li><span></span><span>Color:</span> <span>Blue</span></li>
</ul>
CSS:
ul { list-style: none; }
li { background: red; height: 50px; margin: 3px 0; padding: 5px 0; }
li span:first-child { height: 100%; }
li span { vertical-align: middle; display: inline-block; }
Depending on format, you can try lowering the font size just before calling the <sup> tag:
...<br/> <li>Area: 15m<font
size=-1><sup>2</sup></font></li>
...<p/>
There is still a slight spacing gap, but it is not really noticeable.
The only thing I've found has been;
.hang {
text-indent: -3em;
margin-left: 3em;
}
The only way for this to work is putting text in a paragraph, which causes those horribly unsightly extra lines. I'd much rather just have them in a <span class="hang"></span> type of thing.
I'm also looking for a way to further indent than just a single-level of hanging. Using paragraphs to stack the indentions doesn't work.
<span> is an inline element. The term hanging indent is meaningless unless you're talking about a paragraph (which generally means a block element). You can, of course, change the margins on <p> or <div> or any other block element to get rid of extra vertical space between paragraphs.
You may want something like display: run-in, where the tag will become either block or inline depending on context... sadly, this is not yet universally supported by browsers.
Found a cool way to do just that, minus the nasty span.
p {
padding-left: 20px;
}
p:first-letter {
margin-left: -20px;
}
Nice and simple :D
If the newlines are bothering you in p blocks, you can add
p {
margin-top: 0px;
margin-bottom: 0px;
}
JSFiddle Example
ysth's answer is best with one debatable exception; the unit of measure should correspond to the size of the font.
p {
text-indent: -2en;
padding-left: 2en;
}
"3" would also work adequately well; "em" is not recommended as it is wider than the average character in an alphabetic set. "px" should only be used if you intended to align hangs of text blocks with differing font sizes.