13 Replies Latest reply on May 1, 2014 8:20 AM by resdesign

    "price"- kerning

    carta mundi Level 1

      Hello...

       

      i'm looking in a nice font with a perfect kerning for the .- behind a price 499.-

       

      not to much space...in webfonts most of them got the same space like the letters...can i adjust this?

       

      grt

        • 1. Re: "price"- kerning
          TimJaramillo Level 4

          Hi there, since Edge is based on JS/CSS, you can use those same standards to change kerning.

           

          Check out the 'letter-spacing' CSS prop:

          http://forums.adobe.com/thread/1154667

          http://css-tricks.com/almanac/properties/l/letter-spacing/

           

          Something like this should work (change the px value for your needs):

          sym.$("myText").css('letter-spacing','5px');

          1 person found this helpful
          • 2. Re: "price"- kerning
            resdesign Adobe Community Professional & MVP

            You do have kerning in the tool panel to adjsut your fonts.

            kerning.png

            1 person found this helpful
            • 3. Re: "price"- kerning
              carta mundi Level 1

              Sorry, i don't think this it...

               

              i just want to make a kerning on a few letters instead of the whole word..

               

              see example

               

              Screenshot 2014-04-25 13.58.41.jpg

              • 4. Re: "price"- kerning
                TimJaramillo Level 4

                I'm not a CSS pro so this may not work (and the inline span-styling syntax may be  wrong), but you could try adding a span tag around the '9' and ',' and setting the kerning on that span only.

                 

                sym.$("myText").html("44<span style="letter-spacing:-5px">9.-</span>');

                • 5. Re: "price"- kerning
                  resdesign Adobe Community Professional & MVP

                  Tim, you solution should work except you have double quotes and single quotes and I would not include the 9 there but at the beginning. So correct to this:

                  sym.$("Text").html('449<span style="letter-spacing:-5px">.-</span>');

                  • 6. Re: "price"- kerning
                    carta mundi Level 1

                    oke thanks..

                     

                    but where do i have to put this? compositionready (i'm a zero in code)

                     

                    I've got zero code in my animaties...everything is made by the interface of edge

                     

                    and when i have more than once this amount...more times, or every time the 9 and point gets a kerning?

                     

                    grt

                    • 7. Re: "price"- kerning
                      resdesign Adobe Community Professional & MVP

                      hello,

                      Put it in compositionReady.

                      You will have to use that in any place you need this kerning.

                      If you have this text in different places, you can write a for loop so that it applies to all.

                      1 person found this helpful
                      • 8. Re: "price"- kerning
                        carta mundi Level 1

                        thanks, do you mean like this?? or is something missing?

                         

                        ( is without the loop..don't know how to do it)

                         

                        Screenshot 2014-04-28 15.13.25.jpg

                        • 9. Re: "price"- kerning
                          resdesign Adobe Community Professional & MVP

                          Yes. exactly.

                          Now if you have several text fields like this you can add them for example:

                           

                          you text fields are name text_1, text_2, etc...

                           

                          you could use this since you have 9 fields.

                           

                          for (i=0;i<8;i++){

                               sym.$('text_"+i).html('449<span style="letter-spacing:-5px">.-</span>');

                          }

                           

                          if they have different names you could use an array:

                           

                          var myText = ['nametext','anothertextname', another','thisone'];

                           

                          for (i=0;i<myText .length;i++){

                               sym.$(myText[i]).html('449<span style="letter-spacing:-5px">.-</span>');

                          }



                          1 person found this helpful
                          • 10. Re: "price"- kerning
                            carta mundi Level 1

                            Thanks...i've tried the last one..but don't see the wishing result..

                             

                            Screenshot 2014-05-01 14.04.02.jpgScreenshot 2014-05-01 14.05.51.jpg

                            • 11. Re: "price"- kerning
                              resdesign Adobe Community Professional & MVP

                              Sorry this was the wrong approach.

                              Try this:

                               

                              I  have 4 text named Text1, Text2, etc.

                               

                              var myText = [

                              {'text':'449<span style="letter-spacing:-5px">.-</span>'},

                              {'text':'369<span style="letter-spacing:-5px">.-</span>'},

                              {'text':'499<span style="letter-spacing:-5px">.-</span>'},

                              {'text':'229<span style="letter-spacing:-5px">.-</span>'}

                              ];

                               

                               

                              for (i=0;i<myText.length;i++){

                                   sym.$("Text"+(i+1)).html(myText[i].text);

                              }

                               

                              Here is the sample:

                              https://app.box.com/s/nj4wsj9cpndzx4y4flck

                               

                              Note - if you have a database you could add the text in there.

                              • 12. Re: "price"- kerning
                                carta mundi Level 1

                                Thanks, thats what i was looking for!

                                 

                                I'm trying to understand the code...but it's hard...

                                 

                                while everybody says that the code ( javascript/Jquery) is easy :-(

                                • 13. Re: "price"- kerning
                                  resdesign Adobe Community Professional & MVP

                                  Here is how it works. You can look at the updated file now at the same link as above.

                                  You can go through the NEWBOSTON free and excellent javascript  tutorial  here and you will understand better:

                                  http://thenewboston.org/list.php?cat=10

                                   

                                   

                                  You can write arrays several different ways.

                                  1- simple array

                                   

                                  var myArrayName = ['firstIten','secondItem','thirdItem'];

                                  myArrayName[0]; is the first element of the array. Elements go in order and always start at 0.

                                   

                                  2- you can have objects like I wrote earlier and you could have several lines. Separate the different lines with a comma (in the {} and each {}.

                                  A- example 1:

                                  var myText = [

                                  {'text':'449<span style="letter-spacing:-5px">.-</span>'},

                                  {'text':'369<span style="letter-spacing:-5px">.-</span>'},

                                  {'text':'499<span style="letter-spacing:-5px">.-</span>'},

                                  {'text':'229<span style="letter-spacing:-5px">.-</span>'}

                                  ];

                                   

                                  B- example 2:  In this example I added a color for the text

                                  var myText = [

                                  {'text':'449<span style="letter-spacing:-5px">.-</span>', 'color':'blue'},

                                  {'text':'369<span style="letter-spacing:-5px">.-</span>', 'color':'red'},

                                  {'text':'499<span style="letter-spacing:-5px">.-</span>', 'color':'aqua'},

                                  {'text':'229<span style="letter-spacing:-5px">.-</span>', 'color':'purple'}

                                  ];

                                   

                                  3- Now in the for loop all you do is go through the array to assign the values you gave.  i starts at 0 and then assign the element 0 of the array, then it goes through the whole array until it is finished. the .length means that it will assign values until it reaches the last element of the array, in this case 3 (0,1,2,3)

                                   

                                  In the second case, now I have new text with html and new color using css color property.

                                   

                                  for (var i=0;i<myText.length;i++){

                                       sym.$("Text"+(i+1)).html(myText[i].text).css({'color':myText[i].color}) ;

                                  }

                                  1 person found this helpful