How do I make a Javascript to change a text from one font to another?

Question

IT.Coordinator 0 Newbie Poster

15 Years Ago

I'm in dire need of a Script that changes one text to another text. So like say NEWSPAPERS, is Times Roman with a 18 font and Bold, I would like a Javascript that changes the text that has 'NEWSPAPER' of any font type and size to change it to "NEWSPAPERS" with a font of Present LT std with a font size of 18 and bold.

Sample Article would look like this.

NEWSPAPERS
text is below here with correct font and size. once the text is imported into Indesign CS4, this script will change the title of Newspapers to Newspapers but of the required font style, instead of manually having to change the font type and size each time the text is imported to Indesign.

This is a script I've got so far, I'm curious if I'm using the right javascript function's to perform this task.

<script type="text/javascript">
<!--
<!--
<!--
<!--

function fontchange (multiplier) 
<---
<--- if font doesn't equal "Present LT std" | Font=black | Size=18 it then goes to the <--- then statement
<---
{If (document.body.style.fonttype = "") 
	
	{
<---
<---
<--- If font doesn't Equal Present LT std, then it changes the text to this font style....
<---
<---
then (document.body.style.fonttype = "Present LT std"); (document.body.style.fontSize = (18))
	}
}
<---
<---
<---
<---
</script>

Any help would be greatly appreciated with this matter. I will be a script that will be running inside of Indesign CS3. I'm a VB and C++ programmer, and I'm having to Learn Javascript for Indesign, so I know how to program, just dont know the functions of Javascript. I'm hoping this is a fairly simple script to write. Also if anyone knows a good tutorial on how to javascript or more specifically the function commands of javascript, that would be very much appreciated.

javascript

Edited 15 Years Ago by Ezzaral because: Added code tags. Please use them to format any code that you post.

2 Contributors
14 Replies
753 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Graphix

Dani AI

Generated 10 Months Ago

