Shotcut & Kerning Text

[Philez]

I suspect that I know the answer to this question already but I thought I’d throw it out anyway.

I am looking to either tighten or loosen the distance between text characters (kerning). I can do this via Pixelmator but would really like it if Shotcut did this natively (and Yes, I’m being lazy. I don’t want to build projects in another application and import them into Shotcut if I can avoid it).

Though as far as I can tell Shotcut does not do this though I hope that I’m wrong and just missed this capability.

[shotcut]

Not currently available

[Philez]

Figured as much.

[MusicalBox]

Hi @Philez
I’m pretty sure that, given your laziness ( ), the alternative I propose below will not suit your needs, but maybe someone else will find it useful.

It involves the use of the hair space character. It’s the same as the standard space you get by pressing the Space bar on your keyboard, except it’s 4 or 6 times narrower (not sure about the exact width). It’s not as precise as kerning, but in some cases it can help to manage letter spacing. Of course, this only works to add space between letters. It obviously can’t be used to reduce spacing, like in real kerning.

So here’s how to insert hair spaces in your text:
(I’m on Windows, but I’m sure there is an equivalent for Mac or Linux)

1. Open Windows Characters Map
   (Start > Windows Accessories > Characters Map)
   

   

2. Make sure the Character to copy field is empty.

3. In the Search for: field, type Hair and click on the Search button

4. The characters grid will turn all white.
   Click on the top left box, then click on the
   Select and the Copy buttons.

5. In the Shotcut Text filter, paste the hair space wherever you need it.

Here’s a short demo clip of the method:

hair space

NOTES: I realize this method is only useful for short texts, like titles for examples. Also, there are probably simpler ways to insert a hair space, but this is the only one I know. If someone knows of a keyboard shortcut for hair space, please feel free to share it with us

[jonray]

Gosh, who knew? Nice one, @musicalbox, I bow to your greatness

[MusicalBox]

Well, thank you @jonray!

The early bird gets the worm What time is it in UK right now? 4am?

[Philez]

Thanks for the assist! Pixelmator allows for editing text (such as kerning and leading) but it’s something a video editor should be capable of as well, since they’re relatively basic functions.

[jonray]

@MusicalBox

The early bird gets the worm What time is it in UK right now? 4am?

Pretty much! I went to bed at a normal time but woke to watch the live Olympics - the rowing final, men’s 8. GB got bronze (NZ won, we were pipped by the lovely Germans who got silver … )… then I went back to sleep…

PS the hair space thing is ingenious!

@Philez

it’s something a video editor should be capable of as well

@Philez - It would be nice. BTW kerning (space between letters) can be adjusted (and even keyframed) using HTML/webvfx which is still possible if you revert to SC version 20.07 - I made some HTML templates a while ago (see thread) but I appreciate you were asking for the kerning to be adjustable within Shotcut.
Anyway, for your interest:

Introducing: "Letter-Space" text effect for Video Titles using Text:HTML

Hi folks, I designed a set of new HTML video title templates featuring animated letter-spacing (the letters of the words expand horizontally). Then I made this video presentation, which I did using 34 HTML files (!) - each one using the effect but having a variation, showcasing an example of what can be done. https://streamable.com/9yfq2 https://streamable.com/9yfq2 Happy to share all 34 HTML files so users can use them as templates! Letter-Space text effect by Jonray (34 HTML TEMPLATES).zi…

[MusicalBox]

@jonray

but woke to watch the live Olympics - the rowing final

I watched the women’s eight rowing final earlier. Canada won the gold medal
I too had to go back to sleep after the race. I was exhausted

[jonray]

Plus - I just saw Canada beat Brazil on penalties to get to the women’s semifinal in football … while GB conceded a last-minute goal to draw against Australia…

[jonray]

@MusicalBox , @Philez , I just found these HTML codes for different types of spacing and wondered if they would work if pasted into the Shotcut text field, but I didn’t get it to work (don’t really know what I’m doing…). Anyone know if it could work? @elusien?

 [ ] hair space : 		          	or 	 
 [ ] 6-per-em space : 		      		(no character reference available)
 [ ] narrow no-break space : 	  		(no character reference available)
 [ ] thin space : 		          	or 	 
 [ ] 4-per-em space : 		      	or 	 
 [ ] non breaking space : 	      	    or 	 
 [ ] punctuation space : 	      	or 	  
 [ ] 3-per-em space : 		      	or 	 
 [ ] en space : 		          	or 	 
 [ ] figure space : 		      	or 	  
 [ ] em space : 		          	or 	 

[MusicalBox]

@jonray I was just hoping there would be a alt+code keyboard shortcut to produce that hair space.

Like:
alt+14 = ♫
(Hold Alt) + hit 1 + hit 4 + (Release Alt) = ♫

alt+3 =
alt+0169 = ©

A list of all the codes available here: https://www.alt-codes.net/

[awake]

Here is the unicode for a hair space: “ ” U+200A Hair Space Unicode Character

I know how to enter unicode in Linux (ctrl-shift-u, then enter the number, then Enter or spacebar), and I just tried it successfully with both the simple and the rich text filters (Shotcut version 21.03).

I don’t know how to enter unicode in Windows, or whether there is any reason that the Windows version of Shotcut wouldn’t work as well …

[Elusien]

@jonray

Anyone know if it could work?

Unlike the old Text:HTML filter, the Text:Rich filter is not a full HTML engine. For example

• it recognising the CSS “kening: normal;”, but not “letter-spacing: 4px;”

• it recognises “ ” but not “ ” provided that is that you have edited the HTML in an editor outside Shotcut and not tried to do in in the HTML editor in the VUI, then opened that file in the filter.

• Even trying to cut the UTF character out of an HTML page in a browser and paste it into the VUI editor is a mess, with the formatting for that one character becoming all screwy.

It is far too much effort to try to do character-spacing like this using the rich text filter. You can spend ages for no gain and a lot of pain.

[Elusien]

@awake

I don’t know how to enter unicode in Windows

You need a numeric keypad, then it is quite easy: alt+ (this MUST be the plus on the numeric keypad, not the other on the usual area of the keyboard) then the hexadecimal code of the character.

[Philez]

I’m in agreement. While I appreciate the innovation of some of the responses if a relatively (under normal conditions) small aspect of a project winds up as difficult as the project itself that’s a massive sign one is doing something wrong (even if you’re eventually able to do whatever it is that you wanted).

It’s much simpler to edit text outside of Shotcut, then import it back in.

[Sheep]

Something like this

Making skew text

In fact, I don’t see it in Gimp either [bayouGimp] By the way. In case you don’t already know this trick: In Gimp (works also in Photoshop) you can modify the spacing between each character easily. Position the cursor between two characters and use Alt+Left Arrow or Alt+ Right arrow to increase/decrease spacing. [2021-04-03_19.42.36]

[jonray]

Useful link. All hail @musicalbox