I want to pull a dynamic content, which consists of a long text input with some images, into a div with a fixed width (300px) and height (1000px), the challenge is I cannot use overflow: auto in css when the content's length is exceeding the div's height (1000px), instead, I am asked to split the long content into pages with a pagination.
Is it possible to achieve with PHP or do I have to use javascript (jquery)?
I was thinking to count the number of characters and splitting them, but it doesn't seem correct when the content comes with different sizes of images...
Any ideas??
This might be very complicated(I'd like to say "impossible") to do it on the serverside, because there are too many clientside effects that can't be calculated(browser-default-settings for margins, paddings, line-height, font-size and user-setting for zooming), I would prefer to do this on clientside.
I made a little example using jQuery: http://jsfiddle.net/doktormolle/XwUuA/
It takes the childnodes of the target-element, and wraps them into new elements which have the same dimensions like the target-element(as long as the height of the wrapper does'nt exceed the height of the target-element).
Maybe it's useful to you(It's a draft, of course there still has to be worked on it to match your needs)
You could use PHP. Find out how many characters you can get per line, and how many lines of characters will fit in your div. Then, with PHP, count characters, divide by characters/line, then you'll have how many lines your text will take up. Then you can use getimagesize() to get an images dimensions, and go from there.
See the PHP function for more info.
I wanted to do something similar with HTML but in a C# Windows Forms application.
What I wanted to do was to generate some contents based on some database tables and send them out to the printer. The contents had to fit into A4 papers.
After lots of trial and error I measured the maximum size of the contents based on their size, place etc. and wrote the numbers in the CSS portion of my HTML.
With that I could get a nice result. Still some slight errors on some inputs, but that worked for me!
Related
I am trying different methods to turn an image into divs that represent each pixel.
One method has been using php imagecolorat to create divs with a background-color which works well.
However what if I had thousands of divs width:1px;height:1px; each with the same css background-image with incremented background position?
What performance hit would this have? Ie: does the browser draw the entire image many times or only the section that is visible as the background? Note the original image is several hundred kb.
Thanks
Only the section of the image should be drawn, however the drawing operation will be called as many times as the amount of pixels, so that will be a performance hit. Did you try writing any test code and measuring how it works?
Thousands of divs will hurt your performance no matter what, because the browser has to parse each div, add it to the DOM, then render it.
The actual performance will be different on different browsers. Only the part of the image being requested will be drawn, but the rendering function that draws the image will be called for EVERY div. It's more or less whether the specific browser's implementation can render one pixel of an image faster or parse a string and print the image. If the browser has the image in-memory, the difference might be moot. But if the browser has to open the image file every time, then the disk access will kill you.
That being said, I'm willing to bet there are better ways of doing what you are trying to do. You can get the pixel the mouse clicked/hovered/etc using JavaScript, and then add an absolute div at that specific point to create the "filter" you are talking about. Furthermore, if two pixels next to each other get tagged, you can just expand the former div, rather than creating a new one, which will help the performance by a lot
In other words, look into just loading the image with an img tag, and then using JavaScript to do what you are trying to do.
Edit: I was attempting to describe this problem using the markup I'm currently using, but that seems to be causing confusion. Look at the edit history if you'd like to see that should the question be unclear
I would like to write a php script generating an image from user submitted content.
The content is a block of text of undetermined length on a background. The text could be anything from a couple words to a few sentences.
There could be anywhere from 1 to 6 of these blocks of text that will vary in size. So, since the text varies in length, the container/background will vary in height. And since I could have multiple blocks, the overall image will vary in height.
Given that I need to dymically size so much of this (the image itself, the text containers, possibly font size), and I really don't even know where to start with the GD library, my first questions are:
Is this possible?
If possible, is it feasible to implement without a ton of headache?
Is there a cross-platform alternative (preferably no flash, and likely no <canvas>)?
There is a PHP function that gets the image size and returns it as an array.
$image_data = getimagesize($image_path);
returns an index array with 4 elements:
0: width in pixels
1: height in pixels
2: type as integer (1-GIF, 2-JPG, 3-PNG, 4-SWF, 5-PSD, etc)
3: the string " height='(height)' width='(width)'
You can use the $image_data[0] and $image_data[1] to return the proper width/height, which you can use to dynamically size the containers and whatnot.
The other issues you have are somewhat beyond the amount of time I can put into a post at the moment. Perhaps later I can expound upon those. Good luck.
Can we measure height of a div using php?
This is not possible at all: PHP serves HTML code. The browser renders it. Only after it is rendered, can height be determined reliably. Different browsers may end up with different heights. Different user settings (like font size) may end up with different heights.
The only way to find out an element's height is using JavaScript which runs in the browser. You can theoretically send the results back to a separate PHP script using Ajax, but I doubt that'll make much sense.
You could use jQuery's .height() like so:
var height = $("#elementID").height();
(there are native JavaScript approaches to this as well, but they tend to be a bit long and complicated.)
As others have said here, you cannot use PHP to read the height/width of a div already rendered. However, aside from the javascript options already presented keep in mind that you can use PHP to set the height/width of a div before it is sent to the browser. This would be in the form of an inline style of course. This is not the most elegant solution and to be honest I would avoid it, but you did not state what specifically it is that you want to do, and why.
Not sure if that info will help you in your implementation but it wasn't mentioned so far and thought I would contribute it.
No, we cannot. div is rendered by a browser based on CSS/JS. in a different browsers it can be different (IE, Firefox). It does not depends of PHP.
In case you are using text inside the div you could use strlen() to have some kind of measurement of height. I am saying some kind ofcourse because you are just counting the number of characters which then can be equated to some height depending on the font-size of the text, the line-height, the width of the div.
Lets say one screenheight can output 2000 characters on your website
If you count 4000 characters you have 2 screenheigths.
954 characters = almost half of a screenheight ...
i have used this method once to calculate the amount of ads i could implement in the sidebanners on a blog styled website with mainly textcontent on it ...
The height of a vertical ad was about one screenheight. If the text that needed to be outputted was 7000 characters i knew i had room for 3 ads ...
so I'm using FPDF in PHP to programmatically generate a PDF file from images and text (not HTML).
One of the biggest issues I've been having is being able to wordwrap text around an image. My current algorithm looks like:
Get text as an array of words
Add words one at a time to a 'current line' variable, and call GetStringWidth() on it to determine the width of the current line
Once I reach a pre-determined max width, I pass off the current line to an array of lines, and start on a new 'current line'.
Doing this allows me to get an array of lines that shouldn't be breaking improperly, however I've discovered that because my text is justified-aligned, GetStringWidth() can't accurately give me the width of the line when it has been justified.
I've dug into FPDF's MultiCell method to try and figure out how it breaks justified text properly but can't really make heads nor tails of it. It seems to boil down to a similar algorithim (and it writes each line using Cell ) but it never actually seems to calculate the width, it writes out PDF "code" such as 0.375 Tw.
Does anyone know how to calculate the width of justified text, given a string and a max width?
Answering a really old Question.
In the end, I took the function that does justification out of the library and rewrote it to allow for another parameter that makes it continue justifying text even on the last line.
This would result in text that was fully justified for a specific paragraph, then you write the final paragraph without the parameter and have the final line not justified (as per normal).
not sure if this helps but I have a related problem - needing to know how many lines a MultiCell will take up.
I did this by using GetStringWidth() / $maxWidth and getting the ceil() of that.
I can then work out the estimated height (as I know the line height I am using) and use that figure (in my case to switch columns or not).
Perhaps feeding the base text into GetStringWidth() and estimating height this way will allow you to determine an appropriate place to break the text into the multiple MultiCell()s.
The project is developed using CakePHP.
The page is of a news feed article.
Pagination is simple when you want to return (x) number of records per page, or (x) number of images per page, or even limit the number of words/paragraphs/characters but what if you want to paginate by the visual length of the page?
The issue came up because some articles contain a large amount of text and a large amount of images. I would like to know how you would go about developing pagination when the content is completely dynamic. By this I mean, it could be 100% text, text and 3 pictures, 10 pictures, etc.
Code is appreciated but even a concept would be beneficial, thanks!
I don't know cakephp, but, how about counting the number of characters?
Let's say you have 10.000 characters in the article and you decide that each page should have not much more than 500 words. Given an average word lenght of 5 characters, you go to the character 500*5=2500, look for the next closing paragraph, and take this point as next-page mark.
You could use the same concept with images but considering the height of the images...
Sounds good?
Because we know the width of the page and the height of the image and we were able to approximate the pixel height of the text.
We then took the height of the images, spaces, and text, and subtracted that from the total allowable height within a certain percentage of error, this is so that it doesn't push an image onto the wrong page just because the last 10px go over the limit.
We also have a way to force items onto the previous page in the event that an image, or sentence gets pushed to the next page which does not give the proper look.