Font/Text Alignment With Canvas

[Timespider]

Hi, I am having issues aligning text to the canvas(Affinity Photo) I have read a thread here and also here and they seem to say that the text doesn't align properly.

 

Is this correct? Or am I doing something wrong?

 

I have attached an image showing what I mean. The right hand "L" is aligned to the right & bottom of the canvas, and the left hand "L" is so you can see the bounding box but also aligned to the bottom of the canvas.

 

They however are nowhere near these settings, the right align is off the canvas & the bottom align is the opposite & well above the bottom

 

It is very frustrating that I can't align them. Is there a setting I can change to adjust this?

 

 

Thanks

[DWright]

Is it possible to send me a copy of the .afphoto file as I have been unable to replicate the alignment issue.

[R C-R]

In your screenshot, the bottom alignment is to the selection bounds & as you can see from the "L" selected the bottom of its selection bounds is at the bottom of the canvas.

[Timespider]

Hi guys thanks for replying,

 

R C-R I have tried this with the other settings (spread & margin) & a different font(Arial) but the result is the same.

 

 

DWright how do I send the .afphoto file to you?

 

 

Thanks

[R C-R]

R C-R I have tried this with the other settings (spread & margin) & a different font(Arial) but the result is the same.

This is because the alignment options align to the bounding box of the block of text, not to the baseline, descender height, etc. of individual characters or glyphs in it -- in other words, the blue outline around your "L" examples is the reference point for alignment.

 

If you are trying to align the bottom of the two script "L" characters with the bottom edge of the canvas, try dragging them downward with snapping enabled after aligning them horizontally.

[Timespider]

R C-R thanks for replying again.

 

I think I understand, the texts or fonts don't align properly to the canvas. Is this correct?

 

It seems clunky to have to turn snapping on & off just for the fonts to align. It also seems odd that you would want to align the bounding box(using the align tool box) how would this help?

 

But I did try dragging with snapping turned on as you suggested & it did work. Be great if they could apply this function into the align tool box.

 

In the new image I've attached it shows how they align in Fireworks perfectly, be great if it worked this way in AP (I presume in Designer too).

 

 

Cheers  :)

[R C-R]

I think I understand, the texts or fonts don't align properly to the canvas. Is this correct?

There are many possible horizontal points of alignment for text (like baselines, capital heights, ascender heights, descender heights, & x heights). Different fonts have different values, so for example in a text snippet with mixed fonts, or with sub or superscripts mixed in, there is no one unambiguous reference point for the align options to use.

 

For instance, in your Fireworks example, consider what would happen if instead of just a plain, sans-serif capital "L" your text was the word "Light." The descender in the "g" would be clipped off of the canvas if the baseline for the "L" was the reference for bottom alignment.

[Timespider]

Hi R C-R,

 

I think I understand what your saying yet I would think the Fireworks example would be a good standard practice rather than no actual reference point of the font at all(with the canvas).

 

In Fireworks when using the "g" as an example it uses the bottom of the g as the reference point so it is not clipped off the canvas which would be the correct way as you will want to see the whole "g". But also with the align right in Affinity, why does the font hang outside the bounding box and then therefore get clipped off the canvas.

 

I hope you don't think I'm annoyed or anything like that as I have found this very useful. I'm just learning Affinity and believe this may help others too. Sorry about my descriptions as I don't know the technical terms I just know what I like in other programs while trying to avoid using adobe(I use Fireworks 8 by Macromedia. Have cs6 version but like 8 better). So moving forward I'm trying to switch to Affinity rather than adobe.

 

 

Thanks for the responses.

[R C-R]

I think I understand what your saying yet I would think the Fireworks example would be a good standard practice rather than no actual reference point of the font at all(with the canvas).

Affinity does use a standard reference point, that being the bounding box around the entire block of text. In your first example, select each of the "L" characters with the Move tool. Note that their bounding boxes do align.

 

Now consider that in Affinity a single text object can contain multiple fonts, multiple sizes of one or more fonts, one or more characters with raised or lowered baselines, subscripted or superscripted characters, a mix of standard & alternate glyphs, etc. Each text object can contain a single character, one or more words, or one or more paragraphs. Note that the align/distribute function works on two or more objects.

 

What standard reference could possibly apply to all these possibilities for alignment/distribution besides their bounding boxes?

[DWright]

Hi Timespider,

 

Thank you for the file and the information on the font that you were using

 

I have looked into this and for this font the characters are offset to the right of the standard bounding box so when you arrange the text it is the bounding box that is used and the offset is cutoff on the canvas. If you convert the text to the curves the bounding box will be redrawn over the whole text and it will align as expected

[R C-R]

I have looked into this and for this font the characters are offset to the right of the standard bounding box so when you arrange the text it is the bounding box that is used and the offset is cutoff on the canvas.

Now that you have called attention to it, this is clearly shown in the screenshot in the first post. It is something I completely overlooked that had been puzzling me about why the second "L" was being cut off. Thanks for solving that mystery!

 

By the way, would it be OK with Timespider to name the font? I do not think I have ever encountered a font with that much offset & would like to avoid using any that have!

[Alfred]

I do not think I have ever encountered a font with that much offset & would like to avoid using any that have!

 

Many script fonts have large negative side-bearings to avoid the huge gaps between the letters that you would otherwise get because of all the swirly bits and the italic slant. Shelley Script® Allegro is a good example: imagine how it would look if the 'c' in 'Script' were not tucked in close to the 'S', or if the 'l' in 'Allegro' were forced to the right of the apex of the 'A'.

[R C-R]

