Add support for RTL (Right-to-Left) text for Arabic etc.

[vanekar]

hello when i add this value to addtext

"المملكة : يوجد خمس ممالك " when the ppt is generated it reverses

[gitbrent]

Hi @vanekar ,

Arabic runs Right-to-Left, correct? So are you asking for an option to do that instead of the L-R used now?

Can I see an example of input and output you're looking for?

[ZouhaierSebri]

Hi @gitbrent
var pptx = new PptxGenJS();
pptx.setLayout('LAYOUT_WIDE');
var slide = pptx.addNewSlide();

slide.addText(
[
{ text:'المملكة : يوجد خمس ممالك'},
],
{ x:0.5, y:4.0, w:9, h:1, margin:0.5, fill:'F1F1F1', font_size:18 }
);

pptx.save('PptxGenJS-Sandbox_'+getTimestamp());

What we get now

Expected result is

[vanekar]

Thanks gibrent, that is exactly what i am looking for, any takes on this issue.

Regards
Anwar

[gitbrent]

Hi @vanekar ,

Thanks for clarifying.

Yes, I do think having an RTL option is very worthwhile and will work on it for the next release.

[gitbrent]

Hi @vanekar ,

RTL support has been added. Please try this with the newest codebase and let know how it goes.

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();

// Set RTL (right-to-left) Mode
pptx.setRTL(true);

slide.addText(
  'BONJOUR - CIAO - GUTEN TAG - HELLO - HOLA - NAMASTE - OLÀ - ZDRAS-TVUY-TE - こんにちは - 你好',
  { x:0.0, y:0.25, w:'100%', h:1.5, align:'c', font_size:24, color:'0088CC', fill:'F1F1F1' }
);

pptx.save('PptxGenJS-RTL-Test');

[ZouhaierSebri]

Hi @gitbrent ,
I think the issue not closed yet

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();
// Set RTL (right-to-left) Mode
pptx.setRTL(true);
slide.addText(
  'المملكة :  يوجد خمس ممالك',
  { x:0.0, y:0.25, w:'100%', h:1.5, align:'c', font_size:24, color:'0088CC', fill:'F1F1F1' }
);
pptx.save('PptxGenJS-RTL-Test');

Current result :

Expected Result ::

[ZouhaierSebri]

Hi @gitbrent ,
I think it is better to add option to text element "rtlMode" based on
Text Paragraph Properties

and change line 1434 ::
paragraphPropXml = '<a:pPr'+ (textObj.options.rtlMode ? ' rtl="1" ' : ' ');

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();

slide.addText(
  'المملكة :  يوجد خمس ممالك',
  { x:0.0, y:0.25, w:'100%', h:1.5, align:'c', font_size:24, color:'0088CC', fill:'F1F1F1', rtlMode:true }
);
pptx.save('PptxGenJS-RTL-Test');

Result will be ::

[gitbrent]

Hi @ZouhaierSebri ,

Thanks for the testing. I've implemented your feedback, but i've left the RTL mode as a top-level setting, because that makes the most sense to me. Most users would want the entire Presentation to be either RTL or LTR right...? (Do you ever have a need to create mixed-style PPTs?)

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();
pptx.setRTL(true);

slide.addText(
  'المملكة :  يوجد خمس ممالك',
  { x:0.0, y:0.25, w:'100%', h:1.5, align:'c', font_size:24, color:'0088CC', fill:'F1F1F1' }
);

pptx.save('PptxGenJS-RTL-Test');

[ZouhaierSebri]

Hi @gitbrent ,

Without adding rtLMode to text option we not get the expected result only by PptxGenJS attribute.

Sometimes we need such PPTs to display a phrase (LTR) and the translation (RTL).
now the problem as it is mentioned is fixed.
may be in the future when we need it we can add rtlMode as text option.

Thank you for your effort (It is really hard to work with arabic text and you don't know the expected result)

Test result OK. you can close the issue.

[gitbrent]

Hi @ZouhaierSebri ,

Thanks for all the feedback and testing!

RTL can be set at the textbox-level now as well:

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();

slide.addText(
  'المملكة :  يوجد خمس ممالك',
  { x:0.0, y:0.25, w:'100%', h:1.5, align:'c', font_size:24, color:'0088CC', fill:'F1F1F1' }
);
slide.addText(
  'المملكة :  يوجد خمس ممالك',
  { x:0.0, y:3.25, w:'100%', h:1.5, align:'c', font_size:24, color:'0088CC', fill:'F1F1F1', rtlMode:true }
);

pptx.save('PptxGenJS-RTL-Test');