Always same line-height? - javascript

Is there any solution that the height between two lines are always the same?
I mean that text with font size 14px and font size 19px have the same distance.
In the attachted picture you can see an example.

Yup, CSS line-height. See MDN.
E.g.:
.big {
font-size: 19px;
line-height: 19px;
}
.small {
font-size: 14px;
line-height: 19px;
}

A better solution for keeping line height consistent would be to style the body tag with your desired heights. **Note as a rule of thumb you should only be using pt and em in sizing your font/leading (leading is the typography term for line height)
body{
font-size: Xem;
line-height: Yem;
}
Then when you have certain sections that need different leading values you can style them with a class like CSS is suppose to be used.
.tightStory{
font-size: Xem;
line-height: Xem;
}
.looseStory{
font-size: Xem;
line-height: Zem;
}
Hope this helps

You can set line-height to a specific value, even in pixels, e.g. * { line-height: 21px }, though this is very rigid and tends to cause problems sooner or later. For texts in, say, font sizes of 14px and 19px, you should really use different line heights. If you explain why you would want to use the same line height, there might be a good solution to the original problem.
Setting line height does not set consistent spacing as in your image, which shows the distance between the baseline of text and the uppercase top line of the next line. Line height is the distance between baselines of text. The visual empty space between lines varies by font and by characters (think about lines containing letters like a, x, s only versus lines containing loads of characters like Ê, Å, g, Q). The uppercase top line, i.e. the maximum level of uppercase letters without diacritics, varies a lot by font.

Related

How to use kerning between two fonts in CSS?

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.

Div text vertical padding

I've noticed that as fonts get larger and larger, the vertical padding in a div element above and below the text grows larger. Is there anyway quick way to prevent this? Is this font dependent?
I'm attempting to create a word cloud, but these vertical spacings are proving to be quite annoying.
Here is an example:
You can use the line-height style rule to change the amount of space around the text
Setting the line-height is your answer but I would recommend the em unit and setting the line-height to 1em for all font sizes in your tag cloud. I always use em's to represent line-height because regardless of whether the font is set by pixels, ems, or some other unit, line-height is always relative to the size of the font.
According the the W3C specification for line-height
A value of 'normal' sets the 'line-height' to a reasonable value for
the element's font. It is suggested that UAs set the 'normal' value to
be a number in the range of 1.0 to 1.2.
This means the font size can vary but the vertical height of the fonts will always remain consistent and relative to the corresponding size.
Try in your css:
line-height: 20px;
You could research for some already done word clouds.
Or just put classes to the different sizes, and so you can put negative padding to the bigger sized words.
.span bigger {
font-size:2 em;
padding: -4px;
}
.span big {
font-size:1.5 em;
padding: -2px;
}
.span small {
font-size:0.9 em;
padding: 0;
}
Hope it helped or at least gave you some cool ideas! ;)

How do I vertically fill a container with uppercase text using JS/CSS?

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.

Different fonts inside a label

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...

How to calculate descender height in javascript?

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.

Categories

Resources