Many script fonts have large negative side-bearings to avoid the huge gaps between the letters that you would otherwise get because of all the swirly bits and the italic slant. Shelley Script® Allegro is a good example: imagine how it would look if the 'c' in 'Script' were not tucked in close to the 'S', or if the 'l' in 'Allegro' were forced to the right of the apex of the 'A'.

I thought kerning would take care of that, at least for OpenType & maybe TrueType fonts as well?

[Alfred]

I thought kerning would take care of that, at least for OpenType & maybe TrueType fonts as well?

 

Carefully adjusted side-bearings will give you a generally consistent amount of white space between the characters in the font. Kerning pairs (or classes) should really only be used for special cases such as 'AV' or 'f)': without kerning, the first example will be set too far apart and the terminal of the 'f' in the second one will collide with the top of the closing parenthesis.

[Timespider]

R C-R the font used is "Edwardian Script ITC". This is what the Client had on other graphics and wanted & once a previous graphic was finished, looked great.

 

My issue is with aligning to the canvas. Even with "Arial" font it doesn't align where in Fireworks they all do without having to change the modes & only one click of the canvas icon, in fact it works perfectly.  It would be good(I hope I'm saying this right) to have the "canvas" icon & for the fonts, no matter what they are, to do what the snapping does(align to the canvas) when dragging like R C-R mentioned above. I would believe (correct me if I'm wrong) that changing to curves would make fonts no longer editable which would not be a desired option in my case.

 

But now I'm aware of the answer & what is required it won't be such an issue & my computer will get less four letter words thrown at it.

 

Thanks for everyone's help & input. I.m sure if anyone else has a similar issue, this thread will supply some good feedback.

 

 

Cheers

[R C-R]

It would be good(I hope I'm saying this right) to have the "canvas" icon & for the fonts, no matter what they are, to do what the snapping does(align to the canvas) when dragging like R C-R mentioned above.

Consider that the arrange options are designed to be applied to two or more objects & when they are text objects each of them usually consists of more than one character. So, as I mentioned before, how would this 'canvas' alignment deal with two word text objects like "Light" & "Dark"?

 

It may help to refer to the first illustration in this Wikipedia article to understand what the problem with this is. Note that there are six different heights that two or more text objects could be aligned to. (There are actually more than that because of overshoot.)

 

So, which of these heights should the two text blocks be aligned on? If you want to apply this to the bottom alignment & use (for example) the "align to margin" option, to prevent clipping the lower part of the "g" the descender height should be the bottom reference, but the two words should probably align on the baseline to get visually pleasing results. But this won't be true if the two words are in different fonts (or maybe even just different colors, as the sidebar in the overshoot page mentions).

 

But what if the two text objects do not use the same font size (text height in Affinity terms) or are not even using the same font? Because one word has a descender & the other does not, they will never look aligned if the baseline is used for that. In some instances, the median or x-height would be a better choice, in others not.

 

It gets worse. Remember that text objects are vector objects in Affinity. That means they can be rotated or skewed, or for Artistic text distorted in height or width, as a single object, as well as applying various typographic styles like italics, bold, light, or thin to all or some characters.

 

How is your 'canvas' alignment supposed to cope with all of that?

[Timespider]

Hi R C-R,

 

sorry for the late reply(been in hospital with my daughter) I read the this Wikipedia article but still believe AP & AD should behave like Fireworks. Attached is an image showing right & bottom alignment of 2 text objects in Fireworks(top, left & middle works the same too). This is what I think should happen in AP & AD. You certainly wouldn't want the fonts clipped off the canvas this would be pointless, & short seems wrong too. It seems(I hope I've got it right) FW uses ascender & descender heights

 

Do you not think this is a good way to address this?

 

It works great. With the canvas selected & one click of the align tools the fonts align correctly to the canvas, not short or past the canvas, right to it, & is very quick & easy. Then if you want you can fine tune from there.

 

I will let my comments finish as I don't think I can add anything new. But I have appreciated the feedback.

 

 

Cheers

[Timespider]

Sorry this image might be better at showing the canvas.

 

 

Cheers

[R C-R]

Do you not think this is a good way to address this?

No, I do not, particularly for the three bottom alignment examples. They appear visually unbalanced & misaligned because the descender on the "g" in "Light" creates a lot of white space at the bottom that isn't present below "Dark." It gets worse as the font size increases, the text gets longer & includes different mixes of words with ascenders & descenders, or when one or more of the text blocks includes a mix of font or styles.

 

The more conventional, general way to handle this is to align baselines (or maybe medians), but obviously it varies depending on the text & the desired effect. I don't know if you read the Wikipedia Overshoot article I linked to but the sidebar comment in it sums it up pretty well:

Typefaces are born from the struggle between rules and results. Squeezing a square about 1% helps it look more like a square; to appear the same height as a square, a circle must be measurably taller. The two strokes in an X aren't the same thickness, nor are their parallel edges actually parallel; the vertical stems of a lowercase alphabet are thinner than those of its capitals; the ascender on a d isn't the same length as the descender on a p, and so on. For the rational mind, type design can be a maddening game of drawing things differently in order to make them appear the same.

 

More about that here, but the point is there is no one typographical alignment that can reasonably be considered "correct." Modern typefaces can & often do include hundreds or thousands of glyphs to accommodate the world's major written languages, plus a wide variety of symbols that frequently appear in text (like for mathematical equations, currency, legal & technical documentation, etc.) With the nearly universal worldwide adoption of Unicode, & thousands of fonts & text attributes that can be mixed in countless ways, achieving visually correct text alignment is never going to be something that a manageable number of alignment options in any app will ever be able to offer.

 

The alignment options in Affinity, Fireworks, or whatever are just the starting points for that.