wkhtmltopdf export svg file to pdf "tight" - without margins? - pdf

I use on Windows 10, under MSYS2:
$ wkhtmltopdf.exe --version
wkhtmltopdf 0.13
( I have also tried wkhtmltopdf 0.12.6 (with patched qt) - but it cannot convert the texts in the SVG correctly )
I want to convert the following SVG, test_drawio.svg:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="373px" height="223px" viewBox="-0.5 -0.5 373 223" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 141 71 L 186 71 L 186 151 L 220.9 151" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 227.65 151 L 218.65 155.5 L 220.9 151 L 218.65 146.5 Z" fill="#000000" stroke="#000000" stroke-width="3" stroke-miterlimit="10" pointer-events="all"/><rect x="1" y="1" width="140" height="140" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 71px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 17px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Some text<br style="font-size: 17px" />that usually<br style="font-size: 17px" />breaks when <br style="font-size: 17px" />exported to SVG</div></div></div></foreignObject><text x="71" y="76" fill="#000000" font-family="Helvetica" font-size="17px" text-anchor="middle">Some text...</text></switch></g><ellipse cx="301" cy="151" rx="70" ry="70" fill="#ffffff" stroke="#000000" stroke-width="3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 151px; margin-left: 232px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 17px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Some more<br />text<br />that usually<br />breaks in<br />SVG</div></div></div></foreignObject><text x="301" y="156" fill="#000000" font-family="Helvetica" font-size="17px" text-anchor="middle">Some more...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
So, I try this command first:
$ wkhtmltopdf.exe test_drawio.svg test_drawio.pdf
Loading page (1/2)
Printing pages (2/2)
Done
This results with PDF:
So, the resulting PDF is like A4, which is not what I want - I want a PDF of the same size as the SVG.
SVG has width="373px" height="223px"; so assuming dots-per-inch (ie. pixels-per-inch) of 96, I have for size in inches:
width: 373/96 = 3.88542 in
height: 223/96 = 2.32292 in
... and I try this command:
$ wkhtmltopdf.exe --dpi 96 --page-width 3.88542in --page-height 2.32292in test_drawio.svg test_drawio.pdf
Loading page (1/2)
Printing pages (2/2)
Done
This results with PDF:
Better, but there are some margins, which I'd like to get rid of (if I open the SVG in Inkscape, it shows a "tight box" with no margin - unfortunately Inkscape v1.0.2-2 cannot handle the texts in this SVG).
So, I try to manually set the margins:
$ wkhtmltopdf.exe --dpi 96 -L 0in -R 0in -T 0in -B 0in --page-width 3.88542in --page-height 2.32292in test_drawio.svg test_drawio.pdf
Loading page (1/2)
Printing pages (2/2)
Done
... which results with PDF:
... and there are still margins at right and at bottom.
Is it possible to use wkhtmltopdf to export SVG to PDF, exactly as the specified size in SVG - without additions of any margins/whitespace?

Related

How to stretch product's rows to maximum?

