GRADIENT TEXT TO OUTLINES

[oleh_melnyk]

I have a problem: when I export PDF with gradient text – in Adobe Acrobat everything looks ok, but in online viewers, like Dropbox or sites like issue or joomag or any other PDF viewers that works in the browser – this gradient text became either black or gray. So I need to manually find this text and make outlines – then everything works as expected.

so I’d like to have a script with just 3 buttons: [<< find previous] [convert to outlines] [find next >>]
or is there a better workaround for this problem?

cross reference: http://indesignsecrets.com/topic/gradient-text-to-outlines

[Laubender]

Hi Oleh,

the cause of the problem with Non-Adobe Reader based viewers should be more examined.

What could help is:

Use PDF version 1.2 or 1.3.

Use sRGB only. No spot colors allowed, no mixed inks.

That can be done either with:

InDesign at output with appropriate settings.

or with: Acrobat Pro's Preflight functions

Or:

Print to PostScript or export to EPS with the option "Simulate Overprint".

Distill to PDF.

Change all colors to sRGB with Acrobat Distiller and/or Acrobat Pro.

Converting text frames on the page to outlines with inDesign is never a good idea.

I think, you don't need a script.

Regards,
Uwe

[oleh_melnyk]

Hi Uwe,

Yes, I agree that outlined text is a bad idea, but I'm pretty sure that the problem is not in PDF itself or at any settings, but in online / browser PDF viewers, that still don't know how to show gradient on text, so it uses default black color instead...

Let me explain in greater details how to reproduce the issue:

1) create text paragraph in InDesign, apply gradient color

2) export as "Interactive PDF"

3) open exported PDF on desktop PDF viewers to ensure everything shows just as expected

Adobe Acrobat DC - everything is ok here!

4) upload PDF to dropbox / upload to sites like issuu.com or joomag.com (looks like joomag already fixed that problem - Gradient Bug ) or any other - the problem everywhere is the same - gradient text on browser / smart devices like iPhone / iPad / etc. appears black. Not so far ago the same problem was when you just drag-n-drop PDF to the browser window - but on the latest versions of Google Chrome, Safari, Microsoft Edge, Opera, YandexBrowser, Maxthon and Vivaldi browsers seems to fix that old bug! But Nightly Firefox version 50.0a1 (2016-06-27) still have that issue - but instead of showing text as black it shows only one (first) of the gradient colors

Gradient text in Firefox Nightly

So, the problem is that when I send PDF files for review via Dropbox, or when my clients upload final PDF to issuu.com or other sites or if they have older browser versions - they see gradient text as black, and sometimes, since this text might be on the dark background - text becomes unreadable! That's why I manually find gradient text and outline it before exporting to the online PDF to solve this problem, but my clients still need to download PDF from the dropbox to properly view it on desktop during review sessions, which is bad, since they should be able to see it "as is" and without those "bells&wisles", I guess...

PS: looks like the same issue reported in GitHub for PDF.js > Text colored with a gradient fill renders as gray/black. · Issue #5432 · mozilla/pdf.js · GitHub so I'm not the only one who suffers - this issue was reported in 2014 and it still present!

[Loic.Aigon]

For what it's worth, what about publish ?

And the result :

https://indd.adobe.com/view/a01b3475-4a98-49d9-918a-60472ea95d26

[oleh_melnyk]

yes, this might help for reviews, but once everything is done, and client upload final PDF to let's say issuu.com so subscribers can read it from there and I still need to do something...

already reported this bug to the Dropbox team, and writing bug report for issuu.com. Firefox next...

PS: Just noticed that gradient looks ok in Safari for issuu.com

[Pickory]

Hi,

I don't think it is a DropBox or issuu problem. It is the reader software.

P.

[oleh_melnyk]

sure it's reader / render problem, but joomag renders it's fine - Gradient Bug (and few month ago they had the same problem)

Safari on macOS Sierra renders PDF on issuu.com fine, but Firefox on mac renders black!

On Windows 10 - Firefox and Vivaldi render gradient text on issuu fine, but Chrome, Edge, YandexBroser, Maxthon - renders this text as black

When you open PDF in browser (like open with ... OR drag-n-drop PDF to the browser) - Chrome, Edge, Yandex, Maxthon, Opera, Vivaldi renders gradient ok, and only Firefox can't handle it and show only the first color from the gradient

that's why dropbox and issuu should do something with their PDF rendering engine, like joomag, to make it work... and till then - I need a script to find and outline gradient text

[Pickory]

Looks like joomag need the pdf export to their specification.

Here is a link to their preset.

Exporting from InDesign to Joomag - Powered by Kayako Help Desk Software

P.

[oleh_melnyk]

