I'm building a phonegap app for IOS, and I have one <p> tag who's contents must be exactly one line across.
These elements have the full width of the device minus a little outer padding. What I want is for the text to scale to as large a font-size as possible without wrapping to next line, without being cutoff by ellipsis or being clipped, or overflowing.
So far I can accomplish this by precisely setting the font-size (which can be done - there are only about 10 devices to think about), but I'd rather have IOS UIWeview display figure it out for me.
Is it possible to achieve this with CSS?
With CSS only, you can achieve this using Viewport Units by setting the font-size to fill up the space, but now with the text size responsive based on the viewport's width.
p {
font-size: 7vw; //set to the preferred size based on length of text
}
Here is a simple demo using vw units: https://jsfiddle.net/gmattucc/mh3rsr0o/
You would have to check if vw, vh units are supported in the device you are targeting: http://caniuse.com/#feat=viewport-units
You might also want to check out this article to learn more: https://css-tricks.com/viewport-sized-typography/
Related
I have tried different plugins and tutorials, but the problems is usually that they only adjust to the width of the div and/or that the div has size set in pixels and not responsive. But I want the text to always fill and fit the div and adjust the text based on text length and height/width of view, so that there is as little white spaces as possible. I have set the div to 100% both in height and width to fill the view. Anyone found a way to do this? Is it doable in just CSS, or do I need JS as well? Either a plugin, tutorial some guidance would be helpful.
A common way I've 'scaled' text is by just setting the size based on vh or vw. If your div width is based on view width, then you can guarantee that the text will always look the same across resolutions.
.text{
font-size: 0.1vw;
}
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;
After a 30 minutes searching in Stack Overflow i could not find a solution to my problem, so here is it:
I have a static blog, and it's almost 99% responsive. The problem comes with a larger titles with wider words (like "documentfragments", in my case), they make a horizontal scrollbar in screens with a width below 400px.
Here the example:
As you can see, the width is (in that specific case), 320px and the header breaks the layout.
Im not a specialist in stylesheets, i'm learning but whatever i do (adjust the width, font size, etc) i cant give a solution to the problem.
Any idea?
You have a few options here.
1. Make the font-size smaller.
You could reduce the font-size to something that is not likely to result in overflowing text.
2. Hyphen-Wrap your words
Using CSS you can set your element to hyphenate your words so they wrap when they run out of space. Just add word-wrap: break-word to the element in your css.
3. Use Javascript
You could write some javascript that calculates the width that it needs to fit into, then alter the font-size appropriately.
I'm building a responsive website and I'm wondering what unit I should use? I've seen a lot of sites using pixels (px) for measurements and I've seen some using percent (%). Is there a preferred — or right — way of doing responsive design?
I've found percent to be hard to use, since it makes calculations hard and I've ended up with values like 2.754% and so on when setting widths/margins etc. Pixels seems easier, it's just simple addition and subtraction, but I've read that it isn't "future proof" or something like that and wont scale properly if the user zooms in the browser window. Is that still true?
If you have any experience or expertise, please share! I would love to hear what you guys have to say!
Thanks!
For layout type things like the sizes of boxes, you want to use % because you will typically have several columns sized as a percentage of their parent that will stack on top of each other at a certain breakpoint (width:100%). No other unit will allow you to fill 100% of the space like % does.
For padding/margins use em, normally you will want to space your elements out relative to the size of your text. With em (the with of an 'M' character) you can quite easily say I want approximately 1 character spacing here.
For borders you can use px or em, there is a difference though. If you want your border to look like it's one pixel wide on all devices, use 1px. It may not be one pixel on all devices however, high density displays convert 1px into 2px for example. If you want your border to be a size based on your font, use em.
For fonts use em (or %), the use of em carries through parents to children and it just a nicer unit to work with over px.
Of course you must use percentage. But with the min-height, max-height, min-width, max-width CSS keys.
For the next generation
vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.
For responsiveness they are going to be the new units.
Use percentages along with min-width and max-width in pixels. This stops percentages making your divs too small or too large. eg
div {
width:100%; //full width of browser
max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}
For layouts vh and vw are good because they are relative to the device's view port. They give you the possibility of designing with the view port of the device in mind. With this said you know what will show on the window and what won't without being too careful.
For text em is best because if it's responsive features.
I'm designing a website and using jquery UI majorly for the icons/icon-classes it provides.
While testing in chrome what I see the default height of a span element which wraps some text without padding or border gets a height of 20 px.
I understand it will differ with the type of font and size, the defaults and the browser. Is there anyway I can set height of a text to a given size?
If I understand correctly, it seems your facing this problem because of the way different browsers render fonts.
If you font sizes are influencing their parent elements size, then you may need to rethink how you are using margins and padding's.
EDIT
You could use line-height to try and tame the behavior.