Getting InnerWidth Of A Div Ssing Javascript In Mm

Question

I need to show the preview of an invoice. For that I have to scale the size of preview according the div to show the preview. This div is responsive like if we reduce the size of window the size of div also get reduced and hence I have to scale the preview according to the div.

Since invoice paper size in mm so i need to get the innerWidth of div in mm so that I can get the proper scale value.

Any other alternative to achieve the same is also welcome. In case of 'px', its working properly, but i need to get the width in mm

                $("#preview").css({
                    border : "1px solid silver",
                    width : "794px",
                    height : "1123px",
                    position : "relative",
                    margin : "auto",
                    boxShadow : "2px 2px 4px silver"
                });

                // Scale preview with screen size
                var updatePreviewScale = function(cssObj){
                    $("#preview").css(cssObj);
                };

                // A4 paper size in pixel : 794px X 1123px
                var scalePreview = function(){
                    var width = $("#preview-container").innerWidth();
                    var expectedWidth = 794;
                    var expectedHeight = 1123;
                    var ratio = width / expectedWidth;

                    if(ratio > 1){
                        return false;
                    }

                    var widthMargin = -(expectedWidth * (1 - parseFloat(ratio)))/2;
                    var heightMargin = -(expectedHeight * (1 - parseFloat(ratio)))/2;

                    var cssObj = {
                            "-webkit-transform" : "scale(" + ratio+ ")",
                            "-moz-transform" : "scale(" + ratio+ ")",
                            "-ms-transform" : "scale(" + ratio+ ")",
                            "transform" : "scale(" + ratio+ ")",
                            "left" : widthMargin,
                            "top" : heightMargin

                    };

                    updatePreviewScale(cssObj);
                };

                scalePreview();

On a more serious note, you might be looking at `devicePixelRatio`, but also look at the discussion [here](http://stackoverflow.com/a/21767407/2317532) and [here](http://stackoverflow.com/q/16541676/2317532) — dayuloli, Mar 16 '15 at 15:05

Piotr Dajlido · Answer 1 · 2015-03-16T15:38:55.567

2

You seem not to understand the concept of pixels my friend.

Although most of the monitors are made based on the same standard. You can not assume that pixels have they equivalent value in mm. You see some monitors have smaller dots other larger.

You can make it with some approximation but you can never be sure. mm will work only for printing purposes.

Here is what W3C has to say: http://www.w3.org/Style/Examples/007/units.en.html

1 px ≈ 0.2645833333333 mm

Cheers!

edited Mar 16 '15 at 15:38

answered Mar 16 '15 at 15:11

Piotr Dajlido

1,982
15
28

That's why I asked to get the correct dimensions in mm. Please read the question again. – Neeraj Verma Mar 16 '15 at 15:14
I know ;) You should feel lucky that your question didn't get vote down, it happens a lot with questions like this, but I'm always glad to help ! – Piotr Dajlido Mar 16 '15 at 15:15
If is it so then you didn't understand the question. – Neeraj Verma Mar 16 '15 at 15:16
1 px ≈ 0.2645833333333 mm ? – Piotr Dajlido Mar 16 '15 at 15:17

score 2 · Answer 2 · answered Mar 16 '15 at 15:18

2

You can easily get the number of pixels per mm.

function mm2px() {
    var e = document.createElement("div");
    e.style.position = "absolute";
    e.style.width = "100mm";
    document.body.appendChild(e);
    var rect = e.getBoundingClientRect();
    document.body.removeChild(e);
    return rect.width / 100;
}

Check this fiddle to see how to use it: http://jsfiddle.net/oet7L599/

Of course, you have to call this function only one time and store the result.

answered Mar 16 '15 at 15:18

Tolokoban

2,297
14
17

Nope you are wrong : http://postimg.org/image/ru1ekoyvz/ at 100% – Piotr Dajlido Mar 16 '15 at 15:25
I've never said that you will get **real** millimeters **on a screen**. But if you put style width in millimeters, some browsers will print it as close as possible to the real size. Of course it also depends on your printer. Even with PDF, you are not certain to get the correct scale on every printer. – Tolokoban Mar 16 '15 at 19:38
I have used CSS and **mm** units to print geographical maps on several pages. It works! I can even manage page breaks. – Tolokoban Mar 16 '15 at 19:43

score 0 · Answer 3 · answered Mar 16 '15 at 15:27

You must consider using a media print stylesheet.

This way you can override your styles for your printing using mm.

You have many way to achieve that. You can chose one of the 3 following. Note that in all possibilities, you have to define your css print definition after your default css in order to override the current values.

import inside an existing CSS declaration

Code:

@import("print.css") print;

linking to a print css file inside your html

Code:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

using a media query

This is the nicest method

Code:

@media print {
  body {
   font-size:10mm;
  }
}

Just to clarify : http://www.w3.org/Style/Examples/007/units.en.html — Piotr Dajlido, Mar 16 '15 at 15:36

Getting InnerWidth Of A Div Ssing Javascript In Mm

3 Answers3