actually, joomag is the one that works ok, I have uploaded the same PDF to dropbox, issuu and joomag and only joomag renders it correctly...

also, I noticed that some browsers, that do show gradient text, like Safari on iMac and Chrome on iPad (viewing joomag PDF), rasterise gradient, so jpeg artifacts visible

Screenshot from iPad that shows jpeg artifacts

And "Publish online" probably use diffent color mode so it shows colors more vibrant that they should look like, which is not acceptable for magazines I'm working with

Published online - colors is too vivid, at least I can see the difference with what I had in InDesign, and this is unacceptable since my client need to see exactly how colors look during review sessions before we move to print proofs

[Loic.Aigon]

Hi,

To be helpful , you could make your gradient text to be 99% opaque. Then you would use a PDF1.3 export so the transparency is flattened during the export process.

As for color accuracy, I think that if you do color convert in PDF settings, the color should look more accurate in publish or Acrobat than any other open source readers.

Loic

[Laubender]

oleh.melnyk wrote:

…

And "Publish online" probably use diffent color mode so it shows colors more vibrant that they should look like, which is not acceptable for magazines I'm working with

Published online - colors is too vivid, at least I can see the difference with what I had in InDesign, and this is unacceptable since my client need to see exactly how colors look during review sessions before we move to print proofs

I think, you expect too much from a browser's view of PDFs.
Viewing and corresponding about correct color needs way more.

There are dedicated systems around remote soft proofing in the industry. For example:

CoZone - GMG Color

Regards,
Uwe

[oleh_melnyk]

well, I expect to see same colors in InDesign, Acrobat and in Browser and Publish Online...

now compare:

1) screenshot from InDesign - ok

2) screenshot from Adobe Acrobat - ok

3) screenshot from browser (issuu have already fixed problem, dropbox in progress) - ok NOW

4) Publish Online - wrong colors - not ok

- so, do you really think I'm expecting way too much?

[Laubender]

Yes.

It's all about color management in browsers.
And this is your personal system, your monitor that may be calibrated or not.
Your browser, that is able or not able to use color management. On some elements. Or on all elements.

Your customer's browser can and will show different colors.

Btw.:

With Publish Online it's a totally new game.
All text that shows up in Publish Online that is editable text in your InDesign document by origin was indeed converted to vector shape SVG outlines and is presented through HTML, CSS and perhaps JavaScript.

Regards,
Uwe

[oleh_melnyk]

what calibration are you talking about? lol

can't you see by the screenshot that Publish Online colors is different from what InDesign, Acrobat, and Browser shows, even through issuu and Publish Online works in the same browser... I'm not talking about color accuracy between monitor and printer - I'm talking that my eye can see difference on the same monitor and same browser because Publish Online render colors more vibrant that it should be

[Laubender]

Yes. Publish Online is not allowing color management as far as I know.
And I assume the depicted color will be shown in something like sRGB.

Uwe

[oleh_melnyk]

Correct! That's why I think Publish Online is unusable, at least for me

[Laubender]

With Publish Online there is no output ICC profile that could manage a color simulation of RGB colors as CMYK ones. Even if a browser was able to work with an ICC profile, the browser is getting no profile information so is using its fallback, and that usually is sRGB if you are lucky. If you are not lucky the monitor profile is used. And sitting in front of a modern monitor with a wide gamut RGB display profile will mean: highly oversaturated colors for pure RGB values without an underlying profile.

PDFs viewed with Adobe Reader or Acrobat Pro on PCs and Macs, also other PDF viewing softwares can do this ( but not all PDF viewers actually will ). Adobe Reader on an iPad will not do color management. Or at least the last time I checked the situation one year ago, it was not able to do it.

Regards,
Uwe

[oleh_melnyk]

just checked - Adobe Reader on iPad renders colors perfectly fine and precise - everything just as expected

[Laubender]

Thank you for the feedback on Adobe Reader on iPad.

Looks promising. At least it seems sufficient 😉

Uwe

[oleh_melnyk]

I have both Windows PC and iMac, + iPad and iPhone.

Desktops - PC and Mac - are calibrated differently, iPhone and iPad can't be calibrated. And colors look pretty much the same on all devices, wich is acceptable for me and my clients.

But when I see the difference in Publish Online - on the same device - that's a big "No-NO!" for me

[Laubender]

Not only for you, be assured…

It's pretty clear, that you have to drop Publish Online from your workflow chain.

[oleh_melnyk]

ok, let me do the first step:

this script works (with an error) - it finds all text with gradient and converts them to outlines. Now need to figure out how to fix an error, and make it work with UI - 3 buttons - search prev, convert to outlines and search next

