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.
Related
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've been using px for almost all the measurement related styling, but I wanted to know the best places for the use of pixels (px), percentage (%), points (pt) and em.
I've seen the use of em and (I believe) points in typography, but I don't know the best way to use them.
Where should either be used, and why?
pt or cm, in, mm etc. are most used for print stylesheets, as they're most fit for measurements on the physical properties of paper sheets, and the render of printers.
em and en (and the new rem, and more interesting units such as ch) are glyph relative units, and as such are suitable for text styling, in correspondence with absolute units at the root element (e.g. px units at the body).
another interesting uses: ex units (the height of the 'x' glyph in the font) to set vertical measures in relation to text, ch to indent lines.
px are absolutely rendered so one can design a pixel-perfect (or fixed) layout based on these units, applied for containers, or on various widgets demanding fixed size (buttons and the like). disclaimer: absolutely is an over-statement, as pixels are rarely absolute, and has many factors affecting the rendered outcome - see this article about px as an angular measure.
% are mostly used in conjunction with an absolute unit at the top container, and are applied in various CSS techniques, such as the faux centered container. these units are also very handy for layouts that are fluid by nature. others, like the viewport relative vh, vw and vmin, may be used regardless of the parent's units.
all of the above is based on my personal views, as this subject is open for debate, and CSS techniques will keep evolve and we'll see more uses of the specifications and capabilities we had never thought of. it's mostly the creative use of those tools that scopes or favors the use of one unit over another.
It used to be that these distinctions mattered: for example, back in the IE6 days, you should never set your text using px, because then it couldn't be zoomed. That is, back in the day, browsers actually treated px as a number of pixels.
These days, browsers have conformed to web reality: most people use px everywhere, for almost everything. Thus px is now defined as an angular measurement, which essentially means that px behaves just fine in any zoom setting and on any size or DPI device.
Similarly, as part of conforming to web reality, all other units are defined in terms of px, so there is really no reason to use them unless it happens to be more convenient for your case. The only exception is, of course, percentages, since they allow you to specify values in relation to parents' measurements.
Details from the spec:
in, cm, mm, pt, and pc are all defined relative to px, since in practice all devices follow "For a CSS device, these dimensions are ... anchored ... (ii) by relating the pixel unit to the reference pixel." And as discussed, the "reference pixel" is an angular measurement that varies depending on DPI settings, screen size, zoom level, device type and so on.
1em equals the computed font-size of an element, which is usually defined in px. If that size itself is defined in ems or exs, the browser then looks upward until it finds a px to be relative to, eventually falling back to the default font-size (usually 12px).
1ex equals the height of the letter "x" in the defined font-size if possible, but usually (?) falls back to 0.5em.
Use px for elements that are of a set size.
Use percentage when you need the element to be in proportion to the window size or parent element size.
em is the standard for text, it adjust according to screen size on a mac. Make it a habit, there's plenty of good blogs on why to use em, em is not just for font properties it also comes in handy with other elements like div, inputs etc. There may be consequences when using px for font size, there's also situations where px and % will be more ideal, it' takes trial & error to understand fully.
There are no real rule on what to use it's all according to the desired effect. As you create you will test your site in different resolutions and adjust the browser size to see how it appears from a variety of users points of view.
Consider cross browser compatibility & resolution with em,
Consider resolution with percentages,
Disclosure: I am a sysadmin, not a web designer.
I generally use em for padding around images, so as to keep the padding sized according to the text it keeps away from the image.
I use % to handle liquid/fluid layouts sometimes, though most often a fluid layout will just be 100% of the browser but with fixed width (px) columns.
I use px to handle column widths, headers, etc. The height and width attributes of an <img> tag are of course in pixels by default, and an image will render best if you don't ask the browser to resize it from its native/original resolution. In some cases, you need to use px on fonts, when the font has to work with an image (i.e. a spanner icon next to the word "Tools"). If possible, I always use UTF-8 fonts instead of images.
All major browsers today use page zoom by default, as opposed to "text size". "text size" options are still there, but they are a bit more hidden [especially in Chrome and Firefox]. Given this fact, is there still a reason why EMs are advantageous over PX or %? Why?
Most browsers indeed are capable of sizing pixels, and Zoom is now the more popular way which works well across browser - there is even a very simple fix the old IE6 behaviour of not being able to 'text size' (declare the original body size as a percentage - 100% will do - then fire away with pixels)
Remember too that if a user so desires, or needs to, they can set their own minimum pixel size so if they're basing their defaults on pixels why go through the nightmare of calculations..
IMHO pixels are perfect for text and borders (who needs to size a border lol..), always have been really.
em and percentage really are the same thing well they work identically, and their inheritance can be an absolute nightmare.. em's are great for widths and heights for a bit of fluidity
So no, I don't think we should still use them for text.. not that I ever did ;)
Even with the page-zoom feature turned off, most major browsers these days are capable of resizing text in px units. I think it was IE6 and under that was not capable of resizing px-based text.
I prefer specifying sizes in px just because I think it's easier than working off "relative" sizes.
I'm displaying some tabular data on my website so I decided to use some tables. Is it a best practice to use fixed width for your table columns (i.e., 100px) or to use percentage based widths?
I would not recomment fixed widths, as the browsers text size may be different.
The correct thing is to do nothing at all! Leave the table to size itself. Forcing the table to be 100% wide is an option, but can leave alot of whitespace.
How big will the table be on my mobile phone, TV set or desktop PC? The more you force a layout the worse it looks on unexpected platforms.
I agree with Quigley, however the "right" approach depends very much on your specific context. If you have to just display plain data on a website, basically just printing out HTML formatted data, I would also leave the table as it is. What you should do is to set it's width to 100% s.t. it expands on the whole width of the page. If it resides inside another container (such as div or other tag), it will expand to the width of that container.
If however you want to have your table just expand to a certain width, I would go for percent values instead of fixed tables, mainly because of the fact that your users will have different display sizes and resolution and therefore the according browser window with may vary. In such a case I would however consider attributes such as min-width that specifies the minimum width that your table will get. The attribute works perfectly on Firefox, Safari etc.. however on IE (as usual) you have to do a trick to achieve min-width by adding something like the following to your CSS class (which you add to the enclosing container of your HTML table or to the table itself):
width: expression( this.scrollWidth < 70 ? "70px" : "auto" );
This is just an example that specifies a minimum width of 70px, otherwise it doesn't set any width. You can customize it to your needs.
Fixed pixel widths are definitely the worst option. Percentages are much better. If you want to define column widths relative to other elements on your page, the best option is to use CSS and a unit like em that is relative to the text size.
For tabular data, I think relative (percentage) should be good.
But if u feel screen size may screw up your tables, go for the fixed approach.
I use(d) proportional widths extensively with HTML that has to work in browsers and CSS2XSLFO.
However Firefox 3.x has removed support for PCW widths in table columns.
See https://bugzilla.mozilla.org/show_bug.cgi?id=333352
So you'll have to use % widths.
I never use fixed widths (such as 50px), however I do use em or ex units in addition to pcw or percentage widths.
In regards to DeadAccount's answer, don't use W3Schools, they have a habit of having half-correct information.
http://w3fools.com/
Also, I'm pretty sure best practice is making a percentage instead of a fixed width, because as others said fixed will mess up in other browsers if they're using different settings than yours. Best practice could just be to leave it alone, however.