I'm writing a script for photoshop in Javascript to read from a list of words in a .txt document one at a time, add them to the image, export and then move onto the next word etc. Thats all well and good but I need to use an alternate style of the font, specifically I need to use single story "a" (circle with a line on the right) rather than the default a (circle with a curvy part on top), Is there a way to specify which stylistic set to use for the font within the script? You can do this within photoshop itself by clicking "Stylistic Alternates" in the type settings part of the text layer properties.
EDIT TLDR: I need my JS Photoshop script to use a stylistic alternate of a font, this setting here. How can I do this in the script?
I think achieving this via script will be a major pain. It may be possible using Action Manager scripting and the cryptic code generated by ScriptListener.
Maybe you'll be better off simply setting on a different font altogether.
Related
I have a psd file with two text layers.
I would like to add a quote in the first text layer and a name in the second.
The data is coming from a csv.
The quotes can vary in length. The font size for the "quote" text layer therefor needs to be set to fit within the text box.
I tried scripting it for the better part of the day now and am stumped.
Thank you!
While it's not Photoshop, you might want to check out Templater for After Effects which lets you dynamically insert data into layers. Templater also comes with layout logic that allows you to determine the fitting of various lengths of text and resolutions of source images.
The data can come from a tabbed-separated value file or from a Google Sheets document. Even though it works for After Effects, you can use Templater to export still images from AE.
Learn more at http://dataclay.com
I'm in the process of making an HTML text parser and I would like to be able to determine when a text node appears as a header (visually, not HTML headers).
One thing that can usually be said about headers are that they are emphasized - usually in one of two ways: Bold font or larger font size.
I could get both corresponding CSS values using getComputedStyle(), but I want to avoid this because the parser needs high performance (has to run smoothly on, for example, Chromebooks) and getComputedStyle() is not particularly fast when looking through hundreds or thousands of nodes.
Figuring out a font size isn't too hard - I can just select the node with range and check its client rects from range.getClientRects().I haven't figured out a smart way to check font weight though, which is why I'm here.
Can anyone think of higher-performance way of doing this than by using getComputedStyle()?
I'm aware this might not be possible - just looking to see if someone can think of an ingenious way to solve this problem.
Edit
This is for a Google Chrome extension only.
What you're aiming to do here is really messy. Since you want to determine if text is bold visually, on some devices, depending on how they render text, the whole system may just break!
A suggestion I have is to use the HTML5 Data atrributes - find out more here - and use it like so:
<div class="header" data-bold="yes">This will appear bold?</div>
Then, using JavaScript you can just go over all div elements with the data-bold attribute.
I hope this helped ;)
My script should select some items and apply Effect->3D->Extrude&bevel to them.
Which objects and methods should be used?
I use JavaScript in AI CS6.
Thanks.
--
Update: I need to set the values for effect parameters (angles, depth etc.) in script.
--
Update 2: Probably it's possible to patch an AI file with needed values for the GraphicStyle, and then open it and apply the style where needed. But I'd like to know if there is less dirty solution.
Using documents[0].selection[0].reflect.properties in ExtendScript toolkit to find out what properties basic paths have, I don’t see any way to set this effect directly.
When I search the JavaScript Reference for Illustrator, the only mention I see of appearance is when it talks about graphic styles.
So what I tried was drawing two rectangles, applying the 3D effect to one of them, and saving it as a new graphic style:
Then in the script, you can select the other rectangle and then apply the graphic style with
documents[0].graphicStyles[6].applyTo(documents[0].selection[0])
Unfortunately, the documentation does say
Scripts cannot create new graphic styles.
One thing that might be work would be to distribute a document with the script that has all the graphic styles you might want to apply, and then apply them to objects in the target document…
I'm trying to play around with the silhouette of fonts in Javascript, but I can't go forward without being able to get the vectors from the characters. Is there any way to retrieve this information and use it? Any examples of this being done?
Paper.JS seems like it could be pretty handy but I haven't found any font examples.
There is no direct way to retrieve shapes from characters in JavaScript. I suspect that is because font rendering is not done directly by the browser. This task is usually delegated to a third party library like cario.
You could create the text in an SVG editor such as Inkscape, convert the text to paths (Path → Object to Path) and manipulate them via JavaScript.
Using SVG Fonts also seems like a way to go. This is basically an SVG file that saves the shapes of all characters. You could load this as XML into a HTML/JavaScript setup and process the character shapes from there. Font Squirrel has a generator for making #font-face kits. It also includes an SVG version of the font in the archive.
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
My current solution is that for when the user clicks the resize link it adds an extra class to the body tag.
It also sets a cookie and then when the page is loaded - onLoad() - it reads the cookie and reapplys the body class tag again if needs be.
The only thing not ideal is that it loads then applys - the previous solution was to edit the CSS file before the page loaded but that threw up security warnings if the CSS file was in a different directory.
So, essentially is my solution reasonable or is there a better way?
Adam
What is the "best practice"
(accessibility/usability-wise) for
resizing text with Javascript?
Best practise is "Don't".
Specify the font size in relative units and let the native browser controls change it if the user wishes.
Attempts to duplicate this functionality rarely give the font sizes that users need (and usually end up offering a choice atomic, microscopic and tiny). Yes, some users need 72pt text (or larger).
The built in browser controls work on most, if not all, sites. You don't need to use up canvas real estate duplicating them.
Your solution sounds fine, with one addition: you can read the cookie as the page loads and add the class to the body element while the markup is generated. Most server-side languages support this: PHP, JSP, RoR etc.
Other than that, you have a solid solution.
Adding a CSS style to HTML via JavaScript
I think your suggestion is an excellent way of doing it.
It means you have the flexibility of being able to add the CSS class to any sub element rather than the body so that you can change the text size of a specific element if you so desire.
Reading the cookie on page load
To get around the issue you describe I would look for the cookie in your server side language (php/asp/ruby etc) and display the content as specified by the cookie on page load.
In PHP your CSS class definition may look like this:
echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
"Web Accessibility Gone Wild" sums it up quite nicely imho:
If your default font size may be too small for site visitors, then make it an adequate size.
and,
All browsers allow the sizing or scaling of the page content - why duplicate this browser functionality?
Also, Care With Font Size:
The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.
However, if you have a valid reason - feel free to ignore this.