How do I change tracking? (spacing between letters)


#1

Subject.

Sort of a demo:

TEXT WITH TRACKING =0

T E X T W I T H T R A C K I N G = 1 0 0 (thousandths of em)

PS: found this feature request, but more than two years have passed since that post.

PPS: work-arounds are welcomed!


#2

There is a workaround involving external CSS.

  1. Link to external CSS
  2. Target Axure items with your custom CSS

1. How to link to external CSS
To add custom CSS to extend Axure, put an ‘Open Link in Current Window’ action in the OnPageLoad handler for a page or master with something like:
javascript:void( function() { $(‘head’).append(’<link rel=“stylesheet” href=“http://mysite.com/style/myCSS.css” type=“text/css” />’); })();
replacing “http://mysite.com/style/myCSS.css” with a link to your custom CSS file. This allows you to control anything, especially if you are careful about naming your axure styles so that CSS can alter them.

This will work in local Preview and when viewed from AXShare.

2. How to Target Axure items with custom CSS

/* MAKE EDIT FIELDS HAVE ONLY UNDERLINE BORDER WHICH TURNS BLUE ON FOCUS, LIKE MATERIAL DESIGN */
.ax_default.text_field input
{
border-width: 0;
border-bottom-width: 1px;
border-bottom-color: lightgray;
border-bottom-style: solid;
padding-left:4px;
}
.ax_default.text_field input:focus
{
border-style: solid;
border-color: #067AED;
border-bottom-width: 2px;
outline-style: none;
}

/* ALTER DROPLISTS */
.ax_default.droplist select
{
border-width: thin;
border-color: rgba(0,0,0,0);
background: #F2F2F2;
}

/* TARGET ITEMS WITH AXURE CLASS contactlastname */
.contactlastname div span
{
letter-spacing: 4px;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
color: #a0a0a0;
}

/* TARGET TEXT INPUT WITH AXURE CLASS required */
.ax_default.text_field.required input
{
border-color: #067AED;
border-bottom-width: 2px !important;
}

/* TARGET TEXT INPUT WITH AXURE NAME payform */
div[data-label=“payform”] .ax_default.text_field input
{
border-width: 1px;
border-color: lightgray;
border-bottom-style: solid;
padding-left:5px;
}

Let me know if that works for you.


#3

SifuDynamic, answered you in the feature request topic


#4

I call everyone who is highly concerned with this feature and other design tools that Axure lacks to support this idea and write your opinion in the feature request topic. Everyone who loves axure and wants it to be a leader of the industry - lets convince axure’s great developers and managers to boost this task and speed things up :slight_smile:


#5

Yes. It will be easier for them to ignore that way.


#6

Hi guys,

Good news–character spacing is in the works for version 9 of Axure RP. We’ve just recently released a teaser page for the next release, so if you’re interested in taking a look through what we’ve got planned for 9 or want to subscribe to keep tabs on updates and news about the next release, then check out the link below:

https://www.axure.com/blog/new-in-9/

Cheers! :slight_smile:


#7

No offence, but… the market has leaped waaay far. I got notified by email because of new replies in this thread and suddenly remembered that… yeah! there was such thing as axure! But no. I’m not going back to the past for stuff that has to be by default. And by default not even now - but 10 years ago in every design app. Sorry guys, I can’t wait too long nowadays, especially when new tools have everything that we’ve been asking for years ago.


#8

But still, I am tremendously and highly interested: HOW did axure’s managers have finally decided that simple TRACKING is a must-have, lol? I mean, what have had to happen to make them realize such simple thing that they didn’t understand for years and years after users’ beggins? Less income, maybe, because of competetion who actually listens to users? Or what? What’s the good reason for ignoring us - users - for several years?


#9

Any solution yet? I’m not good on CSS. Would love tracking options!


#10

It arrived with RP 9 :slight_smile:
image (‘Character’)