any ways to put into html using css upper or lower indecies like: ¹ or ₁ (I also need latin letters).
Use the <sup> and <sub> tags.
HTML TAGS: try sup and sub tags,...
Demo
Other Option Using css:
.sup,
.sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
.sup {
bottom: 1ex;
}
.sub {
top: .5ex;
}
text <span class=sup>upper</span><span class=sub>lower</span>
I'm not quite sure what you want with latin letters or if you know what latin letters are, but the unicodes you can find here http://unicodelookup.com/#latin
In case you mean roman numbers, there is no automatic translation in HTML, except for an ol
<style>
.sub, .sup { position: relative; font-size: 80%; }
</style>
...
<span class=sub>a</span> (subscript)
<span class=sup>a</span> (superscript)
Tune the values as desired. In particular, you may wish to use different classes for different situations, especially depending on the letter that a superscript is attached to. For example, after an uppercase letter like “A,” a superscript should be placed considerably higher.
Why classes and CSS?
Although HTML appears to have just the right markup for this, sup and sub, they have several drawbacks. Their rendering is inconsistent across browsers and often typographically poor: both the vertical placement and the size can inadequate. It might seem easy to fix this in CSS, but it isn’t, due to an odd IE bug with sizing them: it interprets percentages incorrectly. Moreover, sup and sub often create uneven line spacing.
If you intend to use sup and sub, run some tests before starting to use them extensively. Test on a few browsers and with superscripts and subscripts inside text paragraphs (so that you see the line spacing issue).
Related
I have a page which generates a phone number in HTML, like this:
<div class="phone">01987123456</div>
What I want is to simply put a space inside the number, like so:
01987 123456
The generated number and HTML will always be the same, but I only have access to client side code (HTML / CSS / Javascript / etc).
I want to find a way of achieving all of this without using Javascript if possible, so Ideally I am looking for an answer in CSS or HTML.
I'm pretty sure this could be done fairly easily in Javascript, but the client wants to make sure the phone number is formatted correctly even if Javascript is disabled (don't ask).
I want the most effective and efficient way of changing the number to what I want. If someone can figure out how to add brackets to the number (like this: (01987) 123456) as well as the space using just CSS/HTML you will immediately get marked as correct as well as my eternal gratitude.
EDIT:
I get that CSS is for design, Ive been a web developer for 15+ years. I could really do with a CSS hack to produce what I want, and explaining to the client the basics of web design is unfortunately not an option (they think they know better and I am in no position to dictate anything to them). I'm in a bit of a nightmare situation, and I need your help!
I know that content can be added to a page with CSS using content. I am aware of the ::first-letter method that #gillesc mentions in the comments. I was hoping something like this might help me.
The client uses modern browsers so a CSS3 solution would be fine.
And no, I cant change the outputted HTML.
I was interested to see if this could be done with CSS, even if it shouldn't be done! The following is quite hacky, ideally the phone number would be formatted server side or, if that isn't an option, with JavaScript.
A few caveats:
This requires an attribute to be added to .phone for the pseudo element to use. This may or may not be a deal breaker given that you seem to have limited access to the HTML
If the phone number is not in a suitable format (e.g. something like 01 987123456) it will not display correctly
A nasty little hack is used for IE as it doesn't calculate the width of the pseudo element correctly using ch for some reason. Credit to SW4 for this: https://stackoverflow.com/a/20541859
A solid background colour is required
The general idea behind this is as follows:
.phone
text-indent: 1ch; on .phone moves the whole text to the left by one character
.phone is set to position: relative; to allow the pseudo element to be positioned relatively to it
white-space: nowrap; ensures that this doesn't wrap onto a new line if there is a break in the number
.phone:before
background-color: white; masks the digits in .phone
border-right: 1ch solid white; hides the sixth digit in .phone, in effect this is the space
content: attr(data-phone); uses the data-phone attribute on .phone to populate the pseudo element with the same number
left: 0;, position: absolute; and top: 0; are used to position the pseudo element
overflow: hidden; hides any characters over the 5 character limit
text-indent: 0; resets text-indent: 1ch; set on .phone
width: 5ch; ensures that the pseudo element is only 5 characters long
The weird media query is the hack to target IE
Tested and working in FF 38.0.5, Chrome 43.0.2357.124 m and IE 11. Browsers not supporting the ch unit (such as Opera 12.17 and Windows Safari 5.1.7) seem to show the phone number in its natural state.
.phone {
position: relative;
text-indent: 1ch;
white-space: nowrap;
}
.phone:before {
background-color: white;
border-right: 1ch solid white;
content: attr(data-phone);
display: block;
left: 0;
overflow: hidden;
position: absolute;
text-indent: 0;
top: 0;
width: 5ch;
}
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
.phone:before {
width: 5.8ch;
}
}
<div class="phone" data-phone="01987123456">01987123456</div>
JS Fiddle: https://jsfiddle.net/scarjnb1/
It's not possible using CSS, just JavaScript. Then it'd be:
<div id="phone">01987123456</div>
<script>
var el = document.getElementById('phone');
phone.innerText = phone.innerText.replace(/^(\d{5})/, '($1) ');
</script>
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'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;
}