I work on Nuxt.js (Vue.js) application that uses BootstrapVue (Bootstrap based) package.
The current situation is as following:
The code looks as following:
<template lang="pug">
b-container
b-row
b-col(:cols="8")
b-container
b-row
b-list-group
b-list-group-item.flex-column.align-items-start(
v-for="(item, index) in 7" :key="index"
href='#'
)
b-container
b-row
b-col(:cols="1").d-flex.align-items-center.justify-content-center
b-form-checkbox {{ index + 1 }}
b-col(:cols="11")
basket-item(:itemNumber="index + 1" :checkStatus="accepted")
b-row.style-row-middle
b-button.close(type='button' aria-label='Close' #click="onClose()")
span(aria-hidden='true') ×
u Удалить выбранное
b-button(type='button' #click="onContinue()").btn.btn-lg.buy__button Продолжить покупки
b-row
div
hr
| * доставка будет осуществлена из Санкт-Петербурга;
br
| * наш менеджер свяжется с вами сразу после обработки заказа;
b-col(:cols="4" class="col2")
form(ref='form' #submit.stop.prevent='handleSubmit').set-padding
div
strong
label ЗАКАЗ
div
strong
label Всего товаров: 1
div
strong
label На суму: 100 000 р
b-form-group(label='')
b-form-group(label='Телефон' label-for='type-tel' invalid-feedback='Phone is required')
b-form-input(id="type-tel" type="tel" v-model='phone' required)
b-form-group(label='E-mail' label-for='type-email' invalid-feedback='E-mail is required')
b-form-input(id="type-email" type="email" v-model='email' required)
b-form-group(label='Ваше имя' label-for='name-input' invalid-feedback='Name is required' :state='nameState')
b-form-input(:id="name-input" v-model='name' :state='nameState')
div.d-flex.align-items-center.justify-content-center
b-button(type='submit' variant='primary' size="lg") Оформить заказ
</template>
<style lang="sass">
.list-group
margin-bottom: 10px
max-height: 400px
-webkit-overflow-scrolling: touch
overflow-y: auto
.list-group-item
border-style: none
.set-padding
padding-bottom: 7px
padding-top: 7px
.style-row
border: solid 1px black
display: flex
justify-content: space-between
.style-row-middle
display: flex
justify-content: space-between
padding: 4px
.col1
border: 1px solid red
.col2
border: 10px solid rgb(0, 70, 140)
.buy__button
background-color: #eee
background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%)
border: 1px solid #cccccc
color: black
font-size: 16px
text-shadow: 0.5px 0.866px 0 white
.set-border
border: 1px solid gray
border-radius: 3px
margin-bottom: 2px
margin-top: 2px
</style>
I need to stretch product's rows to maximum, but I'm not sure how to do it.
The screenshot shows padding in .list-group-item that could be reduced to 2px:
.list-group-item
padding: 2px
Also, .list-group should take the full width available in the row:
.list-group
width: 100%
demo

How to apply scrollbar-primary to a div?

I found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}

tooltip with arrow with vue's style binding

I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:
<div class="test">
<span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.marker::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: attr(color) transparent transparent transparent;
}
</style>
But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.
As suggested by #Stephan-v in comments, I added separate element for arrow. The final code looks like something below:
<div class="test">
<span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
<span class="marker" :style="{'background': dynamicColor}">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.markertip {
content: "";
position: absolute;
top: -45%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
}
</style>

Adding Html Buttons/Html Elements inside a Cytoscape node

How Can I add an Html elements inside a Cytoscape node?
E.g: I want to add to every node - 2 small buttons, so the user can click on each one of the buttons and the value inside this node will change.
Example of the graph I want to create
[IMG]http://i57.tinypic.com/1z1bp1l.jpg[/IMG]
It's not possible to render HTML in a canvas, nor would you probably want to for performance. If you really want it on the node, I suggest creating an overlay -- though that has its own set of complications in its implementation. Otherwise, you're far better off placing interactive elements separately from a node (e.g. tooltip, sidebar, menu, etc...).
mxGraph seems to do it by using an SVG foreignObject tag, and within that HTML like so:
<g style="cursor: move;">
<g>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%">
<div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 1212px; margin-left: 839px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
<div>Some HTML inside SVG</div>
</div>
</div>
</div>
</foreignObject>
</g>
</g>
Not sure I want to go there in Cytoscape as its API is too nice to start working round and you'd need to deal with the update event flow, but mxGraph is a fantastic toolkit worth knowing about in this space.

How to Prevent html content from parsing using xslt 1.0

i am generating html from an xml using xslt 1.0, but when i pass the html from one transformation to another ;
it is getting the content displayed and not preserving the actual html with nodes
<tr>
<td>Text1</td>
<td>Text2</td>
<td>Text3</td>
<td>Text4</td>
<tr>
is displaying as Text1Text2Text3Text4, but it should not be
XSLT Code code that i am using is
<ns1:EmailContentAsString>
<div class="rvps8"><table border='1' cellpadding='4' cellspacing='0' style='border-width: 0px; border-collapse: collapse;margin-left:48px'><tr valign='top'><td width='96' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>NV Business Id</span></p></td><td width='230' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>Business Entity Name</span></p></td><td width='180' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>Actions/Amendments</span></p></td><td width='79' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>File date</span></p></td></tr><tr><td colspan='4'><table cellspacing='0' cellpadding='0'><xsl:apply-templates select="/ns2:ExtendedCorpDetails/ns2:ExtendedFinalCorpDetails"/></table></td></tr></table></div>
</ns1:EmailContentAsString>
<xsl:apply-templates select="/ns2:ExtendedCorpDetails/ns2:ExtendedFinalCorpDetails"/>
is used for generating rows shown above
resolved this by modifing the html tags '<' with &#38lt;