Set custom page size in chrome preview dialog for print

Multi tool use
Multi tool use












0















i'm going to be as clearly as possible. I have a svg code (inside a div) that consist on an image and a text. I need that svg code to has special width and height; in particular, i need them to be 190 x 250 mm. I already set this, by assigning 925px to width (since i use an online conversor from mm to px) and 700px to height.



The problem is, that when i open the file on Chrome and proceed to print (Cmd + P), print dialog open, and it shows me that my design is going to be printed on a A4 page. I have a custom paper (in real life, physically) that has the dimensions previously commented, so thats why i need that, when i open the print dialog (cmd + p), the 190x250mm paper appears (and not the A4 which "adds" that blank space)



I have a Mac, and after the print dialog open, i'm able to click on something like "show more options", and then setting the paper size that i actually want. However, when i print with this, my design does not cover the 100% of the paper.



What i've already tried was, using jspdf library, convert my svg to a pdf with the exact dimensions that i want. This works, only if a use common fonts (arial, times new roman, etc) on the svg, but no if i use special fonts.



I really, really, appreciate some help here. Thank you so much, and sorry for my English. Hope you understand !



This is my svg design - simplified



This is what happen (and what i don't want to



EDIT:
This is what i want in order to be able to print (notice how the print preview "fits" to the custom paper size). (The image is edited of course)



What i need










share|improve this question

























  • You should add your svg code, and any other code you may have for this.

    – rpivovar
    Dec 30 '18 at 0:29











  • Possible duplicate of Possible to force printer setup (paper size) in javascript?

    – Heretic Monkey
    Dec 30 '18 at 1:24











  • Hi, thank both for your reply. I'm not sure if my code will help, its simple an image an a text with width 975 px and height 700 ! If you think it will, please tell me, and i will add it. @HereticMonkey, i've seen some of that responses and of course, try what they said. When i add things to modify the @page, i didn't seen any changes on the size of paper that the print preview shows. However, i'm thinking, that the changes are seen after send to print. Im not sure about this, and now, today, i'm unable to do a test (i dont have a printer right now).

    – fornix
    Dec 31 '18 at 16:56


















0















i'm going to be as clearly as possible. I have a svg code (inside a div) that consist on an image and a text. I need that svg code to has special width and height; in particular, i need them to be 190 x 250 mm. I already set this, by assigning 925px to width (since i use an online conversor from mm to px) and 700px to height.



The problem is, that when i open the file on Chrome and proceed to print (Cmd + P), print dialog open, and it shows me that my design is going to be printed on a A4 page. I have a custom paper (in real life, physically) that has the dimensions previously commented, so thats why i need that, when i open the print dialog (cmd + p), the 190x250mm paper appears (and not the A4 which "adds" that blank space)



I have a Mac, and after the print dialog open, i'm able to click on something like "show more options", and then setting the paper size that i actually want. However, when i print with this, my design does not cover the 100% of the paper.



What i've already tried was, using jspdf library, convert my svg to a pdf with the exact dimensions that i want. This works, only if a use common fonts (arial, times new roman, etc) on the svg, but no if i use special fonts.



I really, really, appreciate some help here. Thank you so much, and sorry for my English. Hope you understand !



This is my svg design - simplified



This is what happen (and what i don't want to



EDIT:
This is what i want in order to be able to print (notice how the print preview "fits" to the custom paper size). (The image is edited of course)



What i need










share|improve this question

























  • You should add your svg code, and any other code you may have for this.

    – rpivovar
    Dec 30 '18 at 0:29











  • Possible duplicate of Possible to force printer setup (paper size) in javascript?

    – Heretic Monkey
    Dec 30 '18 at 1:24











  • Hi, thank both for your reply. I'm not sure if my code will help, its simple an image an a text with width 975 px and height 700 ! If you think it will, please tell me, and i will add it. @HereticMonkey, i've seen some of that responses and of course, try what they said. When i add things to modify the @page, i didn't seen any changes on the size of paper that the print preview shows. However, i'm thinking, that the changes are seen after send to print. Im not sure about this, and now, today, i'm unable to do a test (i dont have a printer right now).

    – fornix
    Dec 31 '18 at 16:56
















0












0








0








i'm going to be as clearly as possible. I have a svg code (inside a div) that consist on an image and a text. I need that svg code to has special width and height; in particular, i need them to be 190 x 250 mm. I already set this, by assigning 925px to width (since i use an online conversor from mm to px) and 700px to height.



The problem is, that when i open the file on Chrome and proceed to print (Cmd + P), print dialog open, and it shows me that my design is going to be printed on a A4 page. I have a custom paper (in real life, physically) that has the dimensions previously commented, so thats why i need that, when i open the print dialog (cmd + p), the 190x250mm paper appears (and not the A4 which "adds" that blank space)



I have a Mac, and after the print dialog open, i'm able to click on something like "show more options", and then setting the paper size that i actually want. However, when i print with this, my design does not cover the 100% of the paper.



What i've already tried was, using jspdf library, convert my svg to a pdf with the exact dimensions that i want. This works, only if a use common fonts (arial, times new roman, etc) on the svg, but no if i use special fonts.



I really, really, appreciate some help here. Thank you so much, and sorry for my English. Hope you understand !



This is my svg design - simplified



This is what happen (and what i don't want to



EDIT:
This is what i want in order to be able to print (notice how the print preview "fits" to the custom paper size). (The image is edited of course)



What i need










share|improve this question
















i'm going to be as clearly as possible. I have a svg code (inside a div) that consist on an image and a text. I need that svg code to has special width and height; in particular, i need them to be 190 x 250 mm. I already set this, by assigning 925px to width (since i use an online conversor from mm to px) and 700px to height.



The problem is, that when i open the file on Chrome and proceed to print (Cmd + P), print dialog open, and it shows me that my design is going to be printed on a A4 page. I have a custom paper (in real life, physically) that has the dimensions previously commented, so thats why i need that, when i open the print dialog (cmd + p), the 190x250mm paper appears (and not the A4 which "adds" that blank space)



I have a Mac, and after the print dialog open, i'm able to click on something like "show more options", and then setting the paper size that i actually want. However, when i print with this, my design does not cover the 100% of the paper.



What i've already tried was, using jspdf library, convert my svg to a pdf with the exact dimensions that i want. This works, only if a use common fonts (arial, times new roman, etc) on the svg, but no if i use special fonts.



I really, really, appreciate some help here. Thank you so much, and sorry for my English. Hope you understand !



This is my svg design - simplified



This is what happen (and what i don't want to



EDIT:
This is what i want in order to be able to print (notice how the print preview "fits" to the custom paper size). (The image is edited of course)



What i need







javascript html css svg






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 31 '18 at 16:53







fornix

















asked Dec 30 '18 at 0:18









fornixfornix

61




61













  • You should add your svg code, and any other code you may have for this.

    – rpivovar
    Dec 30 '18 at 0:29











  • Possible duplicate of Possible to force printer setup (paper size) in javascript?

    – Heretic Monkey
    Dec 30 '18 at 1:24











  • Hi, thank both for your reply. I'm not sure if my code will help, its simple an image an a text with width 975 px and height 700 ! If you think it will, please tell me, and i will add it. @HereticMonkey, i've seen some of that responses and of course, try what they said. When i add things to modify the @page, i didn't seen any changes on the size of paper that the print preview shows. However, i'm thinking, that the changes are seen after send to print. Im not sure about this, and now, today, i'm unable to do a test (i dont have a printer right now).

    – fornix
    Dec 31 '18 at 16:56





















  • You should add your svg code, and any other code you may have for this.

    – rpivovar
    Dec 30 '18 at 0:29











  • Possible duplicate of Possible to force printer setup (paper size) in javascript?

    – Heretic Monkey
    Dec 30 '18 at 1:24











  • Hi, thank both for your reply. I'm not sure if my code will help, its simple an image an a text with width 975 px and height 700 ! If you think it will, please tell me, and i will add it. @HereticMonkey, i've seen some of that responses and of course, try what they said. When i add things to modify the @page, i didn't seen any changes on the size of paper that the print preview shows. However, i'm thinking, that the changes are seen after send to print. Im not sure about this, and now, today, i'm unable to do a test (i dont have a printer right now).

    – fornix
    Dec 31 '18 at 16:56



















You should add your svg code, and any other code you may have for this.

– rpivovar
Dec 30 '18 at 0:29





You should add your svg code, and any other code you may have for this.

– rpivovar
Dec 30 '18 at 0:29













Possible duplicate of Possible to force printer setup (paper size) in javascript?

– Heretic Monkey
Dec 30 '18 at 1:24





Possible duplicate of Possible to force printer setup (paper size) in javascript?

– Heretic Monkey
Dec 30 '18 at 1:24













Hi, thank both for your reply. I'm not sure if my code will help, its simple an image an a text with width 975 px and height 700 ! If you think it will, please tell me, and i will add it. @HereticMonkey, i've seen some of that responses and of course, try what they said. When i add things to modify the @page, i didn't seen any changes on the size of paper that the print preview shows. However, i'm thinking, that the changes are seen after send to print. Im not sure about this, and now, today, i'm unable to do a test (i dont have a printer right now).

– fornix
Dec 31 '18 at 16:56







Hi, thank both for your reply. I'm not sure if my code will help, its simple an image an a text with width 975 px and height 700 ! If you think it will, please tell me, and i will add it. @HereticMonkey, i've seen some of that responses and of course, try what they said. When i add things to modify the @page, i didn't seen any changes on the size of paper that the print preview shows. However, i'm thinking, that the changes are seen after send to print. Im not sure about this, and now, today, i'm unable to do a test (i dont have a printer right now).

– fornix
Dec 31 '18 at 16:56














1 Answer
1






active

oldest

votes


















0














I needed to add a negative margin to the @page in order to remove the white border. But printers may decide they want that margin.






*{
margin:0;
padding:0;
}
svg{max-width:100vh;}

@media print{
@page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}

<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>





This is the result I get






share|improve this answer
























  • Hi, thank you for your answer. However i think you misunderstood what i wanted to say (i don't blame you, my english sucks !). I add a new image of what i need. I don't want to set to 0 the margin of printers; and the white borders can easily be taken of by adding some *{margin:0}. In the example you send, the "big paper" is A4, i want to set that to a custom size.

    – fornix
    Dec 31 '18 at 17:02











  • Thank you for the feedback. I gather from your images that you are speaking Spanish. This is just to let you know that there is a Spanish Stack Overflow where you can ask questions in Spanish.

    – enxaneta
    Dec 31 '18 at 17:16











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53974359%2fset-custom-page-size-in-chrome-preview-dialog-for-print%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














I needed to add a negative margin to the @page in order to remove the white border. But printers may decide they want that margin.






*{
margin:0;
padding:0;
}
svg{max-width:100vh;}

@media print{
@page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}

<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>





This is the result I get






share|improve this answer
























  • Hi, thank you for your answer. However i think you misunderstood what i wanted to say (i don't blame you, my english sucks !). I add a new image of what i need. I don't want to set to 0 the margin of printers; and the white borders can easily be taken of by adding some *{margin:0}. In the example you send, the "big paper" is A4, i want to set that to a custom size.

    – fornix
    Dec 31 '18 at 17:02











  • Thank you for the feedback. I gather from your images that you are speaking Spanish. This is just to let you know that there is a Spanish Stack Overflow where you can ask questions in Spanish.

    – enxaneta
    Dec 31 '18 at 17:16
















0














I needed to add a negative margin to the @page in order to remove the white border. But printers may decide they want that margin.






*{
margin:0;
padding:0;
}
svg{max-width:100vh;}

@media print{
@page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}

<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>





This is the result I get






share|improve this answer
























  • Hi, thank you for your answer. However i think you misunderstood what i wanted to say (i don't blame you, my english sucks !). I add a new image of what i need. I don't want to set to 0 the margin of printers; and the white borders can easily be taken of by adding some *{margin:0}. In the example you send, the "big paper" is A4, i want to set that to a custom size.

    – fornix
    Dec 31 '18 at 17:02











  • Thank you for the feedback. I gather from your images that you are speaking Spanish. This is just to let you know that there is a Spanish Stack Overflow where you can ask questions in Spanish.

    – enxaneta
    Dec 31 '18 at 17:16














0












0








0







I needed to add a negative margin to the @page in order to remove the white border. But printers may decide they want that margin.






*{
margin:0;
padding:0;
}
svg{max-width:100vh;}

@media print{
@page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}

<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>





This is the result I get






share|improve this answer













I needed to add a negative margin to the @page in order to remove the white border. But printers may decide they want that margin.






*{
margin:0;
padding:0;
}
svg{max-width:100vh;}

@media print{
@page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}

<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>





This is the result I get






*{
margin:0;
padding:0;
}
svg{max-width:100vh;}

@media print{
@page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}

<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>





*{
margin:0;
padding:0;
}
svg{max-width:100vh;}

@media print{
@page{
margin:-1em;
padding:0;
width:100%;
}
svg {
margin:0;
width:100%;
}
}

<svg viewBox = "0 0 100 60">
<rect width="100" height="100" fill="pink" />
<text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>






share|improve this answer












share|improve this answer



share|improve this answer










answered Dec 30 '18 at 10:00









enxanetaenxaneta

7,2492516




7,2492516













  • Hi, thank you for your answer. However i think you misunderstood what i wanted to say (i don't blame you, my english sucks !). I add a new image of what i need. I don't want to set to 0 the margin of printers; and the white borders can easily be taken of by adding some *{margin:0}. In the example you send, the "big paper" is A4, i want to set that to a custom size.

    – fornix
    Dec 31 '18 at 17:02











  • Thank you for the feedback. I gather from your images that you are speaking Spanish. This is just to let you know that there is a Spanish Stack Overflow where you can ask questions in Spanish.

    – enxaneta
    Dec 31 '18 at 17:16



















  • Hi, thank you for your answer. However i think you misunderstood what i wanted to say (i don't blame you, my english sucks !). I add a new image of what i need. I don't want to set to 0 the margin of printers; and the white borders can easily be taken of by adding some *{margin:0}. In the example you send, the "big paper" is A4, i want to set that to a custom size.

    – fornix
    Dec 31 '18 at 17:02











  • Thank you for the feedback. I gather from your images that you are speaking Spanish. This is just to let you know that there is a Spanish Stack Overflow where you can ask questions in Spanish.

    – enxaneta
    Dec 31 '18 at 17:16

















Hi, thank you for your answer. However i think you misunderstood what i wanted to say (i don't blame you, my english sucks !). I add a new image of what i need. I don't want to set to 0 the margin of printers; and the white borders can easily be taken of by adding some *{margin:0}. In the example you send, the "big paper" is A4, i want to set that to a custom size.

– fornix
Dec 31 '18 at 17:02





Hi, thank you for your answer. However i think you misunderstood what i wanted to say (i don't blame you, my english sucks !). I add a new image of what i need. I don't want to set to 0 the margin of printers; and the white borders can easily be taken of by adding some *{margin:0}. In the example you send, the "big paper" is A4, i want to set that to a custom size.

– fornix
Dec 31 '18 at 17:02













Thank you for the feedback. I gather from your images that you are speaking Spanish. This is just to let you know that there is a Spanish Stack Overflow where you can ask questions in Spanish.

– enxaneta
Dec 31 '18 at 17:16





Thank you for the feedback. I gather from your images that you are speaking Spanish. This is just to let you know that there is a Spanish Stack Overflow where you can ask questions in Spanish.

– enxaneta
Dec 31 '18 at 17:16


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53974359%2fset-custom-page-size-in-chrome-preview-dialog-for-print%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







kd,0vsyCaQAmAAXXHsJPtV,RR C fccGDh,T2q0ARS2srjwTNDV19oCEhR muejoA6oCMYp,SZ
LC44TqdJv

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas