How split text to separate letters?

[Shalom3]

Hallo,

please, can you tell me, how I can split text to separate letters?

Thanks

[MEB]

Hi Shalom3,

Select the text then go to menu Layer ▸ Convert to Curves.

Note that will conver all text to path so it will not be editable anymore.

If you want to keep the text as text (without converting to paths) you have to write each letter in its own text frame box.

[My Strawberry Monkey]

Select text then right click and choose convert to curves or go to the layer menu and choose the same option...

 

 

 

 

Allan

[Alfred]

If you want to keep the text as text (without converting to paths) you have to write each letter in its own text frame box.

 

The most likely reason for keeping the text as text is to keep it editable, but it won't be easily editable if each letter is a separate object. A more flexible approach is to make a copy of the text, convert one of the copies to curves and keep the other one hidden until you need to edit it.

[Shalom3]

Oh, how easy! In Corel Draw I must first split the text to individual characters, than I can also convert the letter into curves. If I make not the splitting and convert the text to curves, it is all only one object.

[MEB]

The most likely reason for keeping the text as text is to keep it editable, but it won't be easily editable if each letter is a separate object. A more flexible approach is to make a copy of the text, convert one of the copies to curves and keep the other one hidden until you need to edit it.

 

Not necessarily. This depends entirely on what you want to do. For creative/complex text effects having the letters separated and editable can be handy.

[Alfred]

Not necessarily. This depends entirely on what you want to do. For creative/complex text effects having the letters separated and editable can be handy.

 

That's a perfectly fair point! :)

[Petar Petrenko]

Hallo,

please, can you tell me, how I can split text to separate letters?

Thanks

 

You can use "Positionig and Transform" inside "Character" tab to simulate splited text.

[tibi]

I cry every day because they don't implement this important feature. Even with the release of AD 2. Is still not there. How hard is to implement a brake text by line, If no line brake text by space, If no space brake text by letter  

[loukash]

6 hours ago, tibi said:

How hard is to implement a [break] text by line

1. export a text object to temporary PDF
2. open (not place) the PDF in Affinity with "Group lines into text frames" disabled
3. voilà

6 hours ago, tibi said:

If no space [break] text by letter  

That requires Publisher and its Find & Replace panel.
You may want to copy the text object into a temporary blank new document if your working document contains other text you don't want to split:

1. Find & Replace in regex mode
2. find: (.)
3. replace: $1\n 
4. export to temporary PDF
5. open exported PDF

The text is now vertical, of course, but split without having to retype every single character. You can then use the transform and align tools to make it horizontal again.

[v_kyr]

11 minutes ago, loukash said:

That requires Publisher and its Find & Replace panel.

Well that's too restricted (APub needed) here.

Instead I would just perform (via a simple script/program routine) a text string split into single characters (...by looping over a given or as cmdline passed over text) and then write out every character as a single SVG text portion into an SVG file (...can be done in any prog+scripting language). - So it can be opened/imported into every Affinity app then.

A simple pseudo code way ...

Quote

string = 'For all Affinity apps'  ### string will be instead usually passed over as an cmdline argument

### write first out into a file the beginning SVG header part

 

### a loop which gives all single characters of the passed string, so you can perform something with those single chars

for letter in string:

    file.write-as-svg-text(letter)
 

### write into file the SVG closing tag part
### EOF

 

[v_kyr]

Here's a quick Python script test take of the previous suggested/said via the SVG file generation route ...

# -*- coding: utf-8 -*-
#
# Scriptname: text2svgletters.py
# Script to generate SVG single letters from text
#
# Call samples: 
#       python3 text2svgletters.py --help
#       python3 text2svgletters.py --horiz False --vert True svgtest "Hello World"
# 
# Where:
#      --horiz <bool>  = (yes, true, t, y, 1 ) || ('no', 'false', 'f', 'n', '0')
#      --vert  <bool>  = (yes, true, t, y, 1 ) || ('no', 'false', 'f', 'n', '0')
#              do write out the single SVG letters horizontal/vertical/diagonal.
#
#      svgtest = the SVG filename to create (the SVG-extension will be auto added)
#      "Hello World" = the given string to split into single SVG letters
#      
# Creative Commons Attribution-ShareAlike License
# ********************************************************************************
#
#
# v_kyr
# 2023/01/08

