Split pages vertically with wkhtmltopdf - wkhtmltopdf

Is it possible to split pages vertically using wkhtmltopdf? This would basically turn a single page into two pages.
I've drawn a little image, maybe that makes it a bit clearer.

I had to face a similar issue in my project.
You have 2 ways to solve the problem:
One way is to solve it using CSS, however the version of webkit included in wkhtmltopdf (at least the stable version) seems to be a bit old and does not support CSS multi-columns directives very well, see here.
For future reference I copy&paste the example template included in the linked issue:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
border: none;
width: 17cm;
}
.container {
/* You *must* define a fixed height which is
large enough to fit the whole content,
otherwise the layout is unpredictable. */
height: 28em;
/* Width and count aren't respected, but you
have to give at least some dummy value (??). */
-webkit-columns: 0 0;
/* This is the strange way to define the number of columns:
50% = 2 columns, 33% = 3 columns 25% = 4 columns */
width: 33%;
/* Gap and rule do work. */
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid black;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<h1>An Article</h1>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
Another option (the one I ended up using) is to setup the layout of the page using a table with 2..n columns. You can then use a template engine or even JavaScript to fill the page with content and split the pages.
This approach is simple and works well if the content in the page has predictable size, in fact you cannot rely on wkhtmltopdf for splitting the content into several pages, you must do it yourself with the code.
Approach 1) is quite buggy but might be worth a shot if you're dealing with text, which might not be very suitable for approach 2).
If your content is regular it will be reasonably easy to hop on approach 2) and lay down the elements and split the pages using the code.

Related

How stop d3 tooltip from going off page?

