I'm trying to force text to fill a div, while div height and width and unknown. The text size should be flexible, depending on parent. I want to archieve something like this:
The page is mobile only, so I need to support all android/iphone browsers. The main problem is that each mobile browser support different things and it's hard to get such thing working on most* devices.
I tried setting meta viewport width="640" - it's working well on the newest major browser but all lower browser have their own realisation and it's breaking.
The next thing which came to my mind is using viewport units, but their support is bad too (http://caniuse.com/viewport-units)
I came up with the following code for the font-size:
var ratio = parent.offsetWidth * 85/100 / text.offsetWidth - 0.3;
text.style.fontSize = (10 * ratio > 85 ? 85 : 10 * ratio) + "px";
but still it's not that precise and vectical centering is still a mistery.
Maybe setting font-size dynamically is the right way to achieve this. But rather than width, you can consider using height as ratio. So calculating div's height is probably ineluctable.
For vertical alignment, there are several solutions:
Wrap text in a span. And set the span's display to inline-block. Add to the span a pseudo element of which the height is 100%. Set vertical-align: middleto both span and pseudo element, as described here. Make sure that you set the parent div's height, using Javascript if necessary.
Set the line-height to the same as the div's height.
Set both parent div and children span's height, and display: block; margin: auto
Related
I need to fit variable amounts of text into rectangle divs of variable sizes, which are themselves responsive (using vw/vh).
There are hundreds of divs which all have a different size, and I don't know it in advance: it is calculated from original dimensions in centimeters, in order to keep their aspect ratio. Each div has text inside, which should fit to the container (not perfectly, just no overflow). Usually there is a lot of text overflowing, but I can't have a scrollbar, the text should fit the container.
A few things to keep in mind:
the divs aspect ratio must be preserved
linebreaks of the text must be preserved
it does not matter if the text is too small to be legible
So far I've tried to adapt the font-size with viewport units. The problem is that the font-size will be different for each div. I would need some equation to calculate the font size based on the amount of text and/or size of the container.
Here are a few examples: https://codepen.io/gramm/pen/VJPavg
div#tm12901 {
width: 15.952380952380954vh;
height: 50vh;
font-size: 0.8vh;
line-height: 1.5;
background: Pink;
}
I've also tried to detect overflow, but so far with no success (it's probably easy to do and I just don't have the js knowledge).
Another example: https://codepen.io/gramm/pen/MMJpdb
//trying to detect overflow
$('.text').each(function(){
if($(this).clientHeight < $(this).scrollHeight){
console.log('overflow detected!');
}
});
Is there a better method: calculate font-size, or detect overflow? And do you have any pointers to help with either method?
For the detect-overflow method, would it be a problem that the divs will change size each time the window is resized?
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
I am trying to draw a spotlight on some page elements during a user interface tutorial (see CSS3 spotlight effect using a rounded rectangle with gradients).
For example, here's the navbar:
and spotlighted (rest of the page is dimmed out):
However, one of the elements on my page is giving me trouble. Here's it's positioning in Chrome:
However, jQuery thinks it is 330px by 60px:
> var blah = $('.user-list')
[
<div class="well well-skinny user-list">…</div>
]
> blah.height()
60
> blah.width()
330
This results in a spotlight that is too small when it is drawn:
The weird thing is, there are lots of other elements on the page (like the navbar) whose sizes are calculated correctly, and the spotlight shows them properly.
What is up with this element that causes jQuery to show an incorrect height and width? Some additional information:
The entire page is on border-box sizing except for input elements, which don't play well with bootstrap.
There is 9px padding on all sides with a 1px border, which makes up for the size discrepancy, however there are many other elements with border/padding where the size calculation works properly, and this is the only element that is weird. For example, the bootstrap navbar shown above has 20px of padding on the left and right sides, but the width is calculated correctly.
Width is poorly explained in many places, however, it is more properly defined as the width of the "context box". More information, here.
A css width of an element is (according to box-sizing css property)
if(it is border-box)
css width = element content width + padding + border
if ( it is padding-box)
css width = element content width + padding
If(It is content-box , which is by default)
css width = element content width
and so for height
jQuery .width() always give the element content width.
If you want elements width and height with padding you can use .innerWidth() and innerHeight() method.
If you want include border size than use .outerWidth() and .outerHeight()
I am adding element dynamically to DOM.
$('<div class="entry"></div>').text(data.status).appendTo(app.twitter_feed);
I want to get element height before it is added to DOM. The usual approach is to add the element within a hidden element with the same style and then simply see what is the height.
Though, is it imposible to calculate element height if you know container's width, padding and line-height (content is only plain-text) and content?
How the content wraps inside a container may depend on browser and zoom level, so unless you're very sure the content will never wrap, I would advise determining the height the way you have described.
If your text font is mono-sized-font, yes you can calculate it with formula [(text-length/(width/char-width))], but I'm sure you are not using mono-sized-font like courier, monospace etc.
Answer is this : there is no way to do this with multi-sized-fonts, me sorry.