HTML Template Width on PAL format

General
, ,
1

HTML template width is 1024px instead of 720px on PAL format 4:3
am i missing something ?

here is a test code:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		function play(str) {document.body.innerHTML = "Width :: " + window.innerWidth;}
		function stop () {}
		function update(str) {}
	</script>
	<style type="text/css">
		body {
			-webkit-box-shadow:inset 0px 0px 0px 4px green;
			height:576px;
			margin:0;
			overflow:hidden;
			color: white;
			font-size: 48px;
		}
	</style>
</head>
<body>
</body>
</html>
2

Yes. It is correct.

3

No, for PAL 4:3 it is 768px. 1024px is for 16:9.

4

How can I fix this ?
Because I’m positioning elements according to pal format in HTML template but after loading template on server whole output screen is squeezed.

Yes, you are right actuality it should be 768 for 4:3.
But I think server for pal format is fixed at 1024.
Should we request for this on GitHub ?

5

That is a bit messy. In PAL the physical video resolution is always 720x576 pixels, regardless if it is 4:3 or 16:9. During playback the monitor needs to be switched between 4:3 and 16:9 to compensate for the squeeze. So in a production environment you always need to switch the monitors.

During broadcast there are various ways to get the receiver to switch the aspect ratio automatically. Mostly it’s done by scaling it down to 720x432. That is actually a loss in quality.

The reason why that has been done is, that the quality of a SD 16:9 signal is much better when blowing up to HD than it would be, if you use a 4:3 signal and crop the top and bottom parts of to get it into a 16:9 frame for HD. So broadcasters used PAL 16:9 for a few years to fill there archives with material that is useable for HD, at the cost of reduced quality on air.

So as soon as you have an opportunity to switch your production chain to HD you should do that. HD can easily be downconverted to SD 16:9.

1 Like
6

Thanks Didikunz, you are right and I totally agree: +1:
But in my current environment they are using a 4: 3 ratio and I don’t think they will change it to 16: 9.
So I was hoping for a pal 4: 3 aspect ratio for the HTML template.

7

another solution, or maybe more like a workaround, could be deform the template in css to compensate the 16:9~4:3 deformation.
you just need to put everything in a

container and apply in css a scale

transform: scale(1, 1);

inside the parenthesis are scaleX and ScaleY, change those numbers accordingly to your needs.
in this case just one of them like

transform: scale(1.78, 1);// for 16:9
transform: scale(1.33, 1);// for 4:3

or swap x,y if it is the other way around

2 Likes
8

Thanks Andrea,
Exactly earlier i was thinking to use mixer, but now I’m using scaling.

9

It looks like casparcg doesnt support 4:3 at all, for no technical reason.

If you are using 2.3, I think it is possible to override the resolution of the page with something like your_template.html#width=720&height=576. It will then be scaled to fit the channel unless you override that with a mixer transform command

4 Likes
10

I think setting width and height to 100% does the trick.

11

That url/filename trick makes casparcg run the producer at a different resolution, so to the html page it will appear to be in a 4:3 channel.
It was added at some point to 2.2 and I dont think it was really documented anywhere

2 Likes
12

The digital Standard Definition form of video derived from the analogue formats (PAL/SECAM/NTSC) are complex because they are neither square-pixel nor are all the horizontal pixels used to make the 4:3 or 16:9 active picture.

If you DON’T care about preserving the correct aspect ratio of your graphics - around a 2% error - then for PAL/SECAM you make your graphics at 1024x576 for 16:9 or 768x576 for 4:3 and scale them down to 720x576.

If you DO care about preserving the correct aspect ratio of your graphics then either scale those 1024x576 (16:9) or 768x576 (4:3) graphics down to 702x576 and centre them over your 720x576 background, or make the graphics 1048x576 (16:9) or 788x576 (4:3) and scale them down to 720x576. Either of these methods will get your graphics to within 0.06% of the correct aspect ratio, which is close enough for me.

13

Thank you Julusian for the info, will this trick also work on NRK ?
I’m actually using the NRK version because it uses less CPU/GPU than server 2.2+ on interlaced channel.
I use CCG mostly for HTML templates but server 2.2+ uses more CPU/GPU even for static HTML templates

14

I’ll try this on After effects. Thank you