var gradients = app.activeDocument.gradients;
for(var i=0; i < gradients.length; i++){
    app.findGrepPreferences = app.changeGrepPreferences = NothingEnum.nothing;
    app.findGrepPreferences.fillColor = gradients;
    var mySearch = app.activeDocument.findGrep();    
    if(mySearch.length > 0){        
        for(var g=0; g < mySearch.length; g++){            
            app.select(mySearch.createOutlines()); // this line casue error, probably because of endless loop
        }
    }
}

upd: temporary UI

#targetengine:GradientTextToOutlines;
var w = new Window ("palette", "Convert gradient text to outlines");
w.alignChildren = ['center', 'top'];
w.orientation = "row";
w.add ("button", [0,0,36,26], "<<", {name: "Prev"}); //  Previous
w.add ("button", [0,0,60,26], "Outline", {name: "Outline"});
w.add ("button", [0,0,36,26], ">>", {name: "Next"}); // Next 
w.show ();

[oleh_melnyk]

ok, it works, somehow... but it still has bugs, it works very slowly on real files, like a magazine - just because InDesign create and store new gradient color everytime you make any change to the gradient, especially if it's not saved in swatches... and I still need to add "go to selection" somehow, because I don't see what it has found and selected, but it still better than nothing

upd: auto zooming to selection added

#target:indesign;
#targetengine:GradientTextToOutlines;
var w = new Window ("palette", "Convert gradient text to outlines");
w.alignChildren = ['center', 'top'];
w.orientation = "row";
var prev = w.add ("button", [0,0,36,26], "<<", {name: "Prev"}); //  Previous
var outline = w.add ("button", [0,0,60,26], "Outline", {name: "Outline"});
var next = w.add ("button", [0,0,36,26], ">>", {name: "Next"}); // Next 
w.show ();
var gradients = app.activeDocument.gradients;
var i = 0;
var selection;
var mySearch;
var element = 0;
var flag;
function zoom(){
    app.activeWindow.zoomPercentage = 75;
    app.activeWindow.zoom(ZoomOptions.fitSpread);    
}
next.onClick = function(){
    app.findGrepPreferences = app.changeGrepPreferences = NothingEnum.nothing;
    app.findGrepPreferences.fillColor = gradients;
    mySearch = app.activeDocument.findGrep();
    while(mySearch<1 && i < gradients.length){
        i++;
        app.findGrepPreferences.fillColor = gradients;    
        mySearch = app.activeDocument.findGrep();
    };
    if(flag == "prev"){
        element = element+2; if(element > --mySearch.length) element = 0;
        selection = app.select(mySearch[element++]); 
        zoom();
        flag = "next";
    }    
    else if(element < mySearch.length && element >= 0){
        selection = app.select(mySearch[element++]); if(element > --mySearch.length) element = 0; 
        zoom();
    }else{
       element = 0;
       selection = app.select(mySearch[element++]); 
       zoom();
    }    
}
outline.onClick = function(){
    if(!flag){
        app.select(mySearch[element++].createOutlines());
        zoom();
    }
    else if(flag == "next"){ 
        app.select(mySearch[--element].createOutlines());
        zoom();
    }
    else if(flag == "prev"){
        app.select(mySearch[++element].createOutlines());
        zoom();
    }
    if(mySearch.length<2){
        i++;
    }    
}
prev.onClick = function(){    
    app.findGrepPreferences = app.changeGrepPreferences = NothingEnum.nothing;
    app.findGrepPreferences.fillColor = gradients;
    mySearch = app.activeDocument.findGrep();
    while(mySearch<1 && i < gradients.length){
        i--;
        app.findGrepPreferences.fillColor = gradients;    
        mySearch = app.activeDocument.findGrep();
    };
    if(flag == "next"){
        element = element-2; if(element < 0) element = --mySearch.length;
        selection = app.select(mySearch[element--]);
        zoom();
        flag = "prev";
    }    
    else if(element >= 0 && mySearch.length > element){
        selection = app.select(mySearch[element--]);
        zoom();
        if(element < 0) element = --mySearch.length;
    }else{
        element = --mySearch.length;
        selection = app.select(mySearch[element]);
        zoom();
    }    
}

by the way, dropbox confirmed that they were able to reproduce the problem and have filled a ticket for the team

[Pickory]

"by the way, dropbox confirmed that they were able to reproduce the problem and have filled a ticket for the team"

But that implies dropbox are doing some thing to the files. Which doesn't seem right to me.

Any way, glad you are making progress.

P.

[oleh_melnyk]

well yes, dropbox, just as any other viewer need to parse PDF file in order to be able to view it... dropbox show PDF using HTML Canvas. Basically they have a parser, which causes my problem with gradient - I can't be 100% sure, but I think this parser, when it comes to the gradient colors - just don't know (yet) how to apply the color, so it ignores gradient colors and applies default color, which is black...