Forcing "ct" ligature for Google Web Fonts - css

I'm using the font IM Fell English for my project: https://fonts.google.com/specimen/IM+Fell+English?selection.family=IM+Fell+English
It has support for the "long s" ſ, and other common ligatures such as "ff", "fi", "ft", etc.
However, I can't seem to get "ct" ligature working, albeit you can see that the font does have the glyph: here 1) https://www.fontsquirrel.com/fonts/im-fell-english-pro and here 2) https://iginomarini.com/fell/the-revival-fonts/
I have tried font-variant-ligatures CSS property as directed here, but it does not work regardless of which value I set: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures
My current compromise is to replace the "s" with "ſ" Unicode character, but as far as I know, there is no such Unicode character for the "ct" ligature (nor a joiner glyph) (as far as I could find!)
Additionally, to get the long ſ to work, I had to #import the font in such way:
#import url('https://fonts.googleapis.com/css?family=IM+Fell+English:400,400i&subset=all&text=+!%22%23$%25%26()*%2B,-.%2F0123456789:;%3C%3D%3E%3F#ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5Dabcdefghijklmnopqrstuvwxyz%7B%7D%C2%A2%C2%A3%C2%A5%C2%A9%C2%AE%C3%97%C3%B7%C5%BF%E2%80%98%E2%80%99%E2%80%9C%E2%80%9D%E2%82%AC');
The method which I obtained the value for the text parameter was that I inputted the long ſ into the preview field on the Google Font webpage for IM Fell English (the first link above), and then I watch which request my browser sent out and copied it.
As you can see below, I am much in need of re-creating this! (Notice the "ct" in "Octaves"; I've taken care of the long ſ in the titles, but not the paragraphs)
Recreation:
Original Source:
Edit: I've found a workaround.
I downloaded the IM Fell English font, then use Character Map (which is available under Windows 10), and search for the glyph and copied it (U+E004 Private Use). The trouble now is that I cannot search (using Ctrl F) for anything that contains the ligature! So, I cannot search for "Octaves" because it is now "Oaves".
I believe the original question in the title still stands. I don't want a workaround, I want to have the browser force the ligature, if that's possible.

Related

Why does whitespaces between characters / words are handled in other way as general whitespaces?

I have create a font-subset for my two used fonts.
But if I enter the browser and inspect a given H1-Tag which should only use this font, it shows that 2 Fonts are used, because one character is taken from an Fallback_Font Open Sans:
The exact HTML-Tag:
<strong class="headline1">Carservice Meisterwerkstatt</strong>
The CSS which is used (BTW: PT Sans use the same Font-Subsetting, so the next Fallback for those 5 Glyphs is OpenSans):
To determine the Subset I've used: glyphhanger http://localhost:3000 and added the output of it as whitelist to the following command:
glyphhanger --whitelist=U+A,U+20-23,U+25-29,U+2B-3B,U+3F-57,U+59,U+5A,U+5F,U+61-7D,U+A9,U+C4,U+D6,U+DC,U+E4,U+F6,U+FC,U+F002,U+F017,U+F0F1,U+F2B5,U+F2DC,U+F46D,U+F500,U+F530,U+F5E1,U+F63B,U+F7D9 --subset=Dosis-VariableFont_wght.ttf
What I do search for is a way to figure out, which 5 Glyphs are used from Open Sans. Is there a way to get this in the DEV-Console?
For testing purposes, I've changed the font to other font face to see immediately if there is used another font as fallback. But as you can see, even with Alfredo as Fallback it is not visible which 5 glyph's are using this fallback.
I've tried now to remove each single Character in Content-Part of the Tag inside of the Dev-Console... and checked when does the font-mixing appear. I figured out, that it appear only if I have 2 Characters with a whitespace in between: r M
But if I enter only a character (or word) with a whitespace in front of, or after the character, it doesn't happend. M even not like M .
I found that there are more than one simple space-character. There are many (see https://emptycharacter.com/ down on topic Unicode empty characters)
So it seems the issue at least is, that the Font-Subset doesn't have the needed Unicode included.
If anybody knows how to easily figure out which exact unicode the browser request to the font, you are very welcome to paste it here as comment)

I am receiving \u200b in certain translations from the google-translate api

I am new to using the Google translate API and during testing we noticed that for some translations (I have not been able to find a pattern yet) we get \u200b characters in the response. That results in a lot of issues and above all it does not seem to server any purpose or make any sense. As simple example:
https://www.googleapis.com/language/translate/v2?key=YOURKEY&source=NL&target=EN&q=Hergeneer%20verkopen
returns:
{
"data": {
"translations": [
{
"translatedText": "Sell \u200b\u200bHerge Down"
}
]
}
}
Our software stumbles over these \u200b strings/characters and I have not found a way to prevent them or get rid of them.
Please read the documentation of the JSON format: https://json.org/
A string is a sequence of zero or more Unicode characters.
A char is either any Unicode character except " or \ or control-character,
[...]
or it is \u followed by four hex-digits.
We are in this last case, \u followed by four hex-digits, and it represents a Unicode character: Unicode Character 'ZERO WIDTH SPACE' (U+200B). It even has its own Wikipedia page: Zero-width space. And its Stack Overflow question: What's HTML character code 8203?.
Now, there are plenty Unicode characters with special behaviors, and this is one of those, an invisible one among others. So you need to be aware of how Unicode works, and you should sanitize input/output from third-parties API (and from user inputs as well).
Just define the list of characters that you actually want to support, and be sure to strip or filter out all the other ones. For instance, if you desire to support NL and EN, then you could strip what is outside the Latin script in Unicode.
Stripping the U+200B that you're encountering and other undesirable characters may save you from potential surprises like with:
big characters ⎲⎳
zalgo characters C̨̦̺̩̲̥͉̭͚̜̻̝̣̼͙̮̯̪o̴̡͇̘͎̞̲͇̦̲͞͡m̸̩̺̝̣̹̱͚̬̥̫̳̼̞̘̯͘ͅẹ͇̺̜́̕͢
invisible characters
emojis 👨‍👩‍👧‍👦#️⃣🏳️‍🌈

How can I fix turkish character on font-face?

I am using chunk five fonts on my web site as font-face on css.When I use pure fonts on photoshop, there will turkish characters exist.But when I convert it to font-face.I won't display Turkish characters.I shared a screenshot on the following segment of text;
I've tried to convert different type of font faces.I tried to convert it with the subsetting support and I've checked Turkish field on it.Also, I entered ş,Ş,İ,ı,ğ,Ğ,ü,Ü,Ç,ç,Ö,ö Single Characters field on converter.Unfortunately,It's not worked for me.How can I fix that problem?
Thanks and Regards.
You can try convert fonts from another sources and will fix. I know this is old post but maybe helps you.
Some sources:
http://convertfonts.com/
https://www.web-font-generator.com/
http://www.flaticon.com/font-face
https://fontie.flowyapps.com/home
I have experienced the exact same problem as you when dealing with font conversions for Turkish. First, I had run a conversion using FontSquirrel's tool (available here), but it turns out the conversion was stripping these much-needed characters for the Turkish language.
One of the references from #Karmacoma's answer was very interesting and did the trick for me (Fontie) because it delivers advanced options, which gives us more control over the conversion process.
In order to cover the special characters in Turkish, you must use Switch to advanced view and run the conversion with Latin Extended-A.
I went to Wikipedia for a list of characters covered in Latin Extended-A and you can find them here.

IDML : What are Kinsoku/Mojikumi tables?

I am new to the world of Adobe InDesign and IDML file format. I am trying to understand the IDML file format so that I can create IDML files dynamically through code!
I am going through the IDML File format specification and have found references to "Mojikumi Tables" and "Kinsoku Tables" and "Aki". Though the documentation defines various attributes for these elements, there's no clear explanation what these elements actually are.
Any pointers or links to relevant articles would be really helpful.
Thanks.
These are all additional typography settings used in laying out Japanese text.
Kinsoku: A rule set in the Japanese language that is used to determine characters that are not permitted at the beginning or end of a line. Reference.
Mojikumi: Determines spacing between punctuation, symbols, numbers, and other character classes in Japanese type. Reference.
Aki: Means space in Japanese:
"When the glyphs that correspond to characters of different character
classes come together in a run of text, there is spacing behaviour. In
other words, extra space, measured using a fraction of an em, is
introduced depending on which two character classes are in proximity*.
Typical values are one-fourth and one-half of an em"
(Footnote: * 'In Japanese this space is referred to as aki, which simply means
"space"')
Reference and source for this quote.
Here's a link to a book that should provide more information: CJKV Information Processing, 2nd Edition

How can I put text , image and symbols together through one field

I am creating a website for creating test papers for maths , physics etc, as it is not accepting special symbols.
(1.) If sin(symbol theta) then the general value of is
(a) 2n(pie symbol)
(b) 4(pie symbol)
(c)
(d) None of these
I have done rest all but it is taking only simple text questions , not symbols.
How to do that?
A quick search on Google lead me here: http://barzilai.org/math_sym.htm.
So, instead of typing the word, or trying to copy in the symbol from whatever text editor you are using, simply copy in the little set of characters from this website, and it should show the character in the website.
Here you see a conversion table http://htmlhelp.com/reference/html40/entities/symbols.html
Usage
You can just use it in your HTML, for instance
<div>This is the capital letter phi: Φ</div>

Resources