I am reading a w3c specification and trying to understand the difference between the canvas and the viewport.
They say:
The canvas is the space where the formatting structure is rendered.
And at the same time they say:
Viewport is a window or other viewing area on the screen
These two definitions don't clarify what is the canvas and what is the viewport. Can anyone give a clear or explanatory definition of those?
The viewport is the visible box between the inner borders of your browser;
The canvas is the box containing the whole document. A part of the canvas may be invisible if it does not fit in the viewport.
In other words:
The viewport is the allocated area on the screen for displaying the web page. This box is of a fixed size, and can only be changed when the user resizes the window.
The canvas can be bigger than the viewport. In this case, scrollbars may appear.
Related
I am trying to show a diagram of products with the image to scale. I have the image element sized with a width and min-width set to the correct width for the image.
I have an 'resize' event listener triggering my zoom on the image element to equal a correction factor:
const ratio = (window.innerWidth / window.outerWidth)
This works acceptably except when the browser vertical sidebar is open.
I searched here and could not find a property to show me sidebar width or to accurately detect zoom level in all browsers. I can use window.devicePixelRatio but that is not working in mac safari.
Would a canvas or svg element offer me some opportunities here i don't see?
Perhaps the best is just to have a input type='range' element next to the image to allow calibration to common object such as a credit card or coin.
Am I mistaken in thinking that if my picture is correct at 600px on my machine that it can be rendered universally in the browser with css width settings?
Thanks alot for any reflections
I apologize if this is not the correct community to ask, but I believe this has to do with HTML so I'm asking here.
I need a small banner with credit card icons (21px high).
I made it in PS and resized it to 21px height (auto width), but I wasn't satisfied with the sharpness.
I now load the full image in HTML and using height and width image tag attributes resize it to the same size I did in PS, but the result is much better.
1) Resized with HTML
2) Resized with PS
Chrome developer tool shows that both of the images are the same dimensions.
Why is there such a difference?
Browsers just display it as it would be 21px high, but higher dpi screens may use the full image to make it sharper. As in the screenshot you shared, both rows are actually ~90px high. Height doesn't actually resize the image itself, it just stretchs it to a smaller area.
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
From w3schools
I am trying to make a website with a fluid layout. So to do this I am trying to use percentages as measurements. If I am not mistaken, the percentages are calculated from the parent element. Since the html tags does not have any set width, how does the body tag calculate 100% width? does 100% means the full resolution of the screen that you are viewing the page?
thanks
You have to read the specs to find the answer to your question:
https://www.w3.org/TR/CSS22/visudet.html#x3 says about percentage widths:
<percentage>
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block.
About containing blocks:
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details says:
The position and size of an element's box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin;
(...)
The root element is <html> (https://www.w3.org/TR/html-markup/html.html).
The screen is considered a continuous media.
The relationship between viewport and canvas is simple:
https://www.w3.org/TR/CSS22/visuren.html#viewport
https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a
window or other viewing area on the screen) through which users
consult a document. User agents may change the document's layout when
the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
So, trying to simplify this, the canvas size considers the content size even if it doesn't fit on the browser window.
The browser window contains the viewport (considered without menus, scrolling bar and status bar).
So, if <body> has 100% width, that means it would be the same width as the <html> element, which width is equal to the viewport's width.
You can easily find the viewport width by inspecting the css for <html> element on Chrome.
100% width for the body tag means 100% of the html width, which again is the full width of the viewport, which on desktops will be the browser window, on mobile devices the screen width.
Using just HTML and CSS would not suffice to get the width, you would need to use Javascript, or even better, a framework like jQuery that would help you get the body's width.
Using jquery the code would look something like this:
$(document).width();
You can find out more about it here.
I am reading A tale of two viewport and I could not follow the explanation at Consequences. He claims that when one zooms into his page, the upper right corner is not blue anymore even though it has width:100%.
I do not understand why this should be the case. In fact, I cannot even reproduce it:
Could someone explain me on a more simple example what the author's point is?
You can see the effect by using "browser zoom" (not pinch zoom), i.e. ctrl+/-. You need horizontal scrolling to see the effect in the author's example.
When you hit ctrl+ a few times, you're increasing the size of a CSS pixel. This means fewer CSS pixels will fit into your browser window (viewport) and thus zooming in shrinks your viewport. For example, say your viewport is initially 800px wide. You zoom in to 200%. Since each CSS pixel is now double the size, your viewport only fits 400px.
The article's point is that even though the viewport shrunk, the content on the page hasn't (in terms of CSS pixels), it's still ~800px (or whatever the author specified it to) since only the pixel size has changed. This means sizes that rely on the viewport will now look disproportional to the rest of the content. In his example, the top bar is set to fill the viewport width 100%. When the content becomes larger than the viewport, the bar will not extend the same width as the content.
It is a common question to resize an iframe to fit its' content, however I want instead to set the content to fit specific dimensions.
Essentially my application captures HTML, along with user_1's screen dimensions. So that user_2's sees the same HTML and screen dimensions.
In cases where user_1's screen dimensions are larger than user_2's screen dimensions, user_2 would see an iframe with a horizontal scrollbar. In cases where user_2's screen dimensions are smaller than user_2's screen dimensions, user_2 would see an iframe without a horizontal scrollbar and centred content.
Taking into account things like media queries where smaller screen resolutions add for instance a burger menu. I'd like for the second user to see the same thing.
What effectively I'd love to do is set the iframe's inner scrollWidth.
The only thing I've been able to suss out is that setting the actual width of the iframe itself is the best way to start. Then perhaps in cases where the content needs to expand beyond the width of the iframe, to set the width of the html or body element inside the iframe.
But that too, introduces media query issues. Where maybe the iframe on user_2's screen is small enough to trigger a burger menu, even though the body's width was set to expand beyond the iframe's width.
Is there any way I can set the iframe to be any width I want, but for the content of the iframe to behave as though the iframe was larger? I hope I've explained my problem in a way that makes sense.
I want user_2 to see the same thing user_1 saw.