Skip to main content
loyal_operator154A
Legend
June 27, 2016
Question

GRADIENT TEXT TO OUTLINES

  • June 27, 2016
  • 4 replies
  • 4589 views

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

This topic has been closed for replies.

4 replies

loyal_operator154A
Legend
June 30, 2016

just a quick update: recently I received response from the issuu team:

"...

We have two types of readers, flash reader and html5 reader. If you open the following publication: https://issuu.com/olehmelnyk/docs/gradient_text in browser where flash player is disabled, then you'll get the right result. I have fixed the problem for flash player by rending the publication as bitmap. So now it should look fine in out flash reader as well.

We are working on our new reader product which will replace the current ones. It'll be free of flash player and we'll fix the issue where the publication opens in another window/tab in a non-flash player. Read more about it here:

http://blog.issuu.com/post/145571374118/reader-3

..." - so basically life is getting better now (knowing that dropbox also working on fix, and joomag already have fixed that)

loyal_operator154A
Legend
June 28, 2016

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

Legend
June 28, 2016

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

loyal_operator154A
Legend
June 28, 2016

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

loyal_operator154A
Legend
June 28, 2016

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 ();

Community Expert
June 28, 2016

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

loyal_operator154A
Legend
June 28, 2016

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
Legend
June 28, 2016

For what it's worth, what about publish ?

And the result :

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