Text on a curve? On a website? Is that possible? Well, yes it is. Normally, however, such exploits are undertaken with either a bitmap image, or a foray into some SVG editing application.
My Text on a Curve SVG Action (not the final name) lets YOU create such DTP-like effects from the comfort and safety of Freeway!
What does this Action do? In short, it takes Freeway’s HTML output and converts it into SVG. The path you use determines the curve, and the HTML content determines the text that will run along it. The Action does its best to do this, but may miss some styles out. The rule of thumb is to keep text styling as simple as possible. For older browsers, a graphic is created that will be displayed if SVG is not supported.
1 - In Freeway, draw out an HTML box and type in some text. Apply styling.
2 - Then, draw a Map Path in the box - make it a wavy line, and be sure not to close the path (double click at the end of your drawing).
Make sure that the path is a child of the text box. It will work if it’s not, but you may get odd results.
3 - Apply the Text on a Curve SVG Action to the HTML box and open the actions palette.
4 - Select the path in the Path to use drop-down. Other options are available here to control how the SVG behaves.
As I stated above, this Action is in beta - there are a few issues that need to be solved before I feel I can call this a commercial product - and this is indeed what I intend to do. However, I am happy for people to use it providing they have the following restrictions in the back of their mind.
This Action does some clever tricks to convert Freeway’s HTML output into SVG (Scalable Vector Graphics). This is important, as the text itself is retained in the HTML, and is selectable and readable (hopefully by search engines etc).. It tries to match styles applied to the text in Freeway, so you, the user, aren’t exposed to too many alien concepts. The aim of this Action is to make this as natural as possible.
In order to achieve all of this, it needs to access two things: the tag stream (that is Freeway‘s HTML output), and the CSS styles. The tag stream is easy to get hold of, and interrogating and manipulating that is easy. However, accessing the CSS styles (especially when they are in external files) is more of a problem. None of these are exposed in any useful way to the Actions API, so we have to go down some very lengthy paths. Walter has written a very handy library which helps with this, but the Action has to effectively load and parse every style sheet that can be found, try to locate styles, match those with styles published in the tag stream by Freeway, and THEN convert to a format that SVG will understand. And breathe.
This is, as you can guess, a fairly complex task.
The problem is compounded further by the fact that the CSS files are not current. That is to say that they do not represent the CSS for the current publish cycle - so we have no way of knowing if any new styles have been added to the mix, or if any existing ones have changed. So if they requested by the SVG conversion process, they won’t be returned. If a style has been edited, that edit won’t be returned - you will get the previous version. CSS files appear to be written after the publish cycle has ended, which is why this happens.
So, the Action tries to determine IF it needs a second publish to catch any styles that are new or have changed. It does some (possibly clunky) comparisons to see if anything may have changed, and if it has, the Action will flag that a second publish is required. If you get this message, publish again and hopefully all will be well. Always check the relevant pages to be sure that what you see i the browser is what you expect. This seems to be as good as it’s going to get, until Softpress allow Actions access to all the CSS styles. How about it, Softpress?
You can download the Action using the button below. It’s for Freeway 6 only.
This Action is currently a “work in progress”. I am releasing it as a beta for you Freeway folk to play with, however in the future I plan to sell a version when the major issues I’ve highlighted below are ironed out. That all said, it should do what it does if you are happy to tolerate its eccentricities.