Is there a convention for the order of (height, width) in function arguments or when displaying dimensions?
I don't know a huge number of languages, but what I have used go with (width, height). It's more fitting along the lines of (x, y) coordinates.
I'd say (width, height) is overwhelmingly more common. It never hurts to make it explicit though (through argument naming, etc)
I don’t know if there is a convention elsewhere but personally I always use the convention used by graphics (usually even outside of computing, e.g. in photography): width before height.
The (width, height) seems to be more common all around.
it is exactly width-height
In the door and up the stairs. That's the mnemonic I was taught for map co-ordinates.
Display resolution is also normally quoted in "width × height".
Wikipedia link to Display Resolution
Related
I'm doing some graphics (in Javascript, if that's relevant), and I know you can size fonts with pt, px, %, etc. When looking up what px means, every site seems to have the same vague answer -- the size of the font in pixels. I'm wondering what exactly px represents. For example, if I have 20px, will 20 pixels represent the height of a capital A, a small e, a lowercase g or the difference between the bottom of the g and the top of the A? (I'm assuming it's the size of the A, but I just want to double check).
Furthermore, px is apparently relative to the view size. So if I do a fillRect(1,1,20,20), will this be the size of a capital A at 20px, or does the font size change on different devices independent of the graphics?
For example, if I have 20px, will 20 pixels represent the height of a
capital A, a small e, a lowercase g or the difference between the
bottom of the g and the top of the A?
None of them. It represent an abstract object called the "em-square". The height of capitals, the width of the glyphs, and various other measures of the glyphs are then defined in each font as proportional to the em-square. But often, none of the measures you see is exactly equal to 1 em-square size, or in your case, equal to 20px.
per http://www.unitconversion.org/typography/pixels-x-to-centimeters-conversion.html
10 pixels are 0.264583333 CM.
other than that, it can very depending on your font and the display resolution of the screen.
No, the size of one pixel px is not officially defined in a technical way.
Although I cannot tell you who exactly defines the value, if it's the pc-manufacturer or who it is and whether w3 guidelines tell these specifying parties to measure it from a certain distance depending on screen size, But the most specific and most helpful description of the "magic" px unit is
1 px equals the smallest width to make a line visible on the specific device.
given that the watching user stands at a device relative reasonable distance.
(see Official w3 Info about the px unit).
When coding width for responsive, is it preferable to round off the value or specify the value as close as possible?
For example:
Base on my calculation my width is 67.328699%(left div) and 32.84%(right div)
or should I just round it off to
67%(left div) and 33%(right div)
which will add up to 100%?
Thanks for the help.
It's a good question, But I think there is no matter, because in small screens the percentage you round is very very small. But looking at the most famous responsive design of twitter bootstrap HERE they don't round up the values.
I suggest you too look at bootstrap's grid system it will help you a lot in designing responsive pages.
There are two ways to look at this. First, due to the nature of foating point arithmetic, you're probably not going to get an EXACT number, so rounding isn't going to break anything. You're never going to be exactly right anyway. Smarter people have written about this point: https://docs.python.org/2/tutorial/floatingpoint.html
Second, think about what the number actually 67.328699% means. you're trying to accurately define a size down to a millionth of a percent, or in other words a hundred millionth of your entire screen width. How much are you actually gaining by doing that?
Also, because of the limitations of floating point math, it's likely that if you make the widths sum to an exact 100%, when the user changes the screen width or sometimes simply with other resolutions, you're going to have the divs jumping. Sometimes they will be on the same line, sometimes they will not. I suggest you have them add up to slightly less than 100%.
edit: on another note, I would have a discussion with your designer and ask why they made such odd proportions. They should make designs around technology. Your job isn't to force the technology to fit a design.
Using 2 decimals would be fine, but keep in mind the box-model when you set the percentages(it's a good idea to always use box-sizing:border-box)
I would specify it rounded off, personally.
But if you are creating a responsive muti-column layout, I would suggest using a grid system like bootstrap
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.
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.
I'm trying to position individual characters precisely in HTML5 using position: absolute.
I've tried specifying the position in % and em, but every browser handles the decimals differently, and depending on the zoom level, the output doesn't look great.
e.g. 12.005% and 3.003em may or may not use the decimal portion, depending on the zoom level and size relative the parent.
Does anyone have any ideas on how to solve this problem across chrome/firefox? IE 9 would be nice as well.
I think the problem is that you are using fluid measurements (% and em) to handle positioning.
If you want your position to be the same (mostly) across browsers and screen sizes, then you need to use pixels.
BTW: you should design for the standard 100% zoom level. Everything else is too unpredictable.