Set custom page size in chrome preview dialog for print
![Multi tool use Multi tool use](http://sgv.ssvwv.com/sg/ssvwvcomimagb.png)
Multi tool use
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
add a comment |
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
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
add a comment |
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
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
javascript html css svg
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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>
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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>
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
add a comment |
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>
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
add a comment |
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>
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>
*{
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>
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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