import argparse

def str2bool(v):
    if isinstance(v, bool):
        return v
    if v.lower() in ('yes', 'true', 't', 'y', '1'):
        return True
    elif v.lower() in ('no', 'false', 'f', 'n', '0'):
        return False
    else:
        raise argparse.ArgumentTypeError('Boolean value expected.')

def svg_generation(fname, txtstring, horiz, vert):
    fname = open(fname + ".svg", "w")
    fname.write("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n")
    fname.write("<!-- Generated by text2svgletters.py -->\n")
    fname.write("<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n")
    fname.write("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"600\" height=\"600\" viewBox=\"0 0 600 600\">\n")
    startx = 20
    starty = 20
    for letter in txtstring:
        if horiz:
            startx += 20
        if vert:
            starty += 20
            
        the_text = "<text x=\"" + str(startx) + "\" y=\"" + str(starty) + "\">" + letter + "</text>\n"
        fname.write(the_text.format(fname))
    
    fname.write("</svg>\n")
    fname.close()


if __name__ == '__main__':
    parser = argparse.ArgumentParser()
    parser.add_argument("--horiz", type=str2bool, nargs='?',
                        const=True, default=True,
                        help="Write out letters horizontal.")
    parser.add_argument("--vert", type=str2bool, nargs='?',
                        const=True, default=False,
                        help="Write out letters vertical.")
    parser.add_argument("filename",
                        help="the filename for writing SVG code to (the SVG extension will be auto added)")
    parser.add_argument("txtstr",
                        help="the text string to break down into single letters")
    
    args = parser.parse_args()
    horiz = args.horiz
    vert = args.vert
    fname = args.filename
    txtstring = args.txtstr
    svg_generation(fname, txtstring, horiz, vert)
    print("Done!" + "\n\n")

• text2svgletters.py

A sample call of above script ...

Quote

> python3 text-to-svg-letters.py --horiz False --vert True svgtest "Hello World"

... will generate such a (svgtest.svg) SVG output file ...

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by text2svgletters.py -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 600 600">
<text x="20" y="40">H</text>
<text x="20" y="60">e</text>
<text x="20" y="80">l</text>
<text x="20" y="100">l</text>
<text x="20" y="120">o</text>
<text x="20" y="140"> </text>
<text x="20" y="160">W</text>
<text x="20" y="180">o</text>
<text x="20" y="200">r</text>
<text x="20" y="220">l</text>
<text x="20" y="240">d</text>
</svg>

• svgtest.svg
• svgtest.afdesign

Things which could be added as enhancements to the above script, in order to make it more flexible, would be ...

