pdfmake
pdfmake copied to clipboard
bpampuch
Align text in a table column vertically
Is it possible to center some text vertically such that the text is the same distance apart from the top and bottom borders?
I'm aware of alignment : 'center' but this only works horizontally.
not at the moment, this would be a little bit problematic to support all boundary cases
Yes. to be able to align text to the bottom border of a table cell would be useful.
I've managed to do this by using html canvas to create vertical text and then importing it in as an image
// define your function for generating rotated text
writeRotatedText = function(text) {
var ctx, canvas = document.createElement('canvas');
// I am using predefined dimensions so either make this part of the arguments or change at will
canvas.width = 36;
canvas.height = 270;
ctx = canvas.getContext('2d');
ctx.font = '36pt Arial';
ctx.save();
ctx.translate(36,270);
ctx.rotate(-0.5*Math.PI);
ctx.fillStyle = '#000';
ctx.fillText(text , 0, 0);
ctx.restore();
return canvas.toDataURL();
};
// set the fitted width/height to a fraction for mitigating pixelation on print/zoom
var tableBody = [
[{image: writeRotatedText('I am rotated'), fit:[7,53], alignment: 'center'}]
];
// use this body in a table definition
EDIT: Sorry guys, I thought this was about "vertically rotated text" since I was looking for that when I saw this issue. I'm leaving this reply here in case anyone still finds this useful.
The only way I could do it was by setting margin-top. i.e.: margin: [0, 20, 0, 0]
I think this feature is really an important one. As we really need to tweak vertical alignment in the table cell most often. Is there any recent update on this issue?
Im new on github, sorry for the dumb question, but the commit by sherpya fixed this issue? I tried putting verticalAlign: "center" in my code and it didnt work! :(
@Daniel147 it might but he pushed it to his own fork. When he makes a Pull Request to add it to this repro and when it gets accepted then it will.
