I'd like to be able to increase the default font-size, but only within a certain DIV.
Obviously, this seems like exactly the sort of case that ems were meant for. My problem is I only want to increase the font-size, without affecting other things that are sized with em, like padding and margins.
This might seem like an odd use case, or perhaps I'm just "doing it wrong™". My use case here is essentially as follows:
I have a website that is displaying a chart containing tabular data. The chart can be viewed in two modes, summary mode and full mode. Summary mode shows a smaller version of the chart, with many data omitted. The "full" version shows everything, and takes up almost the width of the browser window.
I'd like to be able to use the same style sheet for both versions. But the "full" version should probably have a larger font-size. However, the "full" version (and just about every module aligned on the left side of the screen) has a certain left padding, which keeps all text aligned the same distance from the left edge of the screen.
If I wrap the "full" version chart in a DIV that simply increases the base em, it will also increase the padding, thus making the data in the chart not left-aligned with everything else on the screen.
So...
What are some solutions to increase the font-size without increasing padding?
Am I "doing this wrong" somehow - is it a mistake to use em units for things like padding or margins?
Use rem instead of em for paddings for example in your case, as it is not affected by the changes of other elements in the page, as it is based on the root font-size of your page (html if I remember well).
Good reading here : https://j.eremy.net/confused-about-rem-and-em/
Related
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
One of the specs for Web accessibility level AA that is text can be resized to 200% without loss of content or function.
So if I zoom up to 200%, everything needs to look right.
How can I achieve that regarding the font size?
The issue is not so much a matter of font size or font size units, since most common browsers have a built-in zoom function that will zoom any text, regardless of the font size unit. The issue is that resizing may result in text containers that start to overlap, which then causes some content or functionality to become invisible (because it ends up behind something else). Success criterion 1.4.4 was written when zooming functionality was not yet as widespread as today. (In 2008, there were several browsers that supported zooming, but many people were still using older browsers that didn't support zooming, and text resizing—which is not quite the same as zooming—could cause overlap in web content.)
So, while using units such as em, %, rem etc. is a good idea, you need to make sure that text containers (such as section elements, nav, etc.) that are displayed next to each other don't overlap when you zoom in to 200% or resize text up to 200%. For example, you can describe column width using units such as % or em, or you can make sure that text containers that are next to each other at the default size end up below each other when zoomed in. If you use responsive design to make your web pages adapt to different screen sizes, you should also be able to handle zooming in desktop browsers.
You should try using em instead of px..
For example if you have div inside yourbody - suppose the font-size of the body of the page is set to 16px.
If the font-size you want in div section is 12px, then you should specify 0.75em (because 12/16 = 0.75).
You should try use "rem" (support most of the browsers).
Then you set the font-size of the root ( the html).and all the page reasize for example if you want the "h1" be always 2 times the body ,set it to 2rem;
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'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'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.