I am working on a html to PDF project. I am following the solution from an older SO question, but got stuck on the first step which is:
h1 {
string-set: doctitle content();
}
#page {
size: A4;
margin: 1.6cm .6cm 1.2cm .6cm;
#top-center {
content: string(doctitle);
}
}
but I'm getting a "Unknown property name" on the Dev tools.
Tried on: Chrome version 81.0.4044.129 & Firefox 75.0
So after researching a ton more, I think I have the answers. string-set is an actual CSS property in W3's CSS Page Media Module but like the OP in Has the paged media module been abandoned?, there does not seem to be a full adoption in browsers for paged media module specs even though caniuse says it's fully supported.
The reason it works in Re-displaying the current heading after a page break is because the OP uses WeasyPrint, which does not rely on the browser's CSS rendering to create the PDF.
The takeaway is that in 2020, HTML to PDF is still a massive pain because of fragmented adoption of W3's specs. The same HTML file will look different in the browser's print preview, WKHTMLTOPDF and WeasyPrint.
Some of the reading that helped me finally solve this:
https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
Is there someway I can disable a particular CSS feature for my browser so I can view how the page will look in browsers that don't support that feature?
For instance I am using CSS grid. But I want to disable CSS grid feature in my chrome/firefox so I can see how my layout will look in browsers that don't support CSS grid?
using jquery you can detect which browser is being used by the website
if($.browser.chrome) {
$('#mytargetitemid').removeClass('.cssgrid')
} else if ($.browser.mozilla) {
alert(2);
} else if ($.browser.msie) {
alert(3);
}
this code removes the class tag of that item and hence css is not applied to it :-
$('#mytargetitemid').removeClass('.cssgrid')
hope this helps, revert if any confusion
you can check how many version of browsers support grid layout, compatability.
in IE browser you have the option to test as per versions but I doubt we have the same option in chrome.
This is just a hack and not a standard, but it could help -> #media-query swap.
All you need to do is to swap the queries, e.g.
Wrap your original query in #supports *not* (display: grid) {...} as if you're targeting non-grid browsers and of course, those browsers won't understand it anyway, then allow the other codes to run.
I am developing a web page that will only be available from the company's intranet. At first the client's requirements was that if needed to work with IE8 which was fine.
Our first problem was that after launching the site live so the client can test it, we realized that every employee's IE was configured to open intranet's website in compatibility mode (The way employees computer are set up) which destroyed everything visually since nothing was tested for IE7...
I managed to make it work at 95% by including this meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
For the other small glitches on the page, I included a small script to detect if it was in compatibility mode and then load another css to fix those other glitches and it works perfectly, everything went back to the right place and the design is fine:
$(document).ready(function () {
try { JSON } catch (e) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='../css/compatibilityMode.css'>");
$("head").append(cssLink);
}
});
The problem now is that they need to be able to print that page so I need to make a css for print. The page is divided in sections and before every one of them I use this code to do a page break. EX :
.part2 { page-break-before: always; }
This works perfectly in Chrome and IE9+ but in compatibility mode it's ignored and the print preview is completely messed up...
I researched a lot on the web and the page-break-before property is supposed to be supported since IE4 so I do not understand why it's not working...
Also, to tell IE which styles to apply to the print version, I put my print css inside this tag :
#media print { }
According to my research online, some people say that this is not supported in IE8- since it's media queries and some says it is supported because media types were supported way before media queries and it should work...
I really don't know what to try and where to look anymore, was wondering if anyone could point me in the right direction or give me any suggestions as what to try next..
Thanks in advance!
Is there any other way to achive this requirement.
I am using filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3); to rotate the page which works but if the content is long which does not print the pages properly.
Use a Print CSS. In your CSS you can set the #page property as shown below.
#media print{#page {size: landscape}}
The #page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is #Page { size:landscape} obsolete?:
CSS 2.1 no longer specifies the size attribute. The current working
draft for CSS3 Paged Media module does specify it (but this is not
standard or accepted).
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
<link media="print" rel="Alternate" href="print.pdf">
In conclusion in some browsers it is relativity easy using the #page size option however in many browsers there is no sure way and it would depend on your content and environment.
This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.
Is there a way to play a video fullscreen using the HTML5 <video> tag?
And if this is not possible, does anybody know if there is a reason for this decision?
2020 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.
This can be applied to any element, including videos.
Browser support is good, but Internet Explorer and Safari need prefixed versions.
An external demo is provided as Stack Snippet sandboxing rules break it.
<div id="one">
One
</div>
<div id="two">
Two
</div>
<button>one</button>
<button>two</button>
div {
width: 200px;
height: 200px;
}
#one { background: yellow; }
#two { background: pink; }
addEventListener("click", event => {
const btn = event.target;
if (btn.tagName.toLowerCase() !== "button") return;
const id = btn.textContent;
const div = document.getElementById(id);
if (div.requestFullscreen)
div.requestFullscreen();
else if (div.webkitRequestFullscreen)
div.webkitRequestFullscreen();
else if (div.msRequestFullScreen)
div.msRequestFullScreen();
});
2012 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specification supplies the requestFullScreen method which allows arbitrary elements (including <video> elements) to be made fullscreen.
It has experimental support in a number of browsers.
2009 answer
Note: this has since been removed from the specification.
From the HTML5 spec (at the time of writing: June '09):
User agents should not provide a
public API to cause videos to be shown
full-screen. A script, combined with a
carefully crafted video file, could
trick the user into thinking a
system-modal dialog had been shown,
and prompt the user for a password.
There is also the danger of "mere"
annoyance, with pages launching
full-screen videos when links are
clicked or pages navigated. Instead,
user-agent specific interface features
may be provided to easily allow the
user to obtain a full-screen playback
mode.
Browsers may provide a user interface, but shouldn't provide a programmable one.
Most of the answers here are outdated.
It's now possible to bring any element into fullscreen using the Fullscreen API, although it's still quite a mess because you can't just call div.requestFullScreen() in all browsers, but have to use browser specific prefixed methods.
I've created a simple wrapper screenfull.js that makes it easier to use the Fullscreen API.
Current browser support is:
Chrome 15+
Firefox 10+
Safari 5.1+
Note that many mobile browsers don't seem to support a full screen option yet.
Safari supports it through webkitEnterFullscreen.
Chrome should support it since it's WebKit also, but errors out.
Chris Blizzard of Firefox said they're coming out with their own version of fullscreen which will allow any element to go to fullscreen. e.g. Canvas
Philip Jagenstedt of Opera says they'll support it in a later release.
Yes, the HTML5 video spec says not to support fullscreen, but since users want it, and every browser is going to support it, the spec will change.
webkitEnterFullScreen();
This needs to be called on the video tag element, for example, to fullscreen the first video tag on the page use:
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
Notice: this is outdated answer and no longer relevant.
Many modern web browsers have implemented a FullScreen API that allows you to give full screen focus to certain HTML elements. This is really great for displaying interactive media like videos in a fully immersive environment.
To get the full screen button working you need to set up another event listener that will call the requestFullScreen() function when the button is clicked. To ensure that this will work across all supported browsers you are also going to need to check to see if the requestFullScreen() is available and fallback to the vendor prefixed versions (mozRequestFullScreen and webkitRequestFullscreen) if it is not.
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Reference:- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Reference:- http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
From CSS
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
I think that if we want to have a open way to view videos in our browsers without any closed source plugins (and all the security breaches that comes with the history of the flash plugin...). The tag has to find a way to activate full screen.. We could handle it like flash does: to do fullscreen, it has to be activated by a left click with your mouse and nothing else, I mean it's not possible by ActionScript to launch fullscreen at the loading of a flash by example.
I hope I've been clear enough: After all, I'm only a french IT student, not an english poet :)
See Ya!
A programmable way to do fullscreen is working now in both Firefox and Chrome (in their latest versions). The good news is that a spec has been draft here:
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
You will still have to deal with vendor prefixes for now but all the implementation details are being tracked in the MDN site:
https://developer.mozilla.org/en/DOM/Using_full-screen_mode
You can change the width and height to be 100%, but it won't cover the browser chrome or the OS shell.
Design decision is because HTML lives inside the browser window. Flash plugins aren't inside the window, so they can go full screen.
This makes sense, otherwise you could make img tags that covered the shell, or make h1 tags so the whole screen was a letter.
No, it is not possible to have fullscreen video in html 5. If you want to know reasons, you're lucky because the argument battle for fullscreen is fought right now. See WHATWG mailing list and look for the word "video". I personally hope that they provide fullscreen API in HTML 5.
Firefox 3.6 has a full screen option for HTML5 video's, right-click on the video and select 'full screen'.
The latest Webkit nightlies also support full screen HTML5 video, try the Sublime player with the latest nightly and hold Cmd / Ctrl while selecting the full screen option.
I guess Chrome / Opera will also support something like this. Hopefully IE9 will also support full screen HTML5 video.
This is supported in WebKit via webkitEnterFullscreen.
An alternative solution would be to have to browser simply provide this option on the contextual menu. No need to have Javascript to do this, though I could see when it would be useful.
In the mean time an alternative solution would simply be to maximise the window (Javascript can provide screen dimensions) and then maximise the video within it. Give it a go and then simply see if the results are acceptable to your users.
The complete solution:
function bindFullscreen(video) {
$(video).unbind('click').click(toggleFullScreen);
}
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
HTML 5 video does go fullscreen in the latest nightly build of Safari, though I'm not sure how it is technically accomplished.
Yes. Well what happens with HTML5 video is that you just put the <video> tag and the browser will give it's own UI, and thus the ability for full screen viewing. It really makes life much better on us users to not have to see the "art" some developer playing with Flash could make :) It also adds consistency to the platform, which is nice.
As of Chrome 11.0.686.0 dev channel Chrome now has fullscreen video.
You can do this if you tell to user to press F11(full screen for many browsers), and you put video on entire body of page.
If none of these answers dont work (as they didnt for me) you can set up two videos. One for regular size and another for fullscreen size. When you want to switch to fullscreen
Use javascript to set the fullscreen video's 'src' attribute to the smaller videos 'src' attribute
Set the video.currentTime on the fullscreen video to be the same as the small video.
Use css 'display:none' to hide the small video and display the big one with the via 'position:absolute' and 'z-index:1000' or something really high.
If you have option to define your site as progressive web app (PWA), then there is also option to use display: "fullscreen" under manifest.json. But this will only work if user adds/installs your webapp to home screen and opens it up from there.
it's simple, all the problems can be solved like this,
1) have escape always take you out of fullscreen mode
(this doesn't apply to manually entering fullscreen through f11)
2) temporarily display a small banner saying fullscreen video mode is entered (by the browser)
3) block fullscreen action by default, just like has been done for pop-ups and local database in html5 and location api and etc, etc.
i don't see any problems with this design. anyone think i missed anything?