PDA

View Full Version : Tracking a Dollar Sign


Meir
September 6th, 2012, 12:59 PM
Hey,

I am trying to add tracking to a price (i.e. $11.99). I only want to track 1's and $'s.

I've been trying several versions of the following code.


var Num = '5';
var Price ='$'+Field("Price"+Num)

return NormalizeEntities(Price).replace(/(1)($)/g, "<tracking newsize=-20>$1</tracking>");


This returns
$<tracking newsize=-20>1</tracking><tracking newsize=-20>1</tracking>.49Notice how the dollar sign does not receive tracking.

Any advice on how I can get it to track?

Kerning may be an alternate solution. I have it check on in the text box but it does not change anything.

Thank you for any and all help!

ThomasLewis
September 6th, 2012, 01:53 PM
return NormalizeEntities(Price).replace(/\$1/g, "<tracking newsize=-20>$1</tracking>");

That worked for me, although Dan is the resident regex guru ;)

Meir
September 6th, 2012, 02:19 PM
Thank you very much Thomas. I had tried it without the '\' but the slash did the trick.

Now my issue is that it is outputting this
<tracking newsize=-20>$1</tracking>1.49

It is not formatting the second instance of the number '1'.

I could fix this by adjusting it to
return NormalizeEntities(Price).replace(/(\$11)/g, "<tracking newsize=-20>$1</tracking>");

but because price will be a variable I want it correcting other instances as well.

I would only like to format '1' in all instances and '$' in instances where it comes before a '1'. So the above code works great for all instances I would format the '$' but leaves out all other '1' fixes (though I did not specify well enough and your answer put me much closer to the answer).

When I try
return NormalizeEntities(Price).replace(/(\$11)(1)/g, "<tracking newsize=-20>$1</tracking>");
OR
return NormalizeEntities(Price).replace(/(\$11)(\1)/g, "<tracking newsize=-20>$1</tracking>");

it returns $11.49 with no formatting.

Is there away to account for this in that line of code, or would it be best to create a function that figures out if the first number is a one. If it is a one, then it returns a variable equal to '$1' run through Thomas's replace tracking tag followed by everything to the right of the initial 1 being sent through my original tracking tag which adjusts all instances of the number 1.

ThomasLewis
September 6th, 2012, 02:49 PM
return NormalizeEntities(Price).replace(/(\$11|\$1)/g, "<tracking newsize=-20>$1</tracking>");

So to make this as confusing as possible $1 is what you use to remember what was replaced.

This sample shows that better:
return "ABC".replace(/(ABC|DEF)/g, "<tracking newsize=-20>$1</tracking>");

Meir
September 6th, 2012, 02:57 PM
Has anyone told you that you are awesome lately, because you are.
That should work assuming they don't have any 1's after the decimal point, but based on that data I have they tend to stay toward the 99,79,59 type pricing.

Thank you.

ThomasLewis
September 6th, 2012, 03:10 PM
:D thanks! I have been known for the occasional blunder in these forums though but I appreciate the notion.

Now watch Dan follow up with the answer as elegant as return "42"; ;)

esmith
September 10th, 2012, 11:24 AM
Looks like you have a working solution, but another option I have begun using is to generate a custom version of the font with Fontographer where the spacing is adjusted for necessary character(s).

It may seem excessive at first, but it really opens up the possibility of what you can do with type. I have created "characters" for "stacked" type that says "% OFF" and then do a simple replace which allows me to include a faux-graphic inline and centered regardless of the dollar amount that comes before it. Very helpful. :)

Meir
September 10th, 2012, 11:44 AM
Thank you for the advice Eric. That sounds like an interesting method to try. Can you clarify something for me though.

Would you create one font where, lets say the dollar symbol exists with different tracking as the displayed symbol for ever letter a, b, c, d, e, f, g...

Or is it many fonts are created where the dollar symbol has different tracking and is displayed when you type '$'

Have a great day!

