I have an element with 1 line of text and I don't want it to overlap the border or start a new line. So I was considering using a limit on the length of text allowed, do all characters use an equal amount of space across browsers?
Not all letters are the same size, it is dependant on the font type. Individual settings on browsers also play a factor.
To see a list of fonts with the same size see:
http://en.wikipedia.org/wiki/Monospaced_font
and
http://en.wikipedia.org/wiki/Samples_of_monospaced_typefaces
Related
We have a number of divs on a page containing text. The text is explicitly set to a certain font-size via CSS. In some circumstances the font-size is increasing without our intervention. It seems to be related to the length of the text in the DIVs. i.e. once it gets to a particular size adding a character increases the font-size, removing it again reduces the font-size.
We haven't got any fancy libraries included to scale the font.
In chrome dev tools it shows the variation in the font set via CSS, and then the computed size here:
Why does the font go from 16px to 19.555555px? What are we missing?
thanks!
The little web application I am writing populates a temporary invisible container with some text, measures the resulting height, and then uses it to generate some guis based on that height.
This is done because, not all fonts are mon-spaced and as such need to be measured each time to determine how much space they will take up.
Now, I may need to scale the entire UI to fit a different screen size and was wondering if I can just scale the resulting height reliably.
Simply Put: Are all front glyphs guaranteed to be proportionate when scaled or can you have different glyph widths/spacing at different font sizes?
e.g. Will a font set at size 20 always be exactly 2 times the size of a font set at size 10?
EDIT: Here is another view of the test I did and posted in the comments below:
When you double font size, it is doubled exactly. But this does not mean that glyphs are scaled proportionally. The font size is simply a property of the font, not a property of glyphs. Glyphs are scaled, but the results are not and cannot be exact, due to the granularity of rendering: the abstract glyph shapes must be rasterized, i.e. converted to pixel maps, and this inevitably changes their shapes.
For example, consider the horizontal stroke of the letter “e”. The width depends on the font size, of course, but in rasterization, it needs to be mapped to one pixel, two pixels, or some other number of pixels. Even subpixel rendering does not change this; it just modifies the way rasterization works. Thus, the width of the stroke as rendered on screen (or paper) cannot exactly reflect the font size. And different strokes in a glyph will behave differently, so that an increase of font size does not mean exact magnification of a glyph.
Is there some kind of a trick to make font size take up the same amount of width regardless of which browser is used? (I use pixels for font size, but I'm not sure how relevant that is to this question.)
Normally, if I have a line of text on my site that I want to only take up one line and not drop down to a second, I have to make sure the text that I write is short enough to fit as one line within the allotted space in all the main browsers. For instance, I might write some text within a div (that also has a specified width in pixels) that comes out as one line on firefox, safari, etc., but then when I go to check ie8, for some reason with the way it is displayed, it didn't have room for that last word and dropped that word down to the beginning of a second line. I was wondering if there was some way to make the text take up the same amount of room in terms of width no matter what. Is there some kind of simple solution here that I'm missing?
As I had said, I use pixels for font size, and I've been researching using other units of measurement, but to my understanding so far, using something else such as em's for font-size wouldn't really be the answer to this since they are basically an abstraction of pixels. Even if there was a way to do it with a different unit of measurement, I'd be interested to know if there is a a solution to this that would allow me to keep pixels, since that is just my preferred unit of measurement.
Different browsers and OSs have slightly different font handling, so it is really difficult to accurately anticipate these sorts of things. What I do is write a little jQuery function that increases the size of the font in a container until just before it wraps, fitting the container and not wrapping as a result. It generally flickers on load in IE but it is not noticeable on normal browsers. You can see it in action in the links attached (check out name of the market):
http://www.hdradioalliance.com/station_guides/widget.php?id=77
http://www.hdradioalliance.com/station_guides/widget.php?id=21
http://www.hdradioalliance.com/station_guides/widget.php?id=61
Feel free to recycle the code if it fits your needs.
Edit: actually, that particular bit of code shrinks the font until its container is one line tall—rather than what I said, which is the other way around. I've done it both ways tho. Here it is:
$(document).ready(function(){
var headingSize = 1;
while($('#headingSling h1 span').height() > 34 && parseInt($('#headingSling h1 span').css('font-size').replace(/\D\./g,'')) > 10){
headingSize -= 0.01;
$('#headingSling h1 span').css('font-size', headingSize+'em');
}
});
I want to use the following character in a page:
<div>▼</div>
(it's a down arrow character). Is there a way to change its size? I'm not even sure how its initial size is determined anyway - can we apply a font size to it? Or is there some css scale attribute we can apply to it?
Or can I specify its exact width/height in pixels?
Thank you
You can use CSS to control it just like any other text.
https://developer.mozilla.org/en-US/docs/CSS/font-size
The size of the character is determined by the font family and the font size. Both of them can be set as usual in CSS, with the font-family and font-size properties (or even using old-fashioned HTML font tag). Setting font-size different from other text on the same line tends to cause uneven line spacing, but this does not matter if you are using the character in a block of its own, as the div markup suggests.
The character denoted by ▼ is not an arrow but U+25BC BLACK DOWN-POINTING TRIANGLE “▼”. Its relative size (relative to font size) varies a lot by font family, so you should primarily consider the font family choice, using a reasonable list of font families (with comparable size for this character), and only if needed consider font size too.
Just like any other font is controlled
<div style="font-size:x-large">▼</div>
The same way you control the size of any other character. Just set the font size.
I just want to know the how many "px" occupy the single " ". so that i can calculate and give the padding instead of  
It's not possible to know this accurately, because it will depend on the font's metrics and the way it's rendered. A non-breaking space is usually rendered with the same width as a regular space in the same font, it just suggests to the browser not to wrap at that point or collapse the space.
You should never rely on fonts rendering a particular way in order to line up design elements on the page. Specify distances in units that are appropriate, and don't use non-breaking spaces in situations for which they aren't suitable.
You could start with a value of, say, around 0.4em. But if you absolutely have to exactly match the width of a non-breaking space, you are using a non-breaking space incorrectly.
Depends on the font and its size. See this fiddle:
http://jsfiddle.net/hUFh4/
It completely depends on the font and font size you are using: http://jsfiddle.net/nivas/CV5mQ/
Today (2022) you can use the CSS ch unit - which is supposed to represent the width of one "character" of the current font. Some implementations have 1 ch be equal to the width of the space character, some of them have it to be equal to the width of the 0 character.
This is generally, roughly equal to ~60% of the font-size - but it can be completely different on certain (non monospace) fonts.
It depends on the font size. Even you can calculate it on Photoshop.
In html:
<p>How are you? &nbps; what are you doing?</p>
copy this from browser and paste it in photoshop:
it will look like this:
How are you? what are you doing?
Then zoom it and check the px.
If you want.