Pdfmake: Superscript and subscript

[revdave33]

I have a document that uses a lot of superscripted numbers (verse markings for scripture text). If it isn't possible, I could make them smaller and italicized, but the ability to make them superscript would be great.

[bpampuch]

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

[gregoralbrecht]

Can I ask what happened to this feature request? Any chance we're gonna see superscript in the future?

[steschi]

I would need this feature as well... any information about it?

[liborm85]

PdfKit issue: https://github.com/devongovett/pdfkit/issues/15

[myElectrical]

I am trying to do some engineering documents and superscripts/subscripts are everywhere. This would be a really useful feature.

[Mourdraug]

In case someone was looking for superscript workaround, this works pretty well for me:
{ columns: [ { text: 'abc', width: 'auto' }, { text: '2', fontSize: 8, } ] }

[rabraha3]

That columns solution is pretty good for footnotes! What if we don't want the tabular look (columns)? E.g.,

¹ 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?

[rabraha3]

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.

[mkorcha]

@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.

[aik099]

The approach from https://github.com/bpampuch/pdfmake/issues/36#issuecomment-394313884 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'}
    ]
}

[rabraha3]

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.

[rabraha3]

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 ...

[mkorcha]

@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.

[pcbimon]

@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: ''
},

[koshkarov]

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

[rabraha3]

@pcbimon

@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?

[rabraha3]

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.

[Mourdraug]

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.

[arnotixe]

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

[SouengKimmeng]

I'm try with text: ['some', {text:'sub', offset: '30%}, 'text] but it did not work, any one help for this please

[SouengKimmeng]

superscripts

Hello can you show code for us to practice. Thank

[liborm85]

Implemented by PR https://github.com/bpampuch/pdfmake/pull/2128 (for 0.1 branch) and by commit https://github.com/bpampuch/pdfmake/commit/99acfe946835d4c6a53a38faf6aad543ace9b0d3 (for master).