ThomasLewis
September 10th, 2012, 02:42 PM
Those are kerning pairs and you can reset them. I agree with Eric, sometimes it is a lot easier to just change the font than try to program around it. I use FontLab though personally, I think it's a little easier to mess with for OpenType stuff.

esmith
September 12th, 2012, 02:00 PM
Would you create one font where, lets say the dollar symbol exists with different tracking as the displayed symbol for ever letter a, b, c, d, e, f, g...

Or is it many fonts are created where the dollar symbol has different tracking and is displayed when you type '$'
I'm not sure I understand what you are asking. For my example, I have a client who uses the FolioMedium font. They want the dollar sign to be superscripted, but we ran into problems where a price would break between the numbers when adding the superscript tags in FP. Instead, we made the dollar sign smaller in a copy of the font: FolioMedium-Custom. Now, instead of adding a tag and risking an unwanted line break, we just replace the font for the dollar sign.

Also, since numbers are usually monospaced (to allow digits to line up when used in columns) the "1" typically has too much space built in to its character. I simply edit the "width" of the space to the left/right of the character to force adjacent characters to be positioned closer to the "1". I can do this for any character in the custom-named font. If for some reason I want the original spacing (like in the column example above), I simply use the original font again.

esmith
September 12th, 2012, 02:19 PM
A picture is worth a thousand words, right?

The first pic shows what the numeral "1" looks like by default in the font Rockwell Extra Bold:
http://dl.dropbox.com/u/3634307/Rockwell-orig.jpg
Note the vertical rules to left and right of the number. They represent the built-in spacing that is used every time the "1" is typeset. That space is added to the adjacent space of the adjacent character. With Fontographer, I can edit that spacing to make my custom "1" look like:
http://dl.dropbox.com/u/3634307/Rockwell-mod.jpg
See how the same vertical lines are much closer to the character shape? That equates to any adjacent character being that much closer to the number "1". Likewise, I could edit the spacing on other characters as needed.

Once you are comfortable with simple character edits, you can get more complicated and create "custom dingbats". I edited the shapes of unused characters (and saved font with a custom name) to create new "graphics" that I can incorporate into my variable text. For instance, if I want to generate text that says "3 for $5" or "3 for $1.99", I can now prefix the price value with a the right square bracket "]" using my custom font to return the following dingbat:
http://dl.dropbox.com/u/3634307/Rockwell-mod2.jpg
I also removed the spacing on the left side and customized the spacing on the right based on my specific use case. I could create a new font and replace a keystoke's default character with a custom image, signature, altered character, company logo, etc. Pretty cool! :cool:

Dan Korn
September 12th, 2012, 03:34 PM
It is not formatting the second instance of the number '1'.

I could fix this by adjusting it to
return NormalizeEntities(Price).replace(/(\$11)/g, "<tracking newsize=-20>$1</tracking>");but because price will be a variable I want it correcting other instances as well.

I would only like to format '1' in all instances and '$' in instances where it comes before a '1'. So the above code works great for all instances I would format the '$' but leaves out all other '1' fixes (though I did not specify well enough and your answer put me much closer to the answer).

When I try
return NormalizeEntities(Price).replace(/(\$11)(1)/g, "<tracking newsize=-20>$1</tracking>");OR
return NormalizeEntities(Price).replace(/(\$11)(\1)/g, "<tracking newsize=-20>$1</tracking>");it returns with no formatting.

Is there away to account for this in that line of code, or would it be best to create a function that figures out if the first number is a one. If it is a one, then it returns a variable equal to '$1' run through Thomas's replace tracking tag followed by everything to the right of the initial 1 being sent through my original tracking tag which adjusts all instances of the number 1.
I think what you want is this:
return NormalizeEntities(Price).replace(/([\$1]+)/g, "<tracking newsize=-20>$1</tracking>");
Where, in regular expression (https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions) syntax, "[\$1]+" means, "one or more of a set of '$' or '1' characters."