Comments (24)
I am trying to do some engineering documents and superscripts/subscripts are everywhere. This would be a really useful feature.
from pdfmake.
Unfortunately, non of the suggested solutions above worked for me, because I needed to use superscript in table header that is centered .
But I found another one - to use Unicode superscript characters:
https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts
Here is the object with superscripts that I use, but you can take the codes for subscripts too from the Wikipedia page above.
const superscripts = {
0: '\u2070',
1: '\u00B9',
2: '\u00B2',
3: '\u00B3',
4: '\u2074',
5: '\u2075',
6: '\u2076',
7: '\u2077',
8: '\u2078',
9: '\u2079',
};
Unfortunately, the default (which is included already) Roboto font supports only superscript numbers from 1 to 4. I solved this by setting my font to OpenSans (font and how-to).
P.S. Here is vfs_fonts.js with OpenSans whoever needs it: vfs_fonts.zip
from pdfmake.
I found one way of including the superscript as a style property, just like you'd change the font size. E.g., {text: "1", fontSize: 5, sup: true}
. This (manually) makes the font size smaller and moves the text up towards the top of the line.
I added the sup
property (with default value false
) into the styleContextStack.js
and in the textTools.js
files (the latter simply to copy all properties. Then, in printer.js
, replace line 407 with
var newY = y + shiftToBaseline;
if (inline.sup){
newY -= inline.fontSize*0.75;
}
pdfKitDoc.text(inline.text, x + inline.x,newY, options);
This is a relatively slow way, and we need to add in some automated fontSize resizing (make the fontSize to 75% original font size?).
This code prints the text normally, but moves the y-position up (toward the top of the page) a little bit. The text is moved up proportionally to the fontSize property, which helps with consistency. Maybe this vertical offset should be -line.inlines[i-1].fontSize
-- should be the previous text's fontSize.
from pdfmake.
In case someone was looking for superscript workaround, this works pretty well for me:
{ columns: [ { text: 'abc', width: 'auto' }, { text: '2', fontSize: 8, } ] }
from pdfmake.
@rabraha3 I figure you mean the modifications I made to keep the decorations at the right position. Here are the changes I made for my use case, not sure how this will translate for you. I figure you mean the drawing portion. If you meant something else, sorry! I haven't really messed with this much since.
from pdfmake.
@rabraha3 Thanks for that info! It appears you also want to modify the following couple of draws with the updated Y value as well, otherwise text decorations won't draw in the proper place.
from pdfmake.
The approach from #36 (comment) does work with inline superscripting when you specify width: 'auto'
for every text node. Unfortunately doesn't play well with line wrapping and that's why you need to manually split text lines to avoid wrapping and then inject superscripts:
'line 1',
{
columns: [
{text: 'line 2 before superscript', width: 'auto'},
{text: 'superscript', width: 'auto', fontSize: 8},
{text: 'line 2 after superscript', width: 'auto'}
]
}
from pdfmake.
As a feature, what do people want? Just a default height-offset for superscript and subscript? Or do you want more fine-grained control, like in MS Word -- where you can specify % offsets?
Do you want to manually shrink the font size, or have a default? (again, fine-grained control or no control)?
The fine-grained control requires more changes than the default option.
from pdfmake.
I'm adding it to "more building blocks" milestone, however I'll have to update the deadlines :) I've been off for a loong time
from pdfmake.
Can I ask what happened to this feature request? Any chance we're gonna see superscript in the future?
from pdfmake.
I would need this feature as well... any information about it?
from pdfmake.
PdfKit issue: foliojs/pdfkit#15
from pdfmake.
That columns
solution is pretty good for footnotes! What if we don't want the tabular look (columns)? E.g.,
1 text text ...
same footnote text
Notice the 2nd line is left-justified. I found that using the relativePosition
property for a content object works well:
content: [
...
{
text: [{text: "1",fontSize:8}],
relativePosition: {x: 0, y: 0}
},
{
text: "footnote text",
leadingIndent: 10
},
...
]
The leadingIndex
is to provide some space for the footnote symbol (the 1
in this case). Is there a decent way of using the relativePosition
property for inline superscripting?
from pdfmake.
Awesome! I agree that the inline solution doesn't play well with line wrapping. I think the columns idea is great! Using columns may go towards the final solution. Do you know why the y-position for the text is aligned at or near the ascender (as opposed to the baseline) within the columns object?
The thing about using columns is spacing; there doesn't seems to be any whitespace between the "superscript" and the text on either side. If we put a "spacer" object in between: e.g., {text: " ", width: 3}
, we can recover a space -- you'd have to manually set the width to be "n" pixels, which can probably depend on the surrounding font size.
I'm note sure the exact size to use -- a single space (
) will depend on both the font size and the font family.
In addition, we need to worry about the length of the line. If we have too much text, we can get very squished text; try:
{
columns: [
{text: 'line 2 before superscript', width: 'auto'},
{text: "superscript ", width: 'auto', fontSize: 8},
{text: " ", width: 3},
{text: ' line 2 after superscript blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah', width: 'auto'}
],
}
Noting the small space between the "superscript" and the following text.
Maybe combining the inline solution outlined above with the columns ... ? There'd need to be a much better way of vertically-aligning the superscripted (and then also subscripted) text. The way that Word handles it -- there is a default height, and the user can specify the vertical offset, as a percentage of the font size.
from pdfmake.
I've tried out both superscript and subscripting:
(image taken in the dev-playground)
There is also the ability to add a custom offset / font size within the superscript / subscript config options. The image shows the offset in percentage (percentage of given font size). Instead of style "sup: true" or "sub: true", we can pass a more complex object:
{
text: "1",
sup: { offset: '30%', fontSize: 8 }
}
The fontSize
parameter is optional. If not given, it defaults to the normal fontSize, specified in a parent node.
The code is a bit messy, un-tested, and not really documented. So that needs to be worked on.
Basically, it is the same as I tried before, newY -= inline.fontSize ...
. Just, now it accepts a wider range of parameters.
@mkorcha do you know how to change the text decorators? I couldn't get it working for the on inline element ...
from pdfmake.
@rabraha3 I figure you mean the modifications I made to keep the decorations at the right position. Here are the changes I made for my use case, not sure how this will translate for you. I figure you mean the drawing portion. If you meant something else, sorry! I haven't really messed with this much since.
Can you tell me for some example?
My code not working
{text: [
{text:'CO'},
{text:'2', sup: { offset: '30%', fontSize: 8 }},
{text:'e',fontSize: 14},
], alignment: 'center' , style: ''
},
from pdfmake.
@rabraha3 I figure you mean the modifications I made to keep the decorations at the right position. Here are the changes I made for my use case, not sure how this will translate for you. I figure you mean the drawing portion. If you meant something else, sorry! I haven't really messed with this much since.
Can you tell me for some example?
My code not working
{text: [ {text:'CO'}, {text:'2', sup: { offset: '30%', fontSize: 8 }}, {text:'e',fontSize: 14}, ], alignment: 'center' , style: '' },
Sorry for the late reply; I haven't paid much attention to these updates. The code for the general offset is not up yet; it was on a branch on my fork. So the offset
sup style can't work. I am in the process of updating my fork to the v0.2.0-alpha.0 branch.
Is it worth having an offset that can be specified? Or is a default fine?
from pdfmake.
It's always nice to have extra flexibility, but if it's more work than simply exposing aditional parameters I'd be more than happy with defaults option on this one.
from pdfmake.
Note that if using things like text: ['some', {text:'sub', offset: '30%}, 'text]
, the text might be line wrapped if 'auto' is set on that column, even if the resulting look has no spaces in it. So, apparently it's not considered a single word any more. Just a heads up to devs :D
from pdfmake.
I'm try with text: ['some', {text:'sub', offset: '30%}, 'text] but it did not work, any one help for this please
from pdfmake.
superscripts
Hello can you show code for us to practice. Thank
from pdfmake.
Implemented by PR #2128 (for 0.1 branch) and by commit 99acfe9 (for master).
from pdfmake.
@liborm85 {sup: true}
& {sub: true}
both worked for me. Can you please include these in the docs? I didn't find any references to these features there.
from pdfmake.
- Copy and paste for example kg/cm² or the superscript what show of writing in google.
- Paste la next code in http://pdfmake.org/playground.html that running
var dd = {
content: [
'El m² in the news',
]
} - Good luck :3
from pdfmake.
Related Issues (20)
- Displaying footer on everypage when generating PDF through HTML HOT 1
- page-break-inside: avoid; doesn't work when generating PDF from html HOT 1
- Query regarding use of polyfill.js in pdfmake HOT 1
- Uncaught (in promise) File 'Roboto-Regular.ttf' not found in virtual file system HOT 1
- Page break not detected in empty rows that are not headers
- Help needed: how can i forcefully prevent my table cell from wrapping onto the next page? HOT 3
- Table border extends outside the table when table spans across multiple pages HOT 1
- Setting language has no effect on rendered PDF HOT 1
- Deprecation warning: [email protected] HOT 1
- Line issue while table starts in new page HOT 1
- Pdf layout breaks when table has headerRows = 0 and keepWithHeaderRows > 0 HOT 1
- How should we hide the header and footer sections for some of the pages HOT 1
- Jj
- Issue with rounded table borders not fixed,
- Issue with rounded table borders not fixed, HOT 1
- Rtl Direction issue HOT 1
- Top Border Not Rendering Correctly Across Page Breaks with dontBreakRows: true HOT 2
- Error when building the project using pdfMake in my React Vite project
- How am I supposed to determine table row/col from a layout callback?
- Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pdfmake.