[Feature request] Multiple text objects in one line without bullets or with align #369

vpetzel · 2018-06-29T09:05:03Z

The current system will not allow for multiple text objects without break if there is no bullet or some kind of align specified. This turns into a Problem if you consider, that text formatting (italic, bold, underlinde, strike, ...) are global to one text object. This means, that even code like this

<html>
  <head>
    <script lang="javascript" src="PptxGenJS/libs/jquery.min.js"></script>
    <script lang="javascript" src="PptxGenJS/libs/jszip.min.js"></script>
    <script lang="javascript" src="PptxGenJS/dist/pptxgen.js"></script>
  </head>
  <body>
    <script>
        pptx = new PptxGenJS();
        var slide = pptx.addNewSlide();

        slide.addText([
            { text: 'abc', options: {}},
            { text: 'def', options: {italic:true}}
        ], {x:'0', y:'0', w:'100%', h:'100%', align:'center', valign:'middle'});

//          Save PPTX
        pptx.save('Titel');
    </script>
  </body>
</html>

is not able to achieve this: abc_def_, but will output two seperate lines for abc and def.
This could be easily mended by adding an additional attribute to the text objects, let’s say, break, and change line 3668 from

else if ( idx > 0 && (typeof textObj.options.bullet !== 'undefined' || typeof textObj.options.align !== 'undefined') ) {
				strSlideXml += '</a:p><a:p>' + paragraphPropXml;
			}

to

else if ( idx > 0 && (typeof textObj.options.break === 'undefined' || textObj.options.break) && (typeof textObj.options.bullet !== 'undefined' || typeof textObj.options.align !== 'undefined') ) {
				strSlideXml += '</a:p><a:p>' + paragraphPropXml;
			}

and using the code

<html>
  <head>
    <script lang="javascript" src="PptxGenJS/libs/jquery.min.js"></script>
    <script lang="javascript" src="PptxGenJS/libs/jszip.min.js"></script>
    <script lang="javascript" src="PptxGenJS/dist/pptxgen.js"></script>
  </head>
  <body>
    <script>
        pptx = new PptxGenJS();
        var slide = pptx.addNewSlide();

        slide.addText([
            { text: 'abc', options: {}},
            { text: 'def', options: {italic:true, break:false}}
        ], {x:'0', y:'0', w:'100%', h:'100%', align:'center', valign:'middle'});

//          Save PPTX
        pptx.save('Titel');
    </script>
  </body>
</html>

which will achieve the desired effect.
See this patch:
pptxgen.js.patch.txt

The text was updated successfully, but these errors were encountered:

vpetzel · 2018-06-29T09:08:35Z

abc_def_ is supposed to be abc and def in italic, but GitHub’s italic specified doesn’t seem to like prepending non-whitespace chars.

bigianb · 2018-08-03T12:34:21Z

+1 ... I've just come across this limitation.
There is already a breakline option. Maybe if that is explicitly set to false then the linebreak could be squashed.

vpetzel · 2018-08-03T14:25:01Z

@bigianb If you really need this feature now, you can try using my patch above, it’s literally inserting the check

(typeof textObj.options.break === 'undefined' || textObj.options.break)

into

else if ( idx > 0 && (typeof textObj.options.bullet !== 'undefined' || typeof textObj.options.align !== 'undefined') ) {...}

From my experience it works, but I didn’t try anything too special. Hm, maybe one should change this to

NO ONE SHOULDN’T, I JUST DID NOT THINK WHEN WRITING THIS BIT!

(typeof textObj.options.break !== 'undefined' && textObj.options.break)

thus using this option only if it’s explicitely set to false ...

gitbrent · 2018-08-09T04:31:35Z

I don't see where the library lacks the ability to format on a word-level basis.

This adds italics and bold without forcing a line-break or requiring bullets:

slide.addText(
  [
    { text:'1st word ', options:{ color:'99ABCC', italic:true } },
    { text:'2nd word ', options:{ color:'FFFF00', bold:true } },
    { text:'3rd word ', options:{ color:'0088CC' } }
  ],
  { x:1.5, y:1.5, w:6, h:2, margin:0.1, fill:'232323' }
);

vpetzel · 2018-08-09T08:37:42Z

@gitbrent Your code does not use any kind of align, add align:'center' to the options and you end up with

vpetzel · 2018-08-09T08:40:23Z

Using the code

slide.addText(
    [
        { text:'1st word ', options:{ color:'99ABCC', italic:true } },
        { text:'2nd word ', options:{ color:'FFFF00', bold:true, break:false } },
        { text:'3rd word ', options:{ color:'0088CC', break: false } }
    ],
    { x:1.5, y:1.5, w:6, h:2, margin:0.1, fill:'232323', align:'center' }
    );

with the patch you get what you want

gitbrent · 2018-08-10T04:28:38Z

But alignment necessitates a paragraph as you cant align words...

vpetzel · 2018-08-10T08:34:51Z

But you still have a paragraph, you just don’t add one for each text object. The problem is, that, as soon as an align is specified, you add one
'</a:p><a:p>' + paragraphPropXml
between the different text objects in the array.

gitbrent · 2018-08-15T01:54:34Z

Okay, so what problem are we trying to solve?

Do you have a screencap of the PptxGenJS output versus the result you're looking for.

vpetzel · 2018-08-15T10:29:52Z

When using the code

slide.addText(
    [
        { text:'1st word ', options:{ color:'99ABCC', italic:true } },
        { text:'2nd word ', options:{ color:'FFFF00', bold:true } },
        { text:'3rd word ', options:{ color:'0088CC' } }
    ],
    { x:1.5, y:1.5, w:6, h:2, margin:0.1, fill:'232323', align:'center' }
    );

