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
Related
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 */
}
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
Say I have a single span element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.
HTML:
CSS:
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
<span>BIG TEXT</span>
Looking at the box model, it's clear the browser is adding padding inside the content edge. I need to remove this "padding", one way is to simply alter the line-height, as with:
http://jsfiddle.net/7vNpJ/1/
This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).
Any idea of a cross-browser solution? Thanks!
It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:
span {
display: inline-block;
font-size: 50px;
background-color: green;
/*new:*/
font-family: 'Times New Roman';
line-height: 34px;
height: 35px;
}
<span>
BIG TEXT
</span>
The browser is not adding any padding. Instead, letters (even uppercase letters) are generally considerably smaller in the vertical direction than the height of the font, not to mention the line height, which is typically by default about 1.2 times the font height (font size).
There is no general solution to this because fonts are different. Even for fixed font size, the height of a letter varies by font. And uppercase letters need not have the same height in a font.
Practical solutions can be found by experimentation, but they are unavoidably font-dependent. You will need to set the line height essentially smaller than the font size. The following seems to yield the desired result in different browsers on Windows, for the Arial font:
span.foo
{
display: inline-block;
font-size: 50px;
background-color: green;
line-height: 0.75em;
font-family: Arial;
}
span.bar
{
position: relative;
bottom: -0.02em;
}
<span class=foo><span class=bar>BIG TEXT</span></span>
The nested span elements are used to displace the text vertically. Otherwise, the text sits on the baseline, and under the baseline, there is room reserved for descenders (as in letters j and y).
If you look closely (with zooming), you will notice that there is very small space above and below most letters here. I have set things so that the letter “G” fits in. It extends vertically a bit farther than other uppercase letters because that way the letters look similar in height. There are similar issues with other letters, like “O”. And you need to tune the settings if you’ll need the letter “Q” since it has a descender that extends a bit below the baseline (in Arial). And of course, if you’ll ever need “É”, or almost any diacritic mark, you’re in trouble.
I'm a designer and our devs had this issue when dealing with Android initially, and our web devs are having the same problem. We found that the spacing between a line of text and another object (either a component like a button, or a separate line of text) that a design program spits out is incorrect. This is because the design program isn't accounting for diacritics when it is defining the "size" of a single line of text.
We ended up adding Êg to every line of text and manually creating spacers (little blue rectangles) that act as the "measurement" from the actual top of the text (ie, the top of the accent mark on the E) or from the descender (the bottom of a "g").
For example, say you have a really boring top navigation that is just a rectangle, and a headline beneath it. The design program will say that the space between the bottom of the top nav and the top of the headline textbox 24px. However, when you measure from the bottom of the nav to the top of an Ê accent mark, the spacing is actually 20px.
While I realize that this isn't a code solution, it should help explain the discrepancies between the design specs and what the build looks like.
span::before,
span::after {
content: '';
display: block;
height: 0;
width: 0;
}
span::before{
margin-top:-6px;
}
span::after{
margin-bottom:-8px;
}
Find out the margin-top and margin-bottom negative margins with this tool:
http://text-crop.eightshapes.com/
The tool also gives you SCSS, LESS and Stylus examples.
You can read more about it here:
https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
I had a similar problem. As you increase the line-height the space above the text increases. It's not padding but it will affect the vertical space between content. I found that adding a negative top margin seemed to do the trick. It had to be done for all of the different instances of line-height and it varies with font-family too.
Maybe this is something which designers need to be more aware of when passing design requirements (?)
So for a particular instance of font-family and line-height:
h1 {
font-family: 'Garamond Premier Pro Regular';
font-size: 24px;
color: #001230;
line-height: 29px;
margin-top: -5px; /* CORRECTION FOR LINE-HEIGHT */
}
This worked for me:
line-height: 80%;
If its text that has to scale proportionally to the screenwidth, you can also use the font as an svg, you can just export it from something like illustrator.
I had to do this in my case, because I wanted to align the top of left and right border with the font's top |TEXT| . Using line-height, the text will jump up and down when scaling the window.
The best way is to use display:
inline-block;
and
overflow: hidden;
I've been annoyed by this problem often. Vertical-align would only work on bottom and center, but never top! :-(
It seems I may have stumbled on a solution that works for both table elements and free paragraph elements. I hope we are at least talking similar problem here.
CSS:
p {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
background: #FFFFFF;
margin: 0
margin-top: 3px;
margin-bottom: 10px;
}
For me, the margin settings sorted it out no matter where I put my "p>.../p>" code.
Hope this helps...
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.