In my current project, I need to wrap every single character of a sentence within a span, so I can measure the distance from the beginning of the sentence up until the character in question.
Unfortunately, it seems that wrapping some of the characters (I found it to be true for "Y" and "T") in a span, adds an extra margin to the right, so the whole text gets stretched:
div { font-size: 100px; }
<h2>Expected (same width):</h2>
<div>A-A-A-A</div>
<div>
<span>A</span><span>-</span><span>A</span><span>-</span><span>A</span><span>-</span><span>A</span>
</div>
<h2>Unexpected (different width):</h2>
<div>Y-Y-Y-Y</div>
<div>
<span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span>
</div>
If you run the snippet, you will realize, that "Y-Y-Y-Y" is significantly wider when wrapped in SPANs.
Why is that so? How can I prevent this behaviour?
You can solve that with setting font-kerning:none; to the div
Like this
div { font-size: 100px; font-kerning: none; }
https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning
Whether this happens seems to depend on your browser's default font. Some fonts may have kerning (letter spacing adjustments) that reduces the space between a capital Y and a short letter or dash.
It seems that Chrome's text rendering engine either uses more kerning than other browsers, or fails to apply it when there's a html tag between the letters.
You can resolve this issue by giving your div a specified font-family:
div {
font-family: Courier New;
}
(does not have to be a monospace font, but those are guaranteed to not have kerning)
Any mono-spaced font may help as each character is the same width.
You could also try this:
https://css-tricks.com/forums/topic/characterletter-widths-in-css/
Related
When dealing with special characters is there a way to shrink only the special character and shift the position up slightly?
In particular I am trying to use the registration character (little R with circle) but it seems to render at the same size of the font which is not how it should be displayed. It should be shifted up towards the top of the text and the size should be at least half the size.
Is there some sort of escape character that can be inserted right before it so it renders correctly? Or is there a way to use CSS to select only the special character from the text?
The only option I can think of is enclosing each one in a tag or something similar but I would think that there is a better way of doing this.
Two options for you. I don't mean to steal from #aaronmallen, I just want you to have a comparison.
CSS (change ELEMENT to whatever - span most likely):
ELEMENT:after {
content: '\00AE';
display: inline; /* if you use on a block element like div */
zoom: .75;
position: relative;
top: -8px; /* because default font size is 16px */
}
HTML would be the <sup>®</sup> that was posted already.
See comparison here
You could use the sup tag.
<sup>®</sup>
Which is equivalent to:
sup {
vertical-align: super;
font-size: smaller;
}
HTML sup tag
MDN
I am trying to remove the spacing at the beginning of my h1 tag. Please see the attached screenshot. I have highlighted the h1 tag in blue so you can see the extra space at the beginning of the wording. It amounts to around 1 or 2 pixels. The space is not margin or padding. The space is definitely from the h1 element because I have removed the rest of the elements from the page. What could this space be? and how can I remove it?
UPDATE: Please see this jsFiddle for the example code
This vertical sliver of whitespace before each character is almost certainly a characteristic of the font you're using to render this <h1> text. Font designers manage inter-character spacing by putting some of the space at the end of characters and some of it at the beginning. They typically optimize this for both optical (eyeball) alignment at the beginnings and ends of justified lines and also for nicely balanced intra-word spacing.
If you must get rid of it, there are some things you could try.
Negative tracking. Try a small negative CSS letter-spacing attribute like .05em. This will cram your characters a little closer together. Be subtle with this effect.
A boldface font choice. Often the font designer makes the font bold by thickening the strokes symmetrically about their centerline. This may eat up a bit of the leading whitespace.
As a last resort, render the text into a graphic (png or gif) and then trim its edge. This won't look very good.
In this case the issue was due to the padding on the body of the HTML markup.
Adding this clears it;
body{
margin:0px;
padding:0px;
}
Whether this is the solution in your scenario is impossible to say without the full code.
http://jsfiddle.net/jU43x/5/
Adding margin-left: -3px; to the h1 tag will fix this: demo
h1 {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
padding: 0;
line-height: 1.2;
font-size: 97px;
margin-left: -3px;
}
The analysis by #OllieJones is correct: you are dealing with details of font design. In effect, you are trying to undo some decisions by the font designer, in a specific context; there is no general mechanism for that.
What you can do is to shift the content left. The amount of the shift depends on the specific font properties and the characters involved. In the given case, a shift of 5px pushes the “C” against the left edge. But beware that if the first letter is something else, it probably gets pushed too much. Different letters have, on purpose, different spacing around them in the font design.
Content can be shifted using positioning or, perhaps safer, using auxiliary markup and a negative margin:
<style>
h1 > span {
display: block;
margin-left: -5px
}
</style>
<h1><span>Covered with grass then detained</span></h1>
This lets you use normal styling for the h1 element. For example, if you draw a border around it, the letter “C” will touch the border. I presume this what you want (though it would be a typographic error). Alternatively, shift the h1 element left simply by setting a negative left margin on it.
I am having a weird problem , either I don't know how <br/> works or I am missing something here.My paragraphs have line height of 24px. I want to have a line break (empty line) between the text but when I use <br/> tag it creates an empty line with too much space (36 px) according to paint.net so what I am doing wrong?
Isn't line break supposed to have same height as line-height property? If yes why isn't that working and if not then what is the solution?
<p>
Greenfields Counselling and Psychotherapy is a counselling practice that lives and works out of the principles for counselling and psychotherapy as set down by Carl Rogers.
<br/>
<br/>
Counselling at Greenfields is strictly confidential and we understand that this can be a difficult time for you.
</p>
Here is the css:
p {
line-height: 24px;
}
Here is the demo: http://contestlancer.com/greenFields/?page_id=41
Look at the space after the word happen.
Ahmar.
Seems perfectly fine to me... if you get rid of one of the <br>s I measured distance between "facilitate"'s f and "Counseling"'s C to be 13px. If I put it back in again it is 37px.
37px - 13px = 24px = the line-height you set = everything is okay ;)
(measuring done via Greenshot ;))
So if you are not satisfied with the height of your <br> you should add a special condition for that to your css:
br
{
line-height: <desired_value>;
}
PS: So to clarify further, line-height is not the same as the space between two letters in two lines...
You can remove that line-height spacing by this technique.
br{
display: block;
height: 0;
}
demo
The <br /> tag is for line breaks. You can use the CSS line-height property to control distance between lines, if you want to look at it that way.
for large distances between lines, is better to use <p> tags for every line, in which you can control the height.
jsfiddle.net/efortis/f6ju2/
I'm trying to "stack" some text, but have one small word inserted among the big words, like so:
THIS
IS AN
important
SENTENCE
I have the HTML laid out with the main text in its own class, with the font size at 8em, and a span in the middle for the smaller word. In the CSS, I've set up a class for "important":
.important {
font-size: 0.5em;
line-height: 0.5em;
}
THIS<br>IS AN<br><span class="important">important</span><br>SENTENCE<br>
...and it's there, and looks great, BUT the line-height doesn't seem to take. The word "important" is 0.5em in size, but the line-height is just as tall as the rest of the words, resulting in a giant space after IS AN and before "important".
I've tried with the <br> both inside and outside the span, on both sides of "important", like
THIS<br>IS AN<span class="important"><br>important<br></span>SENTENCE<br>
...but I just can't seem to get the line-height to take. What am I doing wrong?
This is a side-effect of the markup used. Replace the line breaks (<br>) with block-level containers to achieve the desired behavior (stack the words on one another), e.g.:
HTML
<div>THIS</div>
<div>IS AN</div>
<div class="important">important</div>
<div>SENTENCE</div>
You can also lose the line-height declaration, as it no longer serves a purpose:
CSS
body {
font-size: 8em;
}
.important {
font-size: 0.5em;
}
References
A live demo on dabblet
HTML block level elements on Mozilla Developer Network
Note: You may use any block level elements, e.g. div containers or p elements. Paragraphs will be more appropriate semantically, but you should be aware of any default styles applied to them such as thick padding, bottom margins etc..
Line height is a tricky thing to control with precision, because of the vagaries in the way different browsers and OS interpret the how the calculation is made. Adam Twardoch wrote about how line height varies with browsers over at webfonts.info, where there's also a more general piece on working with line-height.
Line-height controls aren't really intended for more 'graphic' layouts, but are a part of the designers toolbox for setting legible paragraphs. As Eliran said, use block elements for what you're trying to do. That way you can control positioning far more accurately.
I don't know if this is the most kosher way to do it, but I've had success giving negative margins to text like that instead of adjusting line height.
I usually prefer <p> for adjusting line height. Try something like this:
CSS:
p.important
{
font-size: 0.5em;
line-height: 0.5em;
}
HTML:
THIS<br>IS AN<br><p class="important">important</p><br>SENTENCE<br>
I am dealing with some HTML text that I basically have read access to. I can change things with CSS, but the actual layout of the HTML is static. I am using several hundred instances of the same type of HTML that is laid out like the following:
<div class = 'outer'>
<span class = 'inner'>5</span>
Some other random text that is formatted according to the style of the outer class.
</div>
For the purposes of the project I am working on, all of the text that I am displaying within the outer class (with the exception of the contents of the inner span) needs to justified. But the contents of the inner span need to be anchored to the start of the line. My current problem is that because all of the text is being justified, the inner span content is being pushed out to different places on the line because the text is all different.
So is there a way to have the inner span ignore the fact that the outer class is telling it to be justified? How might I go abut solving this issue?
I would be fine with the way 6 & 7 look as well as the way 8 & 9 look, just as long as it is consistent.
EDIT: CSS
.outer {
padding-left:10px;
padding-right:10px;
font-family:palatino;
font-size:17px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: solid 1px #999;
border-bottom: solid 1px #999;
text-align:justify;
}
And then I realized I often times don't have a class set to the SPAN, so I tried to do what the answer below suggested to do like this:
.outer span{
display:inline-block;
width:10px;
}//But it still isn't fixing the issue of the left side alignment
If I understand the situation correctly, you have short paragraphs starting with a number, and the paragraphs are to be rendered as justified on both sides, but the space between the number and the first word should not be stretched. Moreover, it seems that the paragraphs start with a no-break space; otherwise I cannot understand why they start with varying-width space in the screenshot.
I don’t think there’s any CSS solution. The CSS properties for justification are rather simple, not letting you control which spaces get adjusted (even as per CSS 3 Text).
There’s a character-level solution, though, but with some risks. Instead of no-break spaces (which are treated as non-stretchable by some browsers, but not by all, and the trend seems to treat them as normal spaces except for line-breaking), use fixed-width spaces. This may however fail on IE 6, depending on font; see my notes on Unicode spaces.
You could specify that the number be surrounded by an unstretchable en space, thereby directing all stretching of spaces to other spaces on the line, by starting a paragraph as follows:
<div class = 'outer'>
5 Text of the paragraph.
</div>
The en space, being 0.5em wide, might be too wide. The four-per-em space (0.25em wide) corresponds to a typical width of a normal space when unstretched (though this depends on the font). To use it, replace by or by the actual U+2005 character, if using UTF-8 encoding.
you can use display:inline-block and specify a width... Like this
.outer{
text-align: justify;
}
.inner{
display: inline-block;
width: 10px;
}