I have a word, which has both superscript and subscript. Now I render it like this word<sub>1</sub><sup>2</sup>
And get the following: word12.
How can I put the subscript exactly under the superscript?
Here's a clean solution. Create two CSS classes:
.nobr {
white-space: nowrap;
}
.supsub {
display: inline-block;
margin: -9em 0;
vertical-align: -0.55em;
line-height: 1.35em;
font-size: 70%;
text-align: left;
}
You might already have the "nobr" class as a <nobr> replacement. Now to express the molecular formula for sulfate, use the "supsub" class as follows:
<span class="nobr">SO<span class="supsub">2-<br />4</span></span>
That is, enclose your superscript/subscript within the "supsub" class, and put a <br /> between them. If you like your superscripts/subscripts a bit larger or smaller, then adjust the font size and then tinker with the vertical-align and line-height. The -9em in the margin setting is to keep the superscripts/subscripts from adding to the height of the line containing them; any big value will do.
There are many ways you can do this with CSS, and each has their pros and cons. One way would be to use relative positioning. A quick example might work like this:
<span class="fraction">
<span class="numerator">3</span>
<span class="denominator">4</span>
</span>
And the CSS to go along with this:
span.fraction { }
/* Or child selector (>) if you don't care about IE6 */
span.fraction span.numerator {
position:relative;
top:-0.5em;
}
span.fraction span.denominator {
position:relative;
top:0.5em;
left:-0.5em; /* This will vary with font... */
}
This particular example would work better if you use a monospaced font.
Use the CSS table style (except for IE8 and below). HTML:
<span class="over-under">
<span class="over">sup</span>
<span class="under">sub</span>
</span>
CSS:
span.over-under {
position: relative;
top: 1em;
display: inline-block;
}
span.over-under > .over {
display: table-row;
}
span.over-under > .under {
display: table-row;
}
Fiddle: https://jsfiddle.net/FredLoney/Loxxv769/4/
Besides being simpler than relative position tweaks, this solution avoids layout distortions that arise from those alternatives. See, e.g., https://jsfiddle.net/FredLoney/da89nyk2/1/.
Well, you can't do that with plain vanilla HTML. Like it's been mentioned, use CSS. But you will want some positioning aswell!
Related
Is there a way of hiding an element's contents, but keep its :before content visible?
Say I have the following code:
HTML:
<span class="addbefore hidetext">You are here</span>
CSS:
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
I've tried:
using display: none and setting display: inline on :before, but both are still hidden
using width: 0; overflow: hidden;, but then additional space seems to be added (?)
using color: transparent;, but then, of course, the content of the span still takes up space
using text-indent: -....px, but
this is frowned upon by search engines and
it seems not to work for span elements (?)
Any other ideas as to how I might do this?
Clean Solution
You could use visibility: hidden, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:
span {
visibility: hidden;
}
span:before {
visibility: visible;
}
Hackish Alternative Solution
Another solution would be to set the font-size of the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :before content.
span:before {
content: "Lorem ";
font-size: 16px;
font-size: 1rem; /* Maintain relative font-size in browsers that support it */
letter-spacing: normal;
color: #000;
}
span {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
}
Example on jsfiddle.
Update (May 4, 2015): With CSS3, you can now use the rem (Root EM) unit to maintain relative font-sizes in the :before element. (Browser support.)
*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.
For better browser support:
Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.
HTML:
<span class="addbefore">
<span class="visuallyhidden">This text will not show.</span>
</span>
CSS:
.addbefore:before {
content: "Show this";
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The .visuallyhidden class used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
The advantages of this solution:
Semantic HTML
Complete browser support
No problems with tiny text like other small font-size solutions.
The hidden content won't take up space
See it in action here: http://jsfiddle.net/tinystride/A9SSb/
I took a similar approach as suggested here with visibility, but that still has a content box.
My solution is to simply use font-size to hide the target text.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}
Building on #anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:
<span abbrev-content="Intl.">International</span>
#media only screen and (max-width: 700px) { /* very narrow viewports */
span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
span[abbrev-content]::before {
content: attr(abbrev-content);
font-size: 1000em;
visibility: visible;
}
}
If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.
I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.
So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:
$('.hidetext').empty();
Example: http://jsbin.com/efeco4/2
I have run into and issue when styling quotes. So what I'm trying to do is pull the quotation marks down a bit relative to the text so that it lines up well. I played around with relative and absolute positioning but could not figure it out. This program will become a random quote generator and the position of the end quote has to be such that it lines up the same way relative to the text if it there is a quote that takes up several lines.
body {
background-color: rgb(44, 62, 80);
}
.quoteMachine {
margin: 100px auto 0 auto;
padding: 40px 60px;
max-width: 600px;
min-height: 225px;
border-radius: 5px;
background-color: white;
}
.theQuote {
text-align: center;
font-size: 30px;
color: rgb(44, 62, 80);
}
.quotetationMarks {
font-size: 60px;
font-weight: 600;
}
.quoteAuthor {
text-align: right;
font-size: 20px;
color: rgb(44, 62, 80);
}
.twitterButton {}
<div class="quoteMachine">
<div class="theQuote">
<blockquote><span class="quotetationMarks">“</span > They call me Mister Tiibs <span class="quotetationMarks">”<span></blockquote>
</div>
<div class="quoteAuthor">
- hello
</div>
<button class="twitterButton"></button>
<button class="newQuoteButton"></button>
</div>
Since the spans are inline elements, you could add vertical-align: middle; to .quotetationMarks and that would move them down toward the middle of the rest of the string.
Alternatively, you could add position: relative; top: 10px; if you need more precise control.
Maybe adding vertical-align: sub; to .quotetationMarks is what you are looking for?
You can also use fontawesome, that's always a good option. -> http://fontawesome.io/icon/quote-right/
Edit: While vertical-align: middle; is a very valid and elegant approach, sometimes you've got a very specific position in mind for the quotation marks. If you need to match a mockup to pixel perfection, this approach grants you the flexibility.
You might get some mileage out of using pseudo-elements to render the quotes, and relative/absolute positioning to get them "just so".
This is especially important to help position them across line breaks. (I've edited my example to force a line break, in order to illustrate the robustness of this approach.)
From MDN:
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.
And specifically for the ::before pseudo element:
::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.
These quotes you're styling are cosmetic content, so I think that this is a great use-case for the ::before pseudo element.
I've forked your codepen here: http://codepen.io/cam5/pen/kkxpbX, but here are the relevant parts
<!-- quote HTML -->
<blockquote>
<span class="quotationMark quotationMark--left"></span >
They call me…<br /> Mister Tiibs
<span class="quotationMark quotationMark--right"></span >
</blockquote>
and the CSS:
/* quote css */
.quotationMark {
position: relative;
}
.quotationMark--left::before,
.quotationMark--right::before {
font-size: 60px;
font-weight: 600;
position: absolute;
top: -15px;
}
.quotationMark--left::before {
content:"\201C";
left: -45px;
}
.quotationMark--right::before {
content:"\201D";
right: -45px;
}
This CSS Tricks resource is great when you're trying to locate the ISO for putting a certain glyph into a CSS content rule: https://css-tricks.com/snippets/html/glyphs/
Setting the parent element, the .quotationMark to display: relative; will mean that the top, right, left values passed to the children (the pseudo-elements) of it bearing the position: absolute; property are calculated relative to their parent.
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
I have the text
Coupon*
in font size 30px. However I want to make the * not in 30px but smaller. How can I achieve this?
http://jsfiddle.net/LkLGE/
Thanks
To keep the asterisk aligned on the top, you can put the character in a <sup> tag and reduce its font-size:
<div class="text">Coupon<sup>*</sup></div>
.text {
font-size: 30px;
}
.text sup {
font-size: .5em;
}
JSFiddle example
As an alternative to <span> based answers <sup or <sub> or <small> might be a better starting point from a semantic standpoint.
<sup> is superscript and will raise the *.
<sub> is subscript and will lower the *.
<small> might require adding some css *, but shouldn't already have a position change. See http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element
Fiddle to show it in action: http://jsfiddle.net/6jmKT/
Coupon<span style="font-size:any size that you want">*</span>
I'm not sure about your case, but sometimes you want to do this in many places. Sometimes, you'll have a "new" or "special" item and you'll add a class with javascript to denote this.
Think about if you have to change this somewhere and how many places you might need to edit this span. Of course you could find-and-replace, but try THIS FIDDLE out and see what you think. CSS content() is pretty amazing for stuff like this.
HTML
<div class="thing special">
<!-- where special might be added by javascript -->
Coupon
</div>
CSS
.thing {
font-size: 30px;
color: blue;
}
.special:after {
display: inline-block;
/* so you can use "block" like stuff on it - (margin-top etc) */
/* this way you wouldn't have to change it in the html in a ton of places. just one - here. */
content: "*";
font-size: 15px;
color: red;
/* just for specific positioning */
vertical-align: top;
margin-left: -8px;
margin-top: 5px;
}
OR
sup is totally cool too - I think...
HTML
<p>Coupon<sup class="star">*</sup></p>
CSS
p {
font-size: 30px;
}
p .star {
font-size: 15px;
color: red;
}
When in doubt, put it in a span - FIDDLE
#myspan {
font-size: 10px;
}
This FIDDLE is a bit reductio ad absurdum, but it was fun!
You can use span and you can use <sup> tag:
EXAMPLE
<div class="text">Coupon<span class="star"><sup>*</sup></span></div>
.text {
font-size: 30px;
}
.star {
font-size: 12px;
}
http://jsfiddle.net/LkLGE/4/
The most robust way is to use the small element. If you wish to tune its effect to some specific size reduction, it is best to use a class attribute on it. Example:
<style>
.ast { font-size: 70% }
</style>
...
Coupon<small class=ast>*</small>
However, the asterisk “*” is rather small in many fonts, so size reduction easily makes it too small. If you think you need to reduce its size, you probably need a different font.
Is there a way of hiding an element's contents, but keep its :before content visible?
Say I have the following code:
HTML:
<span class="addbefore hidetext">You are here</span>
CSS:
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
I've tried:
using display: none and setting display: inline on :before, but both are still hidden
using width: 0; overflow: hidden;, but then additional space seems to be added (?)
using color: transparent;, but then, of course, the content of the span still takes up space
using text-indent: -....px, but
this is frowned upon by search engines and
it seems not to work for span elements (?)
Any other ideas as to how I might do this?
Clean Solution
You could use visibility: hidden, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:
span {
visibility: hidden;
}
span:before {
visibility: visible;
}
Hackish Alternative Solution
Another solution would be to set the font-size of the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :before content.
span:before {
content: "Lorem ";
font-size: 16px;
font-size: 1rem; /* Maintain relative font-size in browsers that support it */
letter-spacing: normal;
color: #000;
}
span {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
}
Example on jsfiddle.
Update (May 4, 2015): With CSS3, you can now use the rem (Root EM) unit to maintain relative font-sizes in the :before element. (Browser support.)
*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.
For better browser support:
Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.
HTML:
<span class="addbefore">
<span class="visuallyhidden">This text will not show.</span>
</span>
CSS:
.addbefore:before {
content: "Show this";
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The .visuallyhidden class used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
The advantages of this solution:
Semantic HTML
Complete browser support
No problems with tiny text like other small font-size solutions.
The hidden content won't take up space
See it in action here: http://jsfiddle.net/tinystride/A9SSb/
I took a similar approach as suggested here with visibility, but that still has a content box.
My solution is to simply use font-size to hide the target text.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}
Building on #anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:
<span abbrev-content="Intl.">International</span>
#media only screen and (max-width: 700px) { /* very narrow viewports */
span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
span[abbrev-content]::before {
content: attr(abbrev-content);
font-size: 1000em;
visibility: visible;
}
}
If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.
I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.
So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:
$('.hidetext').empty();
Example: http://jsbin.com/efeco4/2