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>
Related
So when you put a word into a block container there is a small spacing between the very first pixel of the very first character ("1" in this case) and the left edge of the container. How do I remove it?
Setting padding to 0 doesn't help, as you can see from the picture:
Here is the sample to play with: https://codepen.io/alanklm/pen/oNWXerd?editors=1000
<div style="width: 300px;">
<div style="float:right; padding: 0; font-size:200px;">
15
</div>
</div>
I can use negative margins to compensate for this, but this would be an ugly solution, which will mess all the rest of css around the box and also for different fonts and different letter the amount will be different.
As Paulie_D commented, setting container so it dimensions matches geometric bounding box of its text (a vice versa text to 'touch its wrapper') is not universally possible in plain CSS, and generally even not quite desirable typography-wise.
You can super "hand-craft" style to match precise combination of font and text, but unless font used will be super "blocky" and with uniform metrics, it will work only for that single combination:
<body style="background: white; margin: 10vmin">
<div contenteditable style="display: inline-block;
font: 90vmin / 0.7em Times New Roman;
background-color: black; color: white;
text-indent: -.121em; word-spacing: -.317em;
">15 <!-- = space for negative word spacing --> </div>
</div>
(Notice those wacky text-indent & word-spacing values.)
Rendered outcomes in Firefox on Windows machine:
("correct"), ("wrong").
As you can see, metrics of (used) font are set for visual balance, not geometric boundaries.
Hypothetically, using JavaScript canvas to get geometric bounding box of text and applying data back to style is technically possible, but as seen in the "correct" example above, even then the "rightmost" pixel of the top arm of the "5" glyph outreaching its bottom arch is probably not the right boundary to take.
You might try a combination of absolute positioning and media queries.
Set the parent div to position: relative and the child to position: absolute, then set the left property to a negative number, like left: -25px
You'll likely need to use media queries to adjust the left property value as you scale down.
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.
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.
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;
}
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.