(Following this question: html columns whose width automatically changes according to their content )
From a PHP script, I print some HTML code, and I would like to know what will be the height of the result (for paging calculation). Suppose I have the following input:
$html code I want to print (string);
$css code, with full details of the font and size of all items that appear in the HTML (string);
all relevant browser settings (fonts, sizes, etc.);
page $width, in pixels (int).
I create a page that looks like this:
<html>
<head>
<style>$css</style>
</head>
<body style='width:$width'>
$html
</body>
</html>
I want to know, from within the PHP script, the number of pixels from the top of the page to the bottom of the text.
EDIT: I need to do this on the server side, before the content is displayed, because I use this to calculate what content to put. For example, if the content is too high, I might decide to put only the first half, etc.
Another possible use is to calculate what width is needed to achieve a particular height. For example, I might try to put it in a div with width 200px, but then the result may be too high; then I try width 400px, etc., until I find the width the gives the height that I want.
If you want to create your own server-side browser, you will have problems with load time. And if this is not a big problem, you can parse css (something like this: link) to find out what paddings, margins, fonts, line-heights and so on used in your $html variable, then, if you know font specifics, you can try to calculate content height (naturally given, from what browser the user entered).
You might be able to use the TCPDF class to do this. According to this thread the class has limit support for CSS but if your styles are supported the idea would be to examine the current positions, (GetX() and GetY()) before and after a writeHTML method call.
HTML rendering is done at client-side while PHP resides at server.
As such, PHP cannot determine HTML element height from server-side.
You would, however, be able to obtain that using JavaScript.
See: Get full height of a clipped DIV
Related
As you might heard in the title I'm using PHP to add info to a database and then use the info. It's a simple comment system. I'm very new to PHP and don't really know if there might be any easier way of creating what I'm doing but my problem is still the same. When I get info that is to big for the div to handle in one row if it got no spaces what so ever, it automatically increases the width and height of the div.
At the same time I'm having another div that contains the personal info like name and stuff. It is 1/4 of the width and the comment-div id 3/4 (as I've set it with CSS). The info-div gets smaller as the comment is getting bigger (for some insane reason, both in width and height!).
When I get the info I get all info from one column and displaying them in a table. I place the comment and the info-info in two separate td tags and each cell info in a div with the appropriate width and height (height 150px width 25%/75%).
I've already tried to break the line with word-wrap white-space and overflow but nothing seams to work.
I got some idea myself of how it comes the browser shows it like this, since the width and the padding of the divs seam to be matching with the values in the CSS if I'd have placed the info in the body and not in the content div. Why it would react like that I have no idea and I want to know if anyone knows what I can do about it... And as said, this only happens when a string is to long. Otherwise it's working 100% fine.
Thankful for any help... and I use PHP, JS, HTML, CSS for the moment and a solution needs to be with ether of the formats (I could use like jQuery as well and other lookalikes)
maybe you could use
css
max-height: 300px;
overflow: scroll;
this means that your div never goes bigger that 300px and if the content is longer you will get an scrollbar.
How can I determine the explicit width of a HTML element that has width auto using PHP?
JQuery has the ability to do this if width:auto; is used it can compute the actual width.
Get the current computed width for the first element in the set of
matched elements.
JQuery probably does this with the help of the browser as it is client side.
How can I achieve this using PHP? I have the HTML as a string.
Update
All CSS is inline, if the width is auto, the only thing left to determine the width of the element is its immediate parent and/or its contents.
It is not possible. PHP does not know how the HTML/CSS will be rendered (if rendered at all).
The only way this would be possible in PHP is if you have both the HTML and the complete CSS as strings AND the width of the element is defined in absolute pixels or the width of its container (or the parent's container, etc) is defined in absolute pixels. If all these conditions were true, it would still be extremely difficult to figure out. Basically you'd have to code a rendering engine in PHP.
If you were really lucky, the element you needed would have an inline style="width:px" and you could parse for that attribute.
This is possible in Javascript because the browser knows its own size. Under most circumstances, the HTML in a string doesn't have a size until rendered in a browser.
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!
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 ...
I'm creating a invoice and have option to print the invoice. While printing i use a stylesheet (using media=print) to block the display of elements which should not be printed...
But while printing it takes the full size of the window and uses that much paper..
I want to restrict the size of the printing area.... How can i do that?
Without seeing the CSS on the original page I can't really be sure, but make sure you are using display:none rather than visibility:hidden to remove the areas you don't want to print.
If you have any widths set on the body or containing elements you could try removing/reseting them.
Or maybe have a look at some CSS print frameworks such as hartija http://code.google.com/p/hartija/
Good luck,
Jedidiah
edit: Just read your comment to Steven Paligo. If the rows are in a table could you try setting a fixed or maximum height on the TR.
Customizing a page for printing can be difficult with CSS because of browser restrictions. The best way I've found to do what you're asking is to set margins on the body to position the HTML on the printed page.