If I have labels such as "1234B", "5678M"... How can I change this label so the letter at the end is smaller size than the size of numbers?
<p>1234<span class="smaller">B</span></p>
.smaller {
font-size: 5px;
}
The simplest way is to use the small element (which is still allowed in HTML5, though with contrived “semantics”, but to browsers it still means just smaller font size):
1234<small>B</small>
You can then use CSS to tune the font size reduction, e.g. with
small { font-size: 80%; }
However, this produces typographically bad results, since different font size implies different stroke width, so the letters will look thinner, too, in addition to being smaller. In typography, one would probably use small-caps glyphs of the font instead (though in typography, one would normally rather try and make digits and letters match in size, rather than unmatch!). This is in principle possible on web pages too (using font-feature-settings: "smcp", with prefixes), though still rare, and it requires a font that has such glyphs available (like Calibri, Cambria, or Palatino Linotype).
watson has it.............. but let me think CMS thinking......if you just want to lowercase the only letter and the numbers stay put you can do this:
HTML:
<div style="text-transform: lowercase;">3529M</div>
or
<div class="lowMe">3529M</div>
<div class="lowMe">5546D</div>
CSS:
.lowMe {text-transform: lowercase}
else I would just do span as it was mentioned...
Related
I would like to add appropriate kerning between two fonts. Specifically, I currently have (two examples):
div.hw_count {
display: inline-block;
vertical-align: middle;
}
div.hw_count p {
font-style: italic;
font-family: Arial;
font-size: 80px;
}
div.hw_count_separator {
display: inline-block;
vertical-align: middle;
}
div.hw_count_separator p {
font-family: Arial;
font-size: 30px;
}
<div class="hw_count"><p>1</p></div>
<div class="hw_count_separator"><p>x</p></div>
<span style=padding:20px></span> <!-- just to space examples apart -->
<div class="hw_count"><p>2</p></div>
<div class="hw_count_separator"><p>x</p></div>
The issue is I'd like the spacing between the number and the 'x' to appear similar for all digits. It clearly looks greater for the number '1' (and sometimes appears even more distinct when I change font weight/family/style).
I don't suspect there is any way to do some magical kerning given that in my example the digit and 'x' are in different divs. But, is there any simple CSS-only way to decrease the right blank space appropriately for the given font/digit?
My only solution right now would be to tweak with javascript for each digit (I likely only have to tweak for digit '1'). However, I suspect this may break if I change fonts - I'd hate to have to re-tweak.
tl;dr; probably not worth the effort in code, I'd just apply a class for that special instance or search for the element by content, in jQuery it might look like $('.hw_count p:contains("1")'); and set a special class for that.
Actual text metrics are a little elusive. Using the most precise tool we have at our disposal, canvas, even then you can only consistently get width (without a library). But, width is the same for characters that are thinner than a certain dimension (this is a characteristic of the font family). The width of "1" and "2" are the same in in the fonts I tested: Arial, Verdana, and Times: http://codepen.io/anon/pen/zrjxQM
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = '80px Arial';
var text = ctx.measureText("1");
console.log('1: ' + text.width);
text = ctx.measureText("2");
console.log('2: ' + text.width);
text = ctx.measureText("M");
console.log('M: ' + text.width);
text = ctx.measureText("10");
console.log('10: ' + text.width);
The above code yields:
1: 44.4921875
2: 44.4921875
M: 66.640625
10: 88.984375
The attributes that might help are actualBoundingBoxRight and actualBoundingBoxLeft but those are only experimentally supported in Chrome:
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics and even then, I suspect they will report the same as above.
You might also try a library like http://fabricjs.com/docs/fabric.Text.html or a pure JS solution as demonstrated here http://galacticmilk.com/journal/2011/01/html5-typographic-metrics/#measure all of which would likely report and calculate based on the same "bounding box" that exists around the characters.
You might also be able to produce an image from a canvas, then measure the actual pixels but, that's so much work for a little gain.
I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.
How do I make this text fill it vertically, so each letter is exactly 100 pixels high?
I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.
UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.
UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.
line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)
Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.
To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.
To solve this, you could use a custom font imported from a server like htttp://google.com/fonts
but not every browser does support custom fonts.
I think the only way to solve this is to use an image.
But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )
Is this ok?
http://jsfiddle.net/6z8un/4/
HTML:
<div><span>ABC</span></div>
CSS:
div {
height: 100px;
background-color: #ddd;
font-family: sans-serif;
}
span {
font-size:136px;
margin-top:-25px;
display:inline-block;
};
Use this code. I hope this can help you.
<div class="outer"><div class="inner">ABC</span></div>
.outer {
margin: 0;
padding: 0;
height: 75px;
overflow-y: hidden;
}
.inner {
font-size: 100px;
background-color: #ccc;
font-family: sans-serif;
margin-top: -18px;
}
Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.
So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose).
It is currently slightly unprecise, mostly because of caching.
I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.
Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.
For my webpage, I chose a font that works well for all the letters. However, for all numbers I'd like to use a different font.
Is there a way that I can set a CSS rule to target all the numbers on the page?
If I can't do it strictly with CSS, my first thought is to use regular expressions to surround all numbers with a span with a "numbers" class and apply a font for that class. Is there a better way to do this?
You can do it in JavaScript relatively simply by traversing the document so that you wrap any sequence of digits in a span element with a class attribute and declare font-family for it in CSS.
It’s possible in principle in pure CSS, too, though only WebKit browsers currently support this:
#font-face {
font-family: myArial;
src: local("Courier New");
unicode-range: U+30-39;
}
#font-face {
font-family: myArial;
src: local("Arial");
unicode-range: U+0-2f, U+40-10FFFF;
}
body { font-family: myArial; }
Finally, and most importantly, don’t do it. If you are dissatisfied with digits in a font, don’t use that font.
Surrounding your numbers with a <span class="number"> sounds like a good, semantically sound approach.
In fact, CSS3 doesn't offer an alternative, and I don't see anything forthcoming in CSS4. If you look at the latest CSS3 recommendation, it doesn't specify any content selector, but the old 2001 candidate recommendation was the last version to provide the :contains() pseudoclass.
This would let you match an element that contained numbers:
/* Deprecated CSS3 */
p:contains(0), p:contains("1"), p:contains("2") {
background-color: red;
}
Even if this were actually available, it matches the p, not the number, so the whole p would be styled...not what you wanted. The CSSWG is kicking around these ideas for formatting numerical content...still not what you wanted.
To apply CSS to the numbers, there is no avoiding some additional markup.
Assume there are two languages (English and Chinese) in a web page. I need to increase size of Chinese font on my web page. i don't need to change size of English fonts. only need to increase size of Chinese fonts. How could i do this ? are there any way to do this using java script or any other technology ?
Expanding on #MichaelRobinson's comment:
You should have the text marked up by using the lang attribute and then you can use the CSS attribute selector (particularly the hyphen-separated variant) or the :lang pseudo-class to select those texts, e.g.:
[lang|=en] {
font-size: 12px;
}
:lang(zh) {
font-size: 15px;
}
<h1 lang="en">English</h1>
<p lang="zh">汉语</lang>
I have not test it, but I suspect the following will work if the font families are different. Using query you can retrieve css values of an element. If you retrieve the font-family value, you should have the font name. Based on that you can determine if this element has a chinese or an english font. If the font-family is the chinese fonts, you can set font-size to be bigger.
My css has defined the font-family to cascade depending on what fonts are available:
.myfont {
text-transform: uppercase;
font-family: Calibri, Arial, sans-serif;
padding: 2em;
background-color: red;
}
and, depending on what font is rendered, I would like to adjust the padding to appropriately center the all-caps text in the <sarcasm>beautiful</sarcasm> red background. Is there a good way to calculate the size of the font descender so that I can adjust the bottom padding accordingly?
Bonus points for solutions that also calculate the ascender height, cap height, and x-height.
Thanks in advance!
This is possible: use this library: baseline ratio, or typography.js Insert two spans into a container div, with 0px font size and a large font size like 100 or 2000, call getBoundingClientRect();, get difference in height, and divide by the bigger ones height. The 0 px font lies on the baseline. This gives baseline ratio, percentage of ascender and descender.
AFAIK that's not possible with JavaScript. You may be able to find out the used font, but not the font parameters.
So you will need to search for these parameters (e.g. in font libraries) and store them by-font so that you can look them up once you know the used font.
A web dev agency called EightShapes have put together a tool that lets you generate CSS to crop away the space above and below text and so make layouts that work well around ascenders and descenders. There's an accompanying blog post about it.