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
Related
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/
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.
Let's say that I have a span and I set an image as the background of the span like this:
<span style="background:url("my_image.png") no-repeat;"></span>
As you can see above, my span is empty. If I put some content in my span like:
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
But is there another way I can do this without adding some padding to my span and keep my span empty?
Thank you
You get the same effect by using inline-block but setting width and height instead of using padding.
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.
just don't make it empty: put a 'blank' inside. There are three ways, to do that:
simple space and add style white-space: pre; to it
Non-breaking Space or
The non plus ultra is, to let css do the trick for you:
add this style to your span:
:before {
content: "\200D";
display:inline;
}
What happens:
you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore
By default spans are inline page elements (rather than 'block' elements). This means they won't take up any more space in the page than that assigned to them—for example, if you place text in them (as you have found). To achieve what you want, you need a little CSS to define a height and width for the span, but you also need to make it a block element so that it is rendered consistently.
Alternatively, you could switch to something like a div, which is already a block element. Note however that defining a block element means it will take up space in your page. If you want something more dynamic consider some on-the-fly manipulation of the element with Javascript or similar.
(Either way, ignore the advice elsewhere on this page about single and double quotes in HTML attributes: that is utter nonsense).
try
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
You have to specify a width and height to show the background. When you're typing something in it you force both with the text.
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
You should set a width and height.
In the following SO-Question is a tip, how to get the size of the background-image: How do I get background-image size in jQuery
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).
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.