I have a tooltip that appears when the user mouses over an element. The problem is that when the tooltip mouses over a word on the far right part of the screen, it can no longer be seen.
I tried the answer by #EPurpl3 here, but couldn't figure out how to replace the span element with the reference to d.TooltipInfo.
I also tried to add a line to the effect of <body onResize="window.location=window.location;"> as described here - but it had no effect.
Here is the code:
var doc = URL.createObjectURL(new Blob([`TooltipInfo Category Function1 Function2 Retention
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "General Furry, Program and Subject Files" Average Quantity and Planning Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Senate Committee on animal Standards Bowl and Plate Design Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Published Canine Bowl and Plate Design Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine case files Bowl and Plate Design Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files Avoiding Neck Strain Jack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files Drooling Jack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Canine Files Drooling Jack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ADVERTISING At home Jack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum PROMOTIONS At home Jack 100
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Publications At homeio Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Public and Information Services At homeio Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special treats Jack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Petting Services Getting special pats Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum DEVELOPMENT Optimal time of day - walking Snack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum INCOME AND REVENUE Optimal time of day - walking Snack 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Fundraising Optimal time of day - walking Snack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Fundraising Optimal time of day Snack 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum DEVELOPMENT Optimal time of day Snack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum INCOME AND REVENUE Optimal time of day Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Protective Measures Snack 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Protective Measures Pack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Wishbone Observant of Limps Etc Pack 8
`]));
d3.tsv(doc)
.row(function(d) {
return {
TooltipInfo: d.TooltipInfo,
Category: d.Category,
Function1: d.Function1,
Function2: d.Function2
};
})
.get(function(error, data) {
// var allGroup = d3.map(data, function(d){return(d.Function1)}).keys()
// console.log(allGroup)
// console.log(allGroup.length);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
var height = 150,
width = 300;
var nest = d3.nest()
.key(function(d) {
return d.Function2;
})
.key(function(d) {
return d.Function1;
})
.key(function(d) {
return d.Category;
})
.entries(data);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
var height = 80,
width = 150;
var divs = d3.select(".container")
.selectAll(null)
.data(nest)
.enter()
.append("div")
.attr("class", "innerdiv");
divs.append("p")
.html(function(d) {
return d.key;
});
var divs2 = divs.selectAll(null)
.data(function(d) {
return d.values;
})
.enter()
.append('div')
.attr("class", "first")
divs2.append("text")
.attr('class', 'label1')
.attr('x', 0)
.attr('y', 0)
.style("font-size", "16px")
.style("font-weight", "bold")
.style("fill", "white")
.attr("width", 400)
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'start')
var svgs2 = divs2.selectAll(null)
.data(function(d) {
return d.values;
})
.enter()
.append('svg')
.attr("class", "second")
.attr("width", function(d) {
return String(d.Category).length * 31
})
// .attr("width",200)
.attr("height", 20);
svgs2.append("text")
.attr('class', 'label2')
.attr('x', 10)
.attr('y', 17)
.style("font-size", "12px")
.text(function(d) {
return d.key;
})
.attr('text-anchor', 'start')
var rect = svgs2.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.filter(function(d, i) {
const x = d3.select(this.parentNode).datum();
return x.key == d.Category ? 1 : 0;
})
.attr("height", "12")
.attr("width", function(d, i) {
return String(d.Category).length * 7.3
})
.attr("x", function(d, i) {
return (i * 20) + 10;
})
.attr("y", 8)
.attr("fill", "white")
.style("opacity", "0")
.style("cursor", "pointer")
.on("mouseover", function(d, i) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(`${d.TooltipInfo}`)
.style((function(d) {
return d3.event.pageX > (window.innerWidth) ? "left" : "right"
}), d3.event.pageX + "px")
.style((function(d) {
return d3.event.pageY > (window.innerHeight) ? "top" : "bottom"
}), d3.event.pageY + "px")})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
});
div.tooltip {
position: absolute;
text-align: left;
width: 500px;
height: auto;
padding: 3px;
font: 17px sans-serif;
color: white;
border: 0px;
border-radius: 3px;
pointer-events: none;
background: black;
}
.tooltip {
display: inline-block;
text-indent: 0em;
}
h1 {
font-size: 30px;
font-family: "Consolas";
float: left;
margin: 0;
}
.container {
display: flex;
padding: 0px;
flex: 1 1 1;
flex-wrap: nowrap;
float: left;
}
.innerdiv {
text-align: left;
font-size: 21px;
font-family: "Consolas";
flex: 1 1 1;
}
.innerdiv+.innerdiv {
padding-left: 20px;
border-left: 2px solid lightgray;
}
.legend {
position: fixed;
font-family: "Century Gothic";
}
/* div {width: auto; height: auto; } */
.first>*:first-child {
width: 100%;
}
div.first {
display: flex;
padding: 0px;
flex: 0 0 100%;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>
<div class="container"></div>
Update: I can stop the tooltip from disappearing from the left or the right of the window with this:
.style("left", function() {return d3.event.pageX >(window.innerWidth*.75) ? d3.event.pageX - 520+"px": d3.event.pageX + "px"})
I'm now working on making sure that tooltip doesn't disappear out the top or the bottom of the window. I first figured out how to make the "bottom" style look right (requires subtracting mouse position from the total height - something about the way d3 draws a page from top to bottom):
.style("bottom", window.innerHeight - d3.event.pageY+20 +"px")
The problem now is that the tooltip disappears out of the top of the page. I thought I could set a conditional function that will select either "top" or "bottom" for the style attribute. But I don't think d3 allows a function to be set on the style - only on the value. To illustrate, the below line of code shows pretty much the same as the above line of code, but the addition of a function on the style messes up the tooltip position.
.style(function() {return "bottom"}, window.innerHeight - d3.event.pageY+20 +"px")
So: need to figure out some kind of function to call on the value, to stop the tooltip from going out the top of the page. The logic for this is not as straightforward as the horizontal positioning, because the width of the tooltip is fixed, but the height of the tooltip varies with the content. Unless a percentage might work?
Figured it out - needed getBoundingClientRect() to get the height of the tooltip. Once I have the height, and the height of the window, I can write a function that checks if the mouse is at a position less than window.innerHeight - clientrect.height.
Code:
var rect = svgs2.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.filter(function(d, i) {
const x = d3.select(this.parentNode).datum();
return x.key == d.Category ? 1 : 0;
})
.attr("height", "12")
.attr("width", function(d, i) {
return String(d.Category).length * 7.3
})
.attr("x", function(d, i) {
return (i * 20) + 10;
})
.attr("y", 8)
.attr("fill", "white")
.style("opacity", "0")
.style("cursor", "pointer")
.on("mouseover", function(d, i) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(`${d.TooltipInfo}`)
.style("left", function() {
return d3.event.pageX > (window.innerWidth * .75) ? d3.event.pageX - 520 + "px" : d3.event.pageX + "px"
})
.style("bottom", function() {
var clientrect = d3.select(this).node().getBoundingClientRect();
return d3.event.pageY > (window.innerHeight - clientrect.height) ? window.innerHeight - d3.event.pageY + "px" : window.innerHeight - d3.event.pageY - clientrect.height + "px"
})
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});

MacOS complete search in huge text file and output results (find solution to TextPipe)