- adding arguments for defining the overall SVG viewBox size (width/height) to use
- adding arguments for defining the x,y coordinate start positions and their increment values, for how to (pre)position the SVG letters
- adding argument for defining the SVG text color to draw (actually it's the SVG default, just black)
- ... etc.

 

[loukash]

@v_kyr, amazing!
On El Capitan, "python3" is unknown but "python" works.

49 minutes ago, v_kyr said:

Things which could be added as enhancements to the above script, in order to make it more flexible, would be ...

… on Mac: an Automator service. It cannot access an Affinity text selection directly, but it can process clipboard content. And you can set variables to show dialogs with text input, set file name and save location, open the SVG with Affinity etc.

[loukash]

That said, my "Regex-find-replace-PDF-export-reimport" method has the benefit that existing text formating is retained in place.

[v_kyr]

41 minutes ago, loukash said:

On El Capitan, "python3" is unknown but "python" works.

That's an old Python 2.7 version preinstalled by Apple and so out of date in terms of more modern Python 3.x capabilities. But you can install Python 3 easily additional on El Capitan via a DMG installer from Python.org, or via Homebrew or Macports etc. Python 3.x will then coexist to Python 2.7, meaning here calling "python" will fetch Apple's preinstalled python 2.7, "python3" instead the Python 3.x you've personally installed.

41 minutes ago, loukash said:

… on Mac: an Automator service. It cannot access an Affinity text selection directly, but it can process clipboard content. And you can set variables to show dialogs with text input, set file name and save location, open the SVG with Affinity etc.

That's fine for Mac users, but Win users are then out of the game here. In order to keep things platform portable and to have a GUI, could be done via Pythoon GUI scripting too, but I (personally) mostly prefer to use Java for portable GUI apps (compile once run everywhere via a Java VM).

37 minutes ago, loukash said:

That said, my "Regex-find-replace-PDF-export-reimport" method has the benefit that existing text formating is retained in place.

But it's highly dependent on an always buggy APub (...well no thanks) and the last user "tibi" asked instead after an yet unsupported ADe 2 feature instead of APub. - Further I belive that most users aren't looking for such things like our workarounds at all, they want to have this instead as a build-in functionality.

[loukash]

8 hours ago, v_kyr said:

I (personally) mostly prefer to use Java for portable GUI apps

That would be a standalone app then.

I prefer background macros which is what an Automator service essentially is. (I actually prefer Keyboard Maestro but that's a paid 3rd party solution.) They can be set up so that you never have to leave Affinity. In fact, the macro could even paste the result into the Affinity document you've started from, by opening the temporary SVG as a new document, group all objects, copy all, close without saving (and moving the *.svg to trash), paste into the original document. That's all possible with Mac UI scripting that can be run either from Automator or from KM, or combined. And most importantly, all can be triggered via a single keyboard shortcut directly while in Affinity.

Now, it's not something that I'd personally need in the first place, but if I'll feel bored I may eventually give that a try.

I'd expect there are similar macro utility on Windows, too.

9 hours ago, v_kyr said:

Further I belive that most users aren't looking for such things like our workarounds at all, they want to have this instead as a build-in functionality.

What do we know?
We know what some users are posting.
We don't know what all those guest visitors are looking for without ever even registering on the forum.

[v_kyr]

1 hour ago, loukash said:

That would be a standalone app then

Yes, though can also be implemented (run/executed) as a service and so deal with the clipboard too if needed.

1 hour ago, loukash said:

I prefer background macros which is what an Automator service essentially is. (I actually prefer Keyboard Maestro but that's a paid 3rd party solution.) They can be set up so that you never have to leave Affinity. In fact, the macro could even paste the result into the Affinity document you've started from, by opening the temporary SVG as a new document, group all objects, copy all, close without saving (and moving the *.svg to trash), paste into the original document. That's all possible with Mac UI scripting that can be run either from Automator or from KM, or combined. And most importantly, all can be triggered via a single keyboard shortcut directly while in Affinity.

There are several such (...but slightly different in overall functionality) apps for MacOS (a small overview here). Though the whole could also be done with MacOS onboard tools only (Automator/AS/JS). - So the more important part here is overall, to prepare the SVG code itself for data exchanged via the clipboard accordingly well in SVG.

1 hour ago, loukash said:

Now, it's not something that I'd personally need in the first place, but if I'll feel bored I may eventually give that a try.

Honestly I personally so far never had a need for that and in case I would have a need for it, I can always easily simulate & workaround that in some way.

1 hour ago, loukash said:

I'd expect there are similar macro utility on Windows, too.

Probably, there should be even more possibilities in terms of third party software for Win.

 

1 hour ago, loukash said:

What do we know?
We know what some users are posting.
We don't know what all those guest visitors are looking for without ever even registering on the forum.

Well we (sometimes) try to help those who at least ask after how to solve some to them specific problem. Where the problems here can be either of more general nature (applicable to a wider audience), or are user specific individual. - However, we can't tell what the majority of guest users are looking after, or are interested in.

[loukash]

5 minutes ago, v_kyr said:

So the more important part here is overall, to prepare the SVG data exchanged via the clipboard accordingly well as SVG.

Did you know that if you copy the content of an *.svg file to the clipboard as plain text and paste that into an Affinity document, it will paste the vector objects?
Amazing!

So your script doesn't even have to create an *.svg file. All it has to do is to set the clipboard content.

Since we have a "Copy items as SVG" preference setting in Affinity, your script could even search the clipboard for any <text></text> tags, separate their content on the fly, and paste back as individual text frames with character formating intact. 

[lacerto]

Once there is scripting support (probably Javscript based), scripting becomes more useful as a specific script could then most probably be invoked with appropriate content as input and also location for output. Before that I would use scripting for these kinds of tasks only if there is massive repetitive use for an operation, or if there is already a script created for the task.

So typically I'd look for support in graphic apps that can exchange content with Affinity apps, free ones, like Inkscape, if there is nothing else available. E.g., for this task, Inkscape has split text functionality that can separate a Clipboard passed text block by line, word or letter to separate text objects, which could then be copy pasted back to Affinity apps and finally distributed horizontally and vertically as needed. Formatting would be supported, as well:

[v_kyr]

3 hours ago, loukash said:

Did you know that if you copy the content of an *.svg file to the clipboard as plain text and paste that into an Affinity document, it will paste the vector objects?

Yes I already know this! - It's common usage.

 

3 hours ago, loukash said:

So your script doesn't even have to create an *.svg file. All it has to do is to set the clipboard content.

LOL, well the clipboard content (as I've said before) is the important part to deal here with.

So if you want to have it bidirectional, when copying from ADe let's say some Artistic text like "Hello World", you will get the whole SVG code into the clipboard, namely ...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 424 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-87.4808,-104.371)">
        <g transform="matrix(2.56771,0,0,2.56771,-137.144,-163.622)">
            <text x="86.403px" y="121.843px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">Hello World</text>
        </g>
    </g>
</svg>

... which in turn you would have laborious to parse first, in order to get out of that SVG code the SVG viewBox size and SVG text positioning. And due to the "SVG transforms" which you can't flatten before here then via a copy to clipboard, it complicates the whole SVG parsing step. - Next, assuming here you would already have correctly parsed SVG viewbox and x,y position for the text values, you would need to split the text (Hello World) into single letters and embed those again in SVG code, but with some suitable x,y distance gaps.

 

3 hours ago, loukash said:

Since we have a "Copy items as SVG" preference setting in Affinity, your script could even search the clipboard for any <text></text> tags, separate their content on the fly, and paste back as individual text frames with character formating intact.

You can't paste back as individual text frames with character formating intact. And you have to see in turn here also, if you can paste back consecutive single letters then via scripting (...a series of pastings). - Pasting some plain text back always creates an unnecessary Frame text here, so you can't via plain text force Artistic Text. - And in case of SVG code, that either way only deals with sort of Artistic text portions, since SVG doesn't have/support something like Frame text.

[v_kyr]

35 minutes ago, lacerto said:

Once there is scripting support (probably Javscript based), scripting becomes more useful as a specific script could then most probably be invoked with appropriate content as input and also location for output.

I somehow have my doubts about that, especially when I see how and what the APh Macro facilities only offer. - Meaning, I fear that will be hghly restricted too then!

39 minutes ago, lacerto said:

Before that I would use scripting for these kinds of tasks only if there is massive repetitive use for an operation, or if there is already a script created for the task.

So typically I'd look for support in graphic apps that can exchange content with Affinity apps, free ones, like Inkscape, if there is nothing else available.

Good point, I usually feel the same way!

 

[loukash]

55 minutes ago, lacerto said:

Before that I would use scripting for these kinds of tasks only if there is massive repetitive use for an operation, or if there is already a script created for the task.

15 minutes ago, v_kyr said:

Good point, I usually feel the same way!

And that's why I will likely stick to my Publisher workaround.  

[v_kyr]

3 minutes ago, loukash said:

And that's why I will likely stick to my Publisher workaround.  

If it does what you personally need it to do, it's pretty legitimate to do so.

[loukash]

Actually, there's yet another PDF workaround I just recalled, and it works without Publisher:

1. place the text you want to split into characters on a slightly rounded curve
2. export to PDF
3. open PDF: all characters split

Caveat: you will have to adjust rotation back to 0° manually one by one.

[loukash]

12 minutes ago, loukash said:

Actually, there's yet another PDF workaround I just recalled, and it works without Publisher:

1. place the text you want to split into characters on a slightly rounded curve
2. export to PDF
3. open PDF: all characters split

Caveat: you will have to adjust rotation back to 0° manually one by one.

Like this: