In Adobe Illustrator (or Photoshop)
Letter A
Font-family: Arial
Font-Size: 396.55pt
Measures:
- Width: 93.8mm (266px)
- Height: 100.2mm (284px)
Measuring in Javascript:
- Width: 265px (matches, is correct)
- Height: 456px (NOT match, grabs the line height, and it is wrong)
How I can get the EXACT height of the letter?
// 6pt ---------------- 8px
// 96px --------------- 25.4mm
var arial_A_upper_pt = jQuery("#arial_A_upper_pt").html();
jQuery("#arial_A_upper").html("A");
jQuery("#arial_A_upper").css("font-size", arial_A_upper_pt + "px");
var arial_A_upper_width_on_px = jQuery("#arial_A_upper").width(); // on PX
// var arial_A_upper_width_on_mm = ((arial_A_upper_width_on_px * 25.4) / 96);
// arial_A_upper_width_on_mm = arial_A_upper_width_on_mm.toFixed(2);
jQuery("#arial_A_upper_width").html(arial_A_upper_width_on_px + "px");
var arial_A_upper_height_on_px = jQuery("#arial_A_upper").height(); // on PX
// var arial_A_upper_height_on_mm = ((arial_A_upper_height_on_px * 25.4) / 96);
// arial_A_upper_height_on_mm = arial_A_upper_height_on_mm.toFixed(2);
jQuery("#arial_A_upper_height").html(arial_A_upper_height_on_px + "px");
Example: http://jsfiddle.net/7Cunp/6/
I need this: http://www.javiscript.es/desarrollo/letrascortadas/img/letter_size.jpg
That is a question, that is not easily answered. I can pretty much guarantee that there isn't a property you can call to get the value.
First off, the data is embedded in the font-file, and is probably not accessible by JS (please correct me if i'm wrong). Second the value differs in just about every font-file.
However, you can use a little math to get a close approximation on the size.
The size of a letter is measured from the ascenders top to the descenders bottom. Also called the EM. This is both used horizontally and vertically. The size of the uppercase letters are sometimes generalized as being 2/3 of the EM.
So, since jQuery returns the height wrongly, but the width correctly.(the EM-size, not the actual width of the letter, if you measure it :D) I would do something like this:
var EM_height = jQuery("#arial_A_upper").width()
var uppercase_height = Math.floor(EM_height / 3 * 2)
JS isn't my strong side, so someone can probably tell, if there is a better way.
You can get a better value, if you know it will only be used on a specific font such as Arial.
For example. 72pt Arial measures 51.37pt on the uppercase A on my computer.
51,37/72 = 0,713472222 so that is the ratio you need to come up with. so 7/10 is probably a good suggestion.
Hope that helps a bit.
Actually you'll never get the exact results in browser as in Photoshop or Illustrator.
Every browser renders fonts in its own way. (http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari).
In your case the most closer variant will be to put the line height the same as the font size.
jQuery("#arial_A_upper").css("line-height", arial_A_upper_pt + "px");
Because browser sets by default "normal" line height that is bigger than the font size so the height is much more bigger than it should be. But even if you'll put the line-height the same as font size you'll get the bigger result then it should be. (397px)
Related
There is a bug with my design interface where the width and height of my selected div are false when rotated.
Here's a schema of what I have and another one of what I want.
I want to find the formula using Javascript, how can I possibly write it ?
PS : I already have the angle, the width and the height of the first schema, no need to calculate it again.
Width and height are not changing, when rotate the element .its also the same see the snippet .get the value via dom use with
offsetWidth
offsetHeight
var rot =document.getElementById("rot");
console.log(rot.offsetWidth,rot.offsetHeight)
#rot{
width:100px;
height:40px;
background-color:pink;
transform:rotate(30deg)
}
<div id="rot"></div>
If it is equations you need, Then here you go.
w-y*sin(theta) = x*cos(theta)
h-y*cos(theta) = x*sin(theta)
Where,
w = given width
h = given height
x = width you need
y = height you need
theta = angle
A little trigonometry goes a long way.
Solving this simultaneous equation gives me -
2x = (w+h)/(cos(theta)+sin(theta)) + (w-h)/(cos(theta)-sin(theta))
2y = (w+h)/(cos(theta)+sin(theta)) - (w-h)/(cos(theta)-sin(theta))
Feel free to convert to Math functions.
OK, so I need to create an "auto fit" feature when a button is clicked.
Pretend you have an area, which is variable in size due to the responsive nature of the page.
This area can contain a number of rectangles (specified by how many logged in clients there are).
What I need to calculate, programmatically in JavaScript, is the appropriate width and height of each client in order to "fit" them all within that area.
var area = $('.client-container').width() * $('.client-container').height();
var noOfClients = 3; // normally calculated dynamically
// Ratio (1.25:1)
var r1 = 1.25;
var r2 = 1;
How can I work out what width and height I should apply to each client rectangle?
I assume you have full freedom to resize the N clients and that their natural aspect ratio can simply reflect that of the screen. You won't always be able to make all clients the same size without wasting space. Take the square root of N, round it down, and that's your number of rows R. It's also your number of columns except that X=N-R*R clients don't fit. X is less than R. Just choose the bottom X rows and divide them into R+1 columns instead.
I'm trying to measure the exact height used to render a given string with a given font with an SVG text tag.
I've tried using getBBox and getExtentOfChar, but the height returned by both of these includes some extra space above (and sometimes below) the actual text rendered.
http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg
Using the terms in this image, I'm trying to get the either the cap height + descender height of the text being rendered. Or, if that's not possible, just the cap height. Is there a good way to calculate these values?
Here's a quick codepen showing the extra space I'm talking about:
http://codepen.io/pcorey/pen/amkGl
HTML:
<div>
<svg><text>Hello</text></svg>
<svg><text>Age</text></svg>
</div>
JS:
$(function() {
$('svg').each(function() {
var svg = $(this);
var text = svg.find('text');
var bbox = text.get(0).getBBox();
svg.get(0).setAttribute('viewBox',
[bbox.x,
bbox.y,
bbox.width,
bbox.height].join(' '));
});
});
I understand that this is a fairly font-specific thing, so this might be totally impossible...
No. All the SVG DOM methods (getBBox(), getExtentOfChar()) are defined to return the full glyph cell height. That extra space above the cap height is allowance for taller glyphs - such as accented capitals. I think this is true for HTML DOM methods as well.
There are, however, JS libraries around which may be of use. For example:
https://github.com/Pomax/fontmetrics.js
I have not used this library myself, so I can't tell you how reliable or accurate it is.
I have made a script: http://jsfiddle.net/radar24/XZgh4/ which scales the given dimension into the outer div. everything seems fine, until I enter a dimension such as 200 x 99. then the box grows outside.
I really cannot find the cause of this, can anyone help?
The problem is that you're not restricting your proportions along both axes. Your box has a height:width proportion of 5:3. If you don't restrict along both axes, you can have bleeding outside of the boxes. An example might show this best.
Take the case of the height being the bigger of the two dimensions. Your code is only restricting it along the 500px axis. Consequently, if we throw a box in there with 5: >3 proportions, you get a creeping edge.
For instance, put "3" and "5" in your boxes. Fits perfectly. Now make it 3.1 and 5. Ruh roh.
You'll need to add another if statement in each section that THEN determines if the dimension ratio goes outside this boundary. In the above case, you'll need to make it so that the height of the 5:3.1 is not 500px, but rather, the height (less than 500px) that would make 3.1 to be equal to 300px. That would be 483px.
Does that makes sense?
If not, I'll try to rephrase again:
Put another set of if statements in the two if statements you already have. These check if, upon setting the LARGER dimension, it makes the SMALLER dimension go outside the bounds of the box in that direction.
in pseudocode
if (height > width)
calculate the height
calculate the width
if (width > div.width)
width = div.width
height = div.width * aspect;
Just ask me if this isn't clear enough!
Edit: Here's a JSFiddle that gets it right. You'll need to add further code if you want a white border along each edge.
Edit2: Here's the white border come back!
Edit3: You can also try prettying it up and using just aspects to do this. I did the first one for you. Three to go!
It's a pretty small mistake. You forgot to convert the width and height to integers before comparing them. So you would need to change if (width >= height) to if (parseInt(width) >= parseInt(height)).
jQuery .val() always return a string you should parse it into integer
changed jsfiddle
....
height = parseInt($('#height').val()) || 0;// making 0 as default value.
width = parseInt($('#width').val()) || 0;
....
Is there any way via jquery or javascript to make an element stretch its height to a certain set of numbers? I mean, as it accommodates more content, its height would only follow a pattern of numbers (multiples of a number).
Let's say in multiples of 100... a div's height as it extends taller would only be in this series -- 200px, 300px, 400px, etc. Hence, if it exceeds by just even 1 pixel off 200, it would automatically resize to 300.
It's hard to explain.
I need this because I made a vertically seamless pattern with torn edges and it would totally look perfect if it shows each tile completely.
I only know basic jquery and I don't have a bit of an idea on how to work this out.
My sincerest gratitude to whoever tends to my query!
var h = $('div').height();
$('div').height( Math.ceil(h/100) * 100 );
something like:
$('element').css({ height : (0|(targetHeight + 99) / 100) * 100 });
if you want it automatic:
$(function(){
var $elem = $('#element')
$elem.css({ height : (0|($(elem).height() + 99) / 100) * 100 });
});
This function will take the current height and the unit number you want it to snap to, rounding to the nearest multipleOf.
function snapHeight(height, multipleOf) {
return multipleOf * Math.round(height / multipleOf);
}
Examples:
snapHeight(930, 100); // returns 900
snapHeight(930, 50); // returns 950
$('#element').height(snapHeight($('#element').height(), 100)); // in jQuery