was on the right track trying to automate this, and is correct that document.body.style works in a browser — but InDesign/InCopy does not use the browser DOM. Scripts for InDesign use ExtendScript (Adobe's JavaScript) and the InDesign object model, so you need to talk to app.activeDocument, character/paragraph styles or InDesign find/change, not document.body. ()

Recommended workflow: create (or ensure) a Character Style that has the exact font, weight and size you want, then let a script find the headline text and apply that style. Character styles are safer and repeatable (you can change the style later without touching the script). The scripting API exposes character styles and find/change preferences for this exact task. (documentation.help)

Example (run from the Scripts panel — adjust the font/style name to match the installed font):

// quick JSX: create/get a character style and apply it to every "NEWSPAPERS" instance
var doc = app.activeDocument;
if (!doc) exit();

app.findTextPreferences = NothingEnum.NOTHING;
app.changeTextPreferences = NothingEnum.NOTHING;

var styleName = "NewspaperTitle";
var cs = doc.characterStyles.itemByName(styleName);
if (!cs.isValid) {
  cs = doc.characterStyles.add({ name: styleName });
  cs.appliedFont = "Present LT Std";   // adjust to your exact font family
  cs.fontStyle = "Bold";               // or "Black" if that is the weight name
  cs.pointSize = 18;
}

app.findTextPreferences.findWhat = "NEWSPAPERS";
var hits = doc.findText();
for (var i = 0; i < hits.length; i++) {
  hits[i].appliedCharacterStyle = cs;
}

app.findTextPreferences = NothingEnum.NOTHING;
app.changeTextPreferences = NothingEnum.NOTHING;

Troubleshooting notes: InDesign font names/weights must match exactly — you can also use app.fonts.item("Family\tStyle") if needed. If a font is missing the script can fail, so test on a copy and check app.fonts first. Run and debug in the ExtendScript Toolkit or the Scripts panel. For property names like appliedFont, fontStyle and pointSize see the DOM documentation. (developer.adobe.com)

If you want a version that changes formatting only when the existing font is (for example) Times Roman, iterate stories and check range.appliedFont before applying the new style — mention which exact source font you need and a small snippet can be provided.

All 14 Replies

Graphix 68 ---

15 Years Ago

You can modify the styles of elements easily:

Let's say you have some have an element with some text:

<span id='my_text' style='font-family:Arial;'>Some text</span>

Then you can use JavaScript to change its font family:

document.getElementById("my_text").style.fontFamily = "Times New Roman";

For all CSS properties and how to use them in JavaScript, see:

(look at the JavaScript Syntax in the information table)

And look around the site for other CSS properties and how to use them

~G

Graphix 68 ---

15 Years Ago

If you ask me: "does this code work?", you have not tested it out yourself at all, which is not advisable. Also commenting in JavaScript needs to be:

/* My comment */
// My comment

Anyway, the following function checks whether the body style (the style of the entire document!) is set to font family "Present LT std" and font size "18px", if it is not then sets it like that:

function FontChange() {

 /* Retrieving font: */
 var FontFamily = document.body.style.fontFamily;
 var FontSize = document.body.style.fontSize;
 
 /* Checking and correcting font: */
 if (FontFamily != "Present LT std") {
  document.body.style.fontFamily = "Present LT std";
 }

 if (FontSize != "18px") {
  document.body.style.fontSize = "18px";
 }

}

You should really read up on how to write JavaScript, it is not that difficult:
http://www.w3schools.com/js/default.asp

~G

Edited 15 Years Ago by Graphix because: n/a

Graphix 68 ---

15 Years Ago

>> Line 18,19,20 - You forgot to end them with a ;
>> Line 19 - You can't redeclare the document object. Call it something like "element" or "AppDocument"
>> Line 20, 21, 31, 35 - Pay attention to the caption of the css property, it needs to be "fontSize" and "fontFamily" to work properly
>> Line 18 - You did not declare the variable "app"? I don't know whether that is a pre-defined variable of Indesign CS3?

~G

Graphix 68 ---

15 Years Ago

I don't know what the "app" variable is in your post, as I said when I corrected it. I am not familiar with InDesign CS3 so I assumed it was some kind of seperate window. What type of element/tag does the "app" variable represent? (I mean is it a <div>, a <span>, <p>?)

~G

Edited 15 Years Ago by Graphix because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

IT.Coordinator 0 Newbie Poster · Answer 1 · 2010-11-18T04:59:38+00:00

So is this how it should look like? Would this work?

<script type="text/javascript">
<!--
<!--
<!--
<!--

function fontchange (multiplier) 
var fonttype = "document.body.style.fontfamily = "Present LT std";
var fontsize = "document.body.style.fontSize = (18)";
<---
<--- if font doesn't equal "Present LT std" | Font=black | Size=18
<---
{If (document.body.style.fonttype = 0) ;
	
	{
<---
<---
<--- If font doesn't Equal Present LT std, then it changes the text to this font style....
<---
<---
then app.doscript(fonttype, fontsize);
	}
}
<---
<---
<---
<---
</script>

IT.Coordinator 0 Newbie Poster · Answer 2 · 2010-11-18T21:15:39+00:00

Ok, sweet, that worked. Thank for the help. I'm curious how would I make the script target one article of the document instead of the entire document? Like a Check (if then) function that checks too see if its like say Times Roman, and then changes that text to "Present LT std".

I understand your coding very well, I'm just completely new to Javascript, and completely willing to learn. Just didn't take any courses in Javascript took course in C++ and VB, but not Java.

IT.Coordinator 0 Newbie Poster · Answer 3 · 2010-11-18T22:18:27+00:00

<script type="text/javascript">
//--This script changes text of a entire document from whatever font it is to "Present LT Std".
//-- Created 11/18/10. Straus News Chester, NY. Incopy CS3.
//--
//--
//-- var myInCopy = app
//-- var myDocument = app.activeDocument
//-- var myDocName = myDocument.name 
//
//
//Was an attempt at changing a set text from a town without a state to then include a state
//
//
//app.findTextPreferences.findWhat = "Chester";
//app.changeTextPreferences.changeTo = "Chester, NY";
//app.documents.item(0).changeText();
//var myInDesign = app
var myIncopy = app 
var document = app.activeDocument
var FontFamily = document.body.style.fontfamily
var FontSize = document.body.style.fontsize;

      function FontChange() {
       
      // Retrieving font: 
      
       
   
      // Checking and correcting font: 
      if (FontFamily != "Present LT std") {   
      document.body.style.FontFamily = "Present LT std";  
      }
         
      if (FontSize != "18pt") {  
      document.body.style.FontSize = "18pt";  
      }
         
  
      }
//---
//---
//---
//---
</script>

Why is the FontSize giving me a snytex error sayings its a Offending If statement.

IT.Coordinator 0 Newbie Poster · Answer 4 · 2010-11-19T23:17:09+00:00

var Element = app.activeDocument;
var FontFamily1 = Element.body.style.fontFamily;
var FontSize1 = Element.body.style.fontSize;
// Retrieving font:               
      // Checking and correcting font: 
      function FontChange() {           
      if (FontFamily1 != "Present LT std") {   
      FontFamily1 = "Present LT std";  
      }         
      if (FontSize1 != "18pt") {  
      FontSize1 = "18pt";  
      }       
        }

I'm getting a error message,

Error Number: 55
Error Sting: Object does not support the property or method 'body'
Line: 20
Source var FontFamily1 = Element.Body.style.fontFamily;

var Element = app.activeDocument;
var FontFamily1 = Element.body.style.fontFamily;
var FontSize1 = Element.body.style.fontSize;
// Retrieving font:
// Checking and correcting font:
function FontChange() {

if (FontFamily1 != "Present LT std") {   
      FontFamily1 = "Present LT std";  
      }         
      if (FontSize1 != "18pt") {  
      FontSize1 = "18pt";  
      }       
        }

IT.Coordinator 0 Newbie Poster · Answer 5 · 2010-11-19T23:18:45+00:00

IT.Coordinator 0 Newbie Poster

15 Years Ago

erg, Line 20 on the Document is Line 2 on the post.

IT.Coordinator 0 Newbie Poster · Answer 6 · 2010-11-20T00:33:55+00:00

IT.Coordinator 0 Newbie Poster

15 Years Ago

app.document

I just applies to the program.

IT.Coordinator 0 Newbie Poster · Answer 7 · 2010-11-20T00:44:58+00:00

so in essence could it just be

var Element = activeDocument;
var FontFamily1 = Element.body.style.fontFamily;
var FontSize1 = Element.body.style.fontSize;
// Retrieving font:               
      // Checking and correcting font: 
      function FontChange() {           
      if (FontFamily1 != "Present LT std") {   
      FontFamily1 = "Present LT std";  
      }         
      if (FontSize1 != "18pt") {  
      FontSize1 = "18pt";  
      }       
        }

Graphix 68 --- · Answer 8 · 2010-11-20T00:45:26+00:00

The error is triggered due to the fact that the app.document does not have a child element "body" which is in XHTML the <body> tag. Try the following:

Element.style.fontFamily

If that also triggers an error, you need to give me a bit more information about app.document and its content

EDIT: I dont know, what is "activeDocument"?

EDIT2: In one of my first posts, I posted a function named FontChange() that uses the document element (which is the active document aka the document in which the javascript code is placed/executed):

function FontChange() {

 /* Retrieving font: */
 var FontFamily = document.body.style.fontFamily;
 var FontSize = document.body.style.fontSize;
 
 /* Checking and correcting font: */
 if (FontFamily != "Present LT std") {
  document.body.style.fontFamily = "Present LT std";
 }

 if (FontSize != "18px") {
  document.body.style.fontSize = "18px";
 }

}

IT.Coordinator 0 Newbie Poster · Answer 9 · 2010-11-20T03:20:32+00:00

ahhh it could be that this function of javascript doesn't work within a Adobe CS suite progrduct that has it own variation of javascript. but i'm just guessing.

Graphix 68 --- · Answer 10 · 2010-11-20T23:09:12+00:00

The javascript core is the same, but the objects and some other parts are different. You should check out some tutorials on it, starting with:

~G

How do I make a Javascript to change a text from one font to another?

Dani AI

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers