I'm trying to scale text in a WinJS app so that the font size increases with the screen size. So far I use
<div style="height: 5vh;">
<div data-win-control="WinJS.UI.ViewBox">
<h1 data-win-bind="textContent:title"></h1>
</div>
</div>
This correctly scales up the size of the text on different resolutions but it also performs a translate on the text and moves it to the center of the containing div when I want it to stay left aligned. The h1 has position:absolute, but even explicitly setting that to left:0 doesn't work, it appears the translate always has a higher importance. Has anyone come across this before? The translate is applied directly to the h1 element in this instance, and there is no margin or padding on the parent elements as well as having text-align:left set
Thanks
Read here, I think this is what you want: http://www.maxdesign.com.au/articles/em/
"The browser scaling feature is achieved using some simple javascript that retrieves the width of the browser, divides that by the optimal line length"
Related
If I do
<div style="display: inline-block;">Some text</div>
The div dimension fits closely the rectangle the text fits in, but not exactly:
More precisely, it fits perfectly horizontally, but not vertically. And the height will be the same wether the text is "A", "..." or "ppp", while the space used by the text changes. Is there a css property that would behave like inline block, but treat the text as a more floating element and have the smallest height that can contain the current text? Like (photoshoped):
No, there isn't.
To make that happen, and since every font has its own inner white space and renders different on different browsers, you need to measure a particular font's size and "cut" of the rest.
One way could be cloning the element and draw it on a canvas and the count colored pixels from top/bottom to get its exact height.
Further reading about fonts: http://www.freetype.org/freetype2/docs/glyphs/
I know that vertical alignment is an age-old issue and I don't want to beat a dead horse. But I feel like I've spent hours reading all of the clarifications and hacks, as well as what's supposed to work now with HTML5/CSS3 via flex box model, yet I have tried them all and still cannot solve this particular case:
<div style="border: 1px solid black; width:50%; height:50%; margin:auto;">
Notice when you resize your browser window, the div is always 50% the height and width of the browser window, and is always horizontally centered in the browser window. What I need is to get/keep it vertically centered as well. Is there absolutely any way, given that the div itself and the enclosing div are both of non-fixed (and unpredictable) heights?
Please note the goal usage here is to have this div inside another div, however the my example here puts it merely inside the body in order to best illustrate/simplify/test the results given an arbitrary size of both the enclosing and inner divs via realtime window resizing.
Use flexboxes, specfically the align-self property. Since you're using relative sizes its parent element will need to have some height one way or another, e.g. via min-height:100vh, otherwise it will have no height that its content could align itself to. A body element by default only is as tall as its content, not as tall as the viewport.
I'm trying to get an div with its display property set to inline (or inline-block if I want a margin) to behave correctly in IE (it does in most others).
My situation is this - imagine a workspace in which an item container contains inline items laid out in a horizontal fashion. These items can hold things like text, or images, but also be composite types, say for example a 'fraction', whose numerator and denominator are themselves item containers, containing more horizontal items.
So for example, I might have the HTML:
<div class='item-container'>
<div id='statictext' class='item'>x = </div>
<div id='fraction' class='item'>
<div id='numerator' class='item-container'>...</div>
<hr/>
<div id='denominator' class='item-container'>...</div>
</div>
</div>
Clearly, I don't want fixed width or height for an item or item-container, because they can contain nested content which will increase the amount of space needed (e.g. imagine an fraction inside another fraction), and similarly if I want the width of a static text 'item' to be just big enough to contain the text on one line, i.e. inline.
The problem I think is that it's hard to avoid putting block elements inside my inline 'item'/'item-container' elements, for example the <hr> in the fraction, or if I want say a menu bar at the top of an 'item' that uses the whole width after the width of the rest of the item's contents has been calculated.
I know it's invalid syntax to put an actual block item inside an inline one, although setting the block element's display attribute to inline or inline-block makes things behave correctly in Firefox/Chrome at least. But alas, not in IE.
Is there an adequate fix?
EDIT: I actually used inline-block (with the appropriate IE hack) for 'item' and 'item-container' to get it to work spiffingly in Firefox et al, but IE still treats them as inline, which then subsequently gets converted into block because one of its children is a block.
Don’t use <hr>. You can draw a line using text-decoration: underline or using a bottom border or using an image (say, a one-pixel image stretched to the desired width). Then you can work with inline elements.
OK so my brain is just probably not working tonight. What I'm trying to accomplish is a two column layout where one column scrolls and the other is fixed. The fixed column has a very large background image in it that I would like to be able to scale to the size of the screen. Additionally the left (fixed) column's width would have to scale to accommodate the background image. The best way to really explain this is with a picture:
The highlighted area with the arrow in it will scroll and the other column with the picture and twitter status in it would remain fixed. My problem does not come into play with the fixed CSS positioning. My issue is with scaling my columns based on screen size so that the picture always remains in the proportion it's shown here both in it's own dimensions and those of the other column. That's what I'm stuck on. Any ideas? I really appreciate the help.
I think you can just use an image element in your first column and set it to take 100% of its parent. If the parent div is also a percentage then its size will change of course and that also scales the image within. If we want the image to scale, then we can't also specify a height.
<div id="parent" style="width: 40%">
<img id="child" style="width: 100%" src="http://i.stack.imgur.com/lvvrv.png" alt="Fake Background" />
</div>
Check your JS FIDDLE CODE HERE : http://jsfiddle.net/4P9fJ/7/
Since you din't mention you'd be changing the images in your background i provided the background image in the body tag .
I have one big image as a background to my webpage. The image contains a box inside the image itself. How would I place text on that background image such that it should fit in the box, and shrink or resize accordingly (in other resolutions when the background resizes)?
If you're looking to resize the "box" containing the text, you should be able to set the dimensions of the element to percentage-based width and height values with CSS.
If you want to resize the text inside the element, then you might want to consider using JavaScript (perhaps jQuery) to poll the size of the window at set intervals and adjust the text size based on the new window dimensions.
Edit: To clarify, you should be able to set the dimensions of the text box (probably a div) to be a percentage of the page. For example, the div containing the text could be 80% of the window width and 80% of its height. You can then set the margin to be "auto". This should cause the margin around the box and the dimensions to be proportional to the window width.
Example:
<style type="text/css">
div#box {
height: 80%;
width: 80%;
margin: auto;
}
</style>
<div id="box">Text goes here.</div>
This will cause the "box" div to be centered horizontally on the page, but vertical centering is a bit trickier. You'll probably want to look at this page to figure out how to center it vertically to stay within the box in the background.
As suggested by the other individual, you could also make the box background just the background of the text's container and not the entire page background. This might be a bit easier, but I think you will still need to use the percentage-based width and height attributes and auto margin to center it nicely.
For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.
Try making an example at http://www.jsfiddle.net so people better see what you're describing.
UPDATE
Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.
To do this, get your <div> (or container element) and check its .scrollHeight and .clientHeight properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the .style.fontSize property.
An untested example of what I'm describing is like this:
myDiv = $('containerElement'); // Get container object using its ID
size = 50; // Start with 50px font size
while(myDiv.scrollHeight > myDiv.clientHeight) {
// Decrement font size until scroll is less than client
myDiv.style.fontSize = (size - 1) + 'px';
}
You'll have to do a little legwork on this to get it to work how you like. Things to note:
I used the dollar function to get an object, you can google it for more info
Your container must have defined dimensions for .clientHeight to find
You may need to try .offsetHeight instead of .clientHeight
If you're just looking to control overflow, you can use CSS:
overflow-x:hidden or scroll or auto, overflow-y is the same
white-space:nowrap will prevent auto text wrapping
But, once again, my answer is vague since it's not clear (with code) what you're asking.
The problem with your solution is that it is very unscalable, not friendly to different browsers and will cause more problems as your website expands.
Try separating the box from the other bg image and use the box image as a background for the div you have the text in.