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?
Related
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.
For instance, I have 10 left-float divs which take 20% of the container width with an aspect ratio of 1:1 (made using jQuery):
width: 20%;
float: left;
http://i1214.photobucket.com/albums/cc494/Golitan11/example1_zps7a24eb88.png
Now, when I click one of them, they take 40% of the container width (without losing the aspect ratio of 1:1) and the image is changed to a Soundcloud iFrame. In this example, I clicked the second one:
http://i1214.photobucket.com/albums/cc494/Golitan11/example2_zps9b7a9f48.png
The problem is, as you can see, the floating. In fact, I would like to fill the hole on the left. I tried using a table instead of divs, but in this situation, it makes it too hard to move the s to other (even with jQuery) when the clicked is getting colspan/rowspan. Any idea?
Thanks!
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
I'm trying to create a responsive site (resize the browser window to see the changes), but I'm unable to center these checkered divs.
http://arunmahendrakar.com/ktw/play.html
The divs are dynamically created and appended to one of the four 'container' divs (#topLeft, #topRight, #bottomLeft and #bottomRight).
I have tried using margin-left:auto; and margin-right:auto on various elements, but that did not help.
Please help me horizontally center the #topLeft, #topRight, #bottomLeft and #bottomRight divs. I prefer a pure CSS solution, but if it is not do-able, I'm ok with a js tweak as well.
There are a whole bunch of different way to do this with some tweaking to the way you build that structure. Here's what I'd do:
First, size things a bit more normally; make the quadrants (#topLeft for example) width: 100% and the individual square sizes padding: 5%. This will give the squares the same size as they have currently, but the 100% width ensures that things are actually centered where you want them to be. At 200% the "center" of a quadrant will be off by 50%.
Next, instead of using float and clear, use display: inline-block on the squares. This will have them all running together on a line; your Javascript can manually break them up by inserting a <br> after every 5 squares. You'll no longer need to add the clearBoth class once you've done this.
At this point, you should have almost exactly what you want. There will, however, be some extra spacing between each row of squares. This is due to whitespace in the HTML, and to get rid of it, just set make sure the quadrants (again, #topLeft for example) have font-size: 0 set.
That ought to do it!
Explanation
It's really pretty simple: display: inline-block obeys text align. By creating your checkerboards out of inline-block elements instead of floats, you can control which side they align to by just changing out text-align.
All the other stuff is just some necessary cleanup work to make this technique work nicely.
Is it possible to keep the exact width of a <span> while changing the font-family of the text inside ? I am thinking about balancing this width with font-size or font-size-adjust because letter-spacing will not render gracefully.
I chose deliberately two very different typefaces: Times and Verdana.
Rollover the demo: http://jsbin.com/ahiba4/20
It is possible, but only using JavaScript.
Store the container's width in a variable
Change the font in the container
Set the font size so the container matches the previous width again using one of the methods shown in these questions:
How to auto resize text in fixed DIV according to the text's length?
JavaScript Scale Text to Fit in Fixed Div (this is the best one IMO)