Superscript and subscript about pdfmake HOT 24 CLOSED

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

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

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

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.

1. Copy and paste for example kg/cm² or the superscript what show of writing in google.
2. Paste la next code in http://pdfmake.org/playground.html that running
   var dd = {
   content: [
   'El m² in the news',
   ]
   }
3. Good luck :3

from pdfmake.