Bit of a bizarre question, but does anyone know the actual limit to the length of a webpage, and why it is the limit?
As an experiment, I'm using HTML and CSS to make a site that represents a journey to a scale of 1:1. I have a ul list of markers along the way that I have separated with large margins in the css. However, the longest margin I can get to work so far is
top-margin:100000cm;
Since there are 43 list items, that equates to 4,300,000cm, or 43Km. Does anyone know why it's hitting a limit around this mark, or how I might go about getting it longer? I'm using Safari for testing currently.
There is no limit, as per any HTML/XHTML specification, so this is just the practical limit of the browser that you're hitting. How long a webpage can be is the same as asking how long a book can be.
It appears to simply be a maximum value that margin-top property can be set to. I've tried values up to 400,000cm with 100 elements and the page loads them all fine. I even tried incrementing that up to 1000 elements to see if the number was affected by load time, but nothing. It does appear to be an exact number somewhere between 400,000 and 500,000 that it cuts off at and shortens down past that value.
Code I used (which worked, showed in full):
<?php
print "<ul>";
for ($i = 1; $i <= 1000; $i++) print "<li style=\"margin-top: 400000cm;\">{$i}</li>";
print "</ul>";
die();
?>
Just a guess but 2147483647; max int value (probably pixels)
Interestingly though IE9 seems to go up to 214748.3px and when I go higher it goes into the negative.
18.939 kilometers, to be exact:
http://worlds-highest-website.com/
This will depend on the browser. There shouldn't be any clear limit on the length of the HTML file. The pure "length", as in pixels, shouldn't have any clearly defined limit either. Only, the more elements there are in the page, the more the browser has to do, and the sooner it may run out of memory. Memory is about the only limit there is.
There is no limitation. Even in terms of size of integer, you can create divs in other divs and have all of them biggest value of margin value so your page will not be limited.
It's a browser / memory / os architecture issue.
Measuring it in anything but pixels won't be very useful unless you are referring to the size of a printed webpage on a specific paper size, orientation and scale. Screens have different sizes and DPI's.
Besides a possible maximum int value, you need to consider the load time for the page. If your web page takes longer than a few seconds to show any interesting content, than you will lose people browsing your content. That's a more meaningful metric than a 1:1 scale metric.
Related
How many divs can you have on a webpage at one time? And what would be controlling that limit?
There's nothing limiting the number of divs on a website (other than the memory on your machine).
There isn't a hard limit in any modern browser. I've literally iterated and printed thousands of divs on pages before. Your real limiting factors are going to be how big you want your page to be and of course, eventually your page will take a very long time to load.
I just ran a test case where I inserted 2,097,152 divs in a page and though it was slow to respond, it did eventually come up without choking either IE or Chrome.
If you need more information, or perhaps help figuring out an approach that wouldn't take so many divs as to require this question, just let us know.
I just want to check if there is any easy way to limit zooming. If I zoom beyond certain point, the axis look wired.
Is there any way to fix or limit the zooming?
Its with the JavaScript itself we cannot control it and it will be hard to get a reference to that axises even. It's logical to render the same value the limit.
I am thinking about converting a PDF document into a long scrolling HTML doc (my reason is that there is video in the document and we want to turn the video into streaming rather than require anyone viewing the presentation to download 200+mb before being able to view anything). I am wondering if there is a maximum pixel width or height to HTML documents, or if browsers start to have difficulty with the DOM at certain lengths. If I convert the whole presentation to HTML it would be about 41,000 px. Does that seem reasonable? Are there limits to the pixel height or width of documents? Or best practices considerations I should keep in mind?
On IE8 and lower CSS "filter" declarations fail on anything larger than 4096 pixels. This is not a restriction on document size but can sometimes cause unexpected results.
As far as I'm aware, browsers can render documents of literally any size. I had a world map page that was 40,000 x 20,000 pixels, and it ran perfectly fine, even with some fairly busy JavaScript.
It would be new to me that there is a limitation for maximum width or height of a webpage.
I have tried very big numbers and never got to a maximum.
I dont think there is any kind of limit, it will certanly be very slow to load 41.000px so my advice it´s not to do that...
I cant imagine someone scrolling down 41.000px, thats something almost crazy to do...
Find another way, split the video in small chapters.. chapter 1.. chapter 2..etc..
A practice I commonly use when manipulating content on websites is to absolutely position elements with a left (or sometimes top) value of around -2000px, so as to ensure it won't be seen on screen.
Now, I know I could use display: none to make my objects disappear, but some elements don't play nice when not displayed, and sometimes I need to make a reference to some property like its width, for example, which can't be accessed when the display property is set to none. So often I will position the element so it is hidden ofscreen.
My assumption, then, is this:
Since the object is not rendered on the screen there should be no difference in the performance of the website* when I use left: 2000px as opposed to left: 200000000px.
So I assume that if the following code is used, there would be no difference in the performance of the two pages:
Page one:
<div style="height:100px; width:100px; left:-2000px"></div>
Page two:
<div style="height:100px; width:100px; left:-200000000px"></div>
Are my assumptions correct? If that element were the only difference between two given pages, would there be any difference (however small), in performance?
*That is to say load time, page size, responsiveness, or any other measure of performance
=================================
Update
I have profiled the pages as suggested by Michael and found the following: Spark was correct in saying that the load time would be affected by the file size. There was a difference of four bytes in the file size which corresponded to a difference of about 4ms in load time.
Secondly, my incredibly large left value was interpreted correctly by IE and Firefox, but not by Chrome. Chrome doesn't seem to recognise values greater than around 135 million pixels. However, given the performance difference seems to be minimal, I can't speculate as to why they would have decided to limit it to such an arbitrary amount.
You can attempt to profile the page load time with Firebug (or Chrome/Safari Developer tools), but I would be extremely surprised if there was any difference at all. The browser cares about the x,y,z coords of an element. It doesn't matter if those are on or off the screen; they are still just three discrete data points.
When you say performance do you mean load time?
Load time of the CSS could be effected if you could measure the difference in bytes left:-2000px vs left:-2000000px then yes, it would take longer to load the latter, but this has nothing to do with it being "off screen" just the CSS size.
So the long answer is not putting it off screen makes no difference you still have to load it, however the bigger the value, the longer it takes to load. Tho in this case it's so small it not really an issue.
For example load times...
left:-2000px = Input: 0.021KB, Output: 0.019KB
left:-2000000px = Input: 0.025KB, Output: 0.024KB
I'm planning a page where things are repeatedly appended horizontally. Will there be a point where elements can no longer be appended, because of a maximum page width?
There will probably be some implementation specific limit to how wide the page can be or to how many elements you can have on a page, but there will be a limit you will hit long before then: the limit to how patient your user is when scrolling, or the amount of elements you can load before your page becomes too slow.
You might want to look at a paging solution and/or loading and unloading elements dynamically.