Adding Arial Unicode MS to CKEditor

Question

My web application allows user to write rich text inside CKEditor, then export the result as PDF with the Flying Saucer library.

As they need to write Greek characters, I chose to add Arial Unicode MS to the available fonts, by doing the following :

config.font_names = "*several fonts...*; Arial Unicode MS/Arial Unicode MS, serif";

This font is now displayed correctly in the CKEditor menu, but when I apply this font to any element, I get the following result :

<span style="font-family:arial unicode ms,serif;"> some text </span>

As you can notice, I lost the UpperCase characters. This has pretty bad effect during PDF export, as then Flying Saucer doesn't recognise the font and so uses Helvetica which does not support Unicode characters, so the greek characters are not displayed in the PDF.

If I change manually from code source

<span style="font-family:arial unicode ms,serif;"> some text </span>

to

<span style="font-family:Arial Unicode MS,serif;"> some text </span>

then it is working as expected, greek characters are displayed.

Has anyone met this problem before? Is there a way to avoid UpperCase characters to be changed to LowerCase? I really want to avoid doing any kind of post-processing like :

htmlString = htmlString.replace("arial unicode ms", "Arial Unicode MS");

The issue is a known (and old) CKEditor bug, see https://dev.ckeditor.com/ticket/5966 and https://dev.ckeditor.com/ticket/10676 — obourgain, Jun 04 '15 at 22:08

ClaireW · Answer 1 · 2015-06-06T20:42:23.880

I agree with you regarding resolving this issue aside from Flying Saucer R8. Although depending upon your workflow, would it be more efficient to allow CKEditor to preprocess and validate a completed HTML encoded file (render the entire document to HTML first)?

None of the CKEditor support tickets specify the true source of the issue, so I recommend confirming for yourself whether it is (A) a styling issue, or (B) a CSS processing issue, or (C) a peculiar CKEditor parsing issue.

A possible workaround: Make a copy of the desired unicode font and import it into Type 3.2 (works on both Mac and Windows).

http://www.cr8software.net/type.html

rename the duplicate font set into something all lowercase.

Limit your font selection

config.font_names = "customfontnamehere";

Apply the style separately (unicode typeface greatvibes below) and see if that gives you the desired result:

var s = CKEDITOR.document.$.createElement( 'style' );
s.type = 'text/css';
cardElement.$.appendChild( s );

s.styleSheet.cssText =
'@font-face {' +
'font-family: \'GreatVibes\';' +
'src: url(\'' + path +'fonts/GreatVibes-Regular.eot\');' +
'}' +
style;

If the above does not work, you can try to modify the xmas plugin.js (also uses the unicode typeface greatvibes and does all sorts of cool manipulations before output), so it might be worth trying to modify it rather than start from scratch:

'<style type="text/css">' +
'@font-face {' +
'font-family: "GreatVibes";' +
'src: url("' + path +'fonts/GreatVibes-Regular.ttf");' +
'}' +
style +
'</style>' )

Whichever approach you try, the goal is to test various styling and see if CKEditor defaults back to Helvetica again.

Lastly, the CKEditor SDK has excellent support, so if you have the time and energy, you could write a plugin. Sounds daunting, I know, but notice how the plugin.js within the /plugins/font directory has priority for size attributes.

If you are not interested in producing your own plugin, I recommend contacting the prolific ckeditor plugin writer

doksoft

(listed both on their website and on his own website) and ask for a demo of his commercial plugin "CKEditor Special Symbols" which has broad unicode capability. Hope that helps, ClaireW

score 2 · Answer 2 · answered Jun 03 '15 at 22:42

I didn't find any way to do it with Flying Saucer R8, but you can make it work using Flying Saucer R9.

The method ITextResolver.addFont(String path, String fontFamilyNameOverride, String encoding, boolean embedded, String pathToPFB) allow you to add the fond with a specific name.

Code sample:

  ITextRenderer renderer = new ITextRenderer();
  // Adding fonts
  renderer.getFontResolver().addFont("fonts/ARIALUNI.TTF", "arial unicode ms", BaseFont.IDENTITY_H, BaseFont.EMBEDDED, null);
  renderer.getFontResolver().addFont("fonts/ARIALUNI.TTF", "Arial Unicode MS", BaseFont.IDENTITY_H, BaseFont.EMBEDDED, null);

  String inputFile = "test.html";
  renderer.setDocument(new File(inputFile));
  renderer.layout();

  String outputFile = "test.pdf";
  OutputStream os = new FileOutputStream(outputFile);
  renderer.createPDF(os);
  os.close();

You can find Flying Saucer R9 on Maven.

Thank you for pointing that solution. I actually do not wish to change the Flying Saucer version, and am looking for a CKEditor solution so the font is saved correctly. — realUser404, Jun 04 '15 at 12:54

score 2 · Answer 3 · answered Jun 07 '15 at 10:04

The simplest solution (until CKEditor fixes that bug) is to do that post-processing.

You can do it on the server (really simple, you already have the code) or with a little CKEditor plugin, but that will give you the solution that you want and unless you need to add more fonts it will work without any further changes.

Adding Arial Unicode MS to CKEditor

3 Answers3