I get

Note that the three text objects are not in the same line, so if I want to have it like this

there's no way to do it.

PaddingtonTheBear · 2018-12-10T11:04:42Z

@vpetzel, great job on writing this up and providing a fix in the mean time. I'm running into the same issue with this library when I want to style individual words in the PPT.

I couldn't figure this out for the longest time but as you mentioned, it only occurs if you're using the 'align' options, which is a pretty common use case. Adding your patch works great. It should be included in the base library, or if the regular functionality doesn't want to be changed, then add a new config property for the "don't break" scenario.

lejard-h · 2019-08-12T10:00:08Z

Any news on this ? I am facing the same issue.

Fix for gitbrent#369

gitbrent · 2019-08-15T03:25:08Z

I'll get this patched in an upcoming release.

var pptx = new PptxGenJS();
pptx.layout = "LAYOUT_WIDE";
var slide = pptx.addSlide();

// Works
slide.addText(
  [
    { text: "1st line", options: { fontSize: 24, color: "99ABCC" } },
    { text: "2nd line", options: { fontSize: 36, color: "FFFF00" } },
    { text: "3rd line", options: { fontSize: 48, color: "0088CC" } }
  ],
  { x: 1.5, y: 1.5, w: 6, h: 2, margin: 0.1, fill: "232323" }
);

// Creates one word per line (bug: `align` is inherited/applied to each text object)
slide.addText(
  [
    { text: "1st word ", options: { color: "99ABCC", italic: true } },
    { text: "2nd word ", options: { color: "FFFF00", bold: true } },
    { text: "3rd word ", options: { color: "0088CC" } }
  ],
  { x: 1.5, y: 1.5, w: 6, h: 2, margin: 0.1, fill: "232323", align: "center" }
);

pptx.save("PptxGenJS-Issue#369");

kupkama2 · 2019-10-17T09:55:40Z

hey @gitbrent, I just tried this in the 3.0.0-beta.4 and the problem is unfortunately still there.

gitbrent · 2020-02-28T05:07:42Z

Related: Issue #258

Fix for gitbrent#369

gitbrent · 2020-06-22T01:47:51Z

Fixed via #751

gitbrent self-assigned this Dec 12, 2018

gitbrent added the feature:text Text formatting, multi-line, etc. label Dec 12, 2018

lejard-h added a commit to leftyio/PptxGenJS that referenced this issue Aug 12, 2019

Multiple text objects in one line without bullets or with align

22683d7

Fix for gitbrent#369

gitbrent added this to the 2.6.0 milestone Aug 15, 2019

gitbrent modified the milestones: 2.6.0, 3.0.0 Sep 25, 2019

gitbrent modified the milestones: 3.0.0, 3.1.0 Nov 20, 2019

gitbrent modified the milestones: 3.1.0, 3.2.0 Jan 18, 2020

gitbrent added the enhancement-text label Feb 28, 2020

gitbrent mentioned this issue Mar 4, 2020

Align and line break bug #689

Closed

Offbeatmammal mentioned this issue May 13, 2020

Breakline does not work #730

Closed

gitbrent modified the milestones: 3.2.0, 3.3.0 May 14, 2020

lejard-h added a commit to leftyio/PptxGenJS that referenced this issue May 22, 2020

Fix gitbrent#369

5aaeb62

Fix for gitbrent#369

gitbrent mentioned this issue May 28, 2020

breakLine not behaving correctly when "align" property set in .addText? #751

Closed

gitbrent closed this as completed Jun 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature request] Multiple text objects in one line without bullets or with align #369

[Feature request] Multiple text objects in one line without bullets or with align #369

vpetzel commented Jun 29, 2018 •

edited

Loading

vpetzel commented Jun 29, 2018

bigianb commented Aug 3, 2018

vpetzel commented Aug 3, 2018 •

edited

Loading

gitbrent commented Aug 9, 2018

vpetzel commented Aug 9, 2018

vpetzel commented Aug 9, 2018

gitbrent commented Aug 10, 2018

vpetzel commented Aug 10, 2018

gitbrent commented Aug 15, 2018

vpetzel commented Aug 15, 2018

PaddingtonTheBear commented Dec 10, 2018

lejard-h commented Aug 12, 2019

gitbrent commented Aug 15, 2019

kupkama2 commented Oct 17, 2019

gitbrent commented Feb 28, 2020

gitbrent commented Jun 22, 2020

[Feature request] Multiple text objects in one line without bullets or with align #369

[Feature request] Multiple text objects in one line without bullets or with align #369

Comments

vpetzel commented Jun 29, 2018 • edited Loading

vpetzel commented Jun 29, 2018

bigianb commented Aug 3, 2018

vpetzel commented Aug 3, 2018 • edited Loading

gitbrent commented Aug 9, 2018

vpetzel commented Aug 9, 2018

vpetzel commented Aug 9, 2018

gitbrent commented Aug 10, 2018

vpetzel commented Aug 10, 2018

gitbrent commented Aug 15, 2018

vpetzel commented Aug 15, 2018

PaddingtonTheBear commented Dec 10, 2018

lejard-h commented Aug 12, 2019

gitbrent commented Aug 15, 2019

kupkama2 commented Oct 17, 2019

gitbrent commented Feb 28, 2020

gitbrent commented Jun 22, 2020

vpetzel commented Jun 29, 2018 •

edited

Loading

vpetzel commented Aug 3, 2018 •

edited

Loading