I have a text file ar. 50 GB size.
I used to process it through TextPipe but atm only mac is available and no TextPipe access.
Is it possible to initiate regex search in this file with good results saving to some other file per matching line?
I was thinking about vim editor but have no sufficient knowledge on where to search for.
Would appreciate any suggestions.
As an example let's assume that I have the code below in my initial.txt file and I want to save lines with "Lorem" in line processed.txt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
For fixed strings use fgrep:
fgrep Lorem initial.txt > processed.txt
For regular expressions use grep and egrep (they have slightly different regexp syntax).
Vim is "genetically" related to other text-processing tools, such as sed or grep. And it also has an embedded sophisticated scripting language, so it is perfectly capable of batch text processing.
But Vim is an interactive text editor, so it feels a little wrong to use it merely as a replacement of awk or grep. However, if you're going to learn and use it for both editing and scripting, it's elegant and powerful.
To get some taste of Vim, you can solve your problem as follows (typing ':' in normal mode will automatically switch into command mode):
:e initial.txt
:g/Lorem/.w! >>processed.txt
I was thinking about vim editor but have no sufficient knowledge on where to search for. Would appreciate any suggestions.
The main problem with Vim is that you have to start from the very beginning, i.e. to learn how to open, edit and save files, and even how to properly exit the application. So you should download and install it and run vimtutor. Next, you should get used to Vim's embedded help system (:h user-manual) which by far is the best Vim's feature.
If you look for more books and tutorials, you can start from here. IMHO, Steve Oualline's "Vi IMproved" is still the best for beginners; and Drew Neil's "Practical Vim" is highly recommended for advanced vimmers.

Split long strings without breaking word

I have to display multiple long strings (with different length), but I can only display chunks of strings that need them to be between 275 and 295 characters.
So if I have a 3000 words string, It'd be displayed in about 10 pieces.
I'm looking for a way to find the next blank.
For example:
if str[275] != " "
# find next blank
p str[0..next_blank]
else
p str[0..275]
end
I thought of finding the index of the next blank in the 275-295th characters range, but I couldn't find how to do it in Ruby.
Any help will be much appreciated !
Rails has a method word_wrap which uses a simple regular expression:
str = 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
puts str.gsub(/(.{1,80})(\s+|$)/, "\\1\n")
Output:
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute
iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
The regular expression matches (and captures) up to 80 characters (.{1,80}) that are followed by whitespace or end-of-line (\s+|$).
Not using regular expresions, tear the input apart and put it back together:
str = 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
def reformat_wrapped(s, width=78)
lines = []
line = ""
s.split(/\s+/).each do |word|
if line.size + word.size >= width
lines << line
line = word
elsif line.empty?
line = word
else
line << " " << word
end
end
lines << line if line
return lines.join "\n"
end
#=>puts reformat_wrapped(str, 78)
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.

Escape encoding of liquid tags in Nokogiri

We are using Nokogiri gem and the html we get from the test editor is saved using Nokogiri Nokogiri::HTML::fragment(html_text).to_html converts into proper html tags and is getting saved to the database. But we are having some liquid tags which when rendered substitutes the value in the place where tags are added.
eg. html code snippet
<body>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Dolorem quam itaque, dolore esse labore dolorum inventore optio earum iure explicabo impedit eveniet perspiciatis nobis vero culpa aliquid, iusto saepe sunt.</p>
{{some_link}}
<div>
{{payment_link}}
</div>
</div>
</body>
once we convert it into the html tags using nokogiri it gets text in the url gets encoded(href="{{payment_link}}"). Is there a way to escape url encoding for the liquid tags?
This is how the html code when rendered and saved looks like in db
Output data
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br>\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br>\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br>\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n\n<p> </p>\n\n<p>{{payment_link}}</p>"
Expected data
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br>\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br>\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br>\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n\n<p> </p>\n\n<p>{{payment_link}}</p>

Get image from rss xml

I am trying to fetch data from an rss feed but I am having a hard time in getting the image of a blog content/post. It seems like the <img> tag is located inside of a <content:encoded><![CDATA[...]]></content:encoded> element.
I'm not quite sure what to do with this. Any help is much appreciated.
it looks like this
<content:encoded><![CDATA[
<p><img class="class1" title="hello world" src="http://www.mysite.com/images/myPhoto.jpg" alt="" width="550" height="227" /></p>
<p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
]]></content:encoded>
The content of an RSS feed can be anything. Many blogs simply put HTML in the content so you would have to parse the HTML, which can be different every time.
To parse HTML you could turn it into XHTML and then use XPath to query it for the elements you want to find.
If you need more help here, you' ll need to post the structure of the content (if it is known)

Resources