opentype.js
Read and write OpenType fonts using JavaScript.
opentype.js – JavaScript parser/writer for OpenType and TrueType fonts.
How do I extract the list of supported Unicode characters from a TrueType or embedded OpenType font on Linux?
Is there a tool or a library I can use to process a .ttf or a .eot file and build a list of code points (like U+0123, U+1234, etc.) provided by the font?
Source: (StackOverflow)
I'm having a problem with custom UIFonts. I load 6 of them (font A in regular/bold/regularItalic/boldItalic, font B in condensed/condensedSlanted variants).
However, here is what it gives when rendered:
The two first rows are OK, but the last one exhibits a baseline problem.
I've tried changing the UPM, ascender, descender, x-height of the font in FontLab so that it matches the first font's values (which render correctly), but to no avail. I've tried converting the font format from OTF to TTF, no luck. Whatever I try, it always renders this way.
Does anyone have experience with this?
Source: (StackOverflow)
What exactly is it that makes GDI+ switch to binary aliasing when using default Microsoft Office font Calibri between 9pt and 14pt with ClearTypeGridFit specified?
It's somewhat disconcerting. How many other fonts are also affected by whatever is behind this, and at what sizes? Is there a workaround?
(Excluding GDI, which doesn't have the same text layout features?)
Here's the code I used to generate the image:
private void Form1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
var height = 0;
for (var i = 1; i <= 17; i++)
{
using (var font = new Font("Calibri", i))
{
var text = "ClearTypeGridFit " + i + "pt";
e.Graphics.DrawString(text, font, SystemBrushes.ControlText, 0, height);
height += (int)e.Graphics.MeasureString(text, font).Height;
}
}
}
Source: (StackOverflow)
The spec( http://www.microsoft.com/typography/otspec/cmap.htm ) only have platformID 3(windows) and platformID 1(Mac) and the encodingID in the windows platform. How about other platforms and other encodings beside windows?
I use ttfdump to dump one of the adobe fonts and it give me:
'cmap' Table - Character to Glyph Index Mapping Table
-----------------------------------------------------
'cmap' version: 0
number of encodings: 5
number of subtables: 3
Encoding 0. PlatformID: 0
EcodingID: 3
SubTable: 0, Offset: 0x00000a0e
Encoding 1. PlatformID: 0
EcodingID: 4
SubTable: 1, Offset: 0x0000cc26
Encoding 2. PlatformID: 1
EcodingID: 25
SubTable: 2, Offset: 0x0000002c
Encoding 3. PlatformID: 3
EcodingID: 1
SubTable: 0, Offset: 0x00000a0e
Encoding 4. PlatformID: 3
EcodingID: 10
SubTable: 1, Offset: 0x0000cc26
So it does have other platforms and encodings but where to find the definitions?
Source: (StackOverflow)
Background: Adobe released their first open source fonts to the GitHub. Repos consist of many files with different syntax, some of them are binary. See e.g. https://github.com/adobe/source-sans-pro
In the corresponding README file, build process is outlined like this:
> Key to building OTF or TTF fonts is makeotf, which is part of the AFDKO toolset.
> In this repository, all necessary files are in place for building the OTF and TTF fonts.
It works, but doesn't contribute to my understanding of the font creation process. I've found specs of some of the formats, but very little about what they do. A good HOWTO would help a lot.
And the main question is, I have glyphs in SVG (or any other vector) format and necessary metrics for each glyph. Let's also say that kerning is a non-issue for now, to keep things simple.
How do I build an OTF (or TTF) font file automatically with those?
I'm comfortable with both programming and reading the f. manuals, just don't know where to begin.
Source: (StackOverflow)
I have a Qt 4.8 app with it's front end UI all done via QML in a QDeclarativeView.
On the (original) Linux version of the app, there are a couple of fonts it uses in QML in Text items via specifying
font.family: "ReykjavikOne OT AGauge"
or
font.family: "ReykjavikOne OT CGauge"
and these work as expected (the CGauge one is a sort of fat, bold version).
However, on the Mac port, both these seem to fall back to some ugly default fallback sans font. But using
font.family: "ReykjavikOne OT"
does get the "AGauge".
On the Linux system, fc-list | grep ReykjavikOne gets me
/usr/share/fonts/opentype/ReykjavikOneCGaugeItalic.otf: ReykjavikOne OT,ReykjavikOne OT CGaugeItalic:style=CGaugeItalic
/usr/share/fonts/opentype/ReykjavikOneCGauge.otf: ReykjavikOne OT,ReykjavikOne OT CGauge:style=CGauge
/usr/share/fonts/opentype/ReykjavikOneAGauge.otf: ReykjavikOne OT,ReykjavikOne OT AGauge:style=AGauge
/usr/share/fonts/opentype/ReykjavikOneAGaugeItalic.otf: ReykjavikOne OT,ReykjavikOne OT AGaugeItalic:style=AGaugeItalic
and on the Mac, FontBook shows the 4 styles listed as sub items under a single "ReykjavikOne OT" entry. The CGauge font seems to be perfectly usable in other apps on the Mac, so I'm assuming this is an issue peculiar to Qt/QML.
There just doesn't seem to be any QML Text/font mechanism (at least, not one I can discover) by which I can select a font style with style name "CGauge". Messing around with bold/font-weight just seems to get me a bolder AGauge, or the default font.
Much the same applies to QML RichText content too. Text with <style></style> elements containing font-family: 'ReykjavikOne OT CGauge' work fine on Linux, but on Mac it reverts to the fallback font and 'ReykjavikOne OT' is the best can be done, obtaining the AGauge. (Adding a font-weight: bold; does get a bold AGauge, but CGauge is noticeably fatter).
Both Mac and Linux (Debian/Wheezy) systems have the fonts installed from the same .otf files.
What's my best hope to work round this issue and get the CGauge style of the font to display on the Mac as intended? (NB I'm a novice when it comes to fonts, and Macs).
Source: (StackOverflow)
A particular font variety (with ligatures) that I would like to use is only available as OpenType.
I am trying to work out which browsers will be able to display it properly, and how I should add it to the CSS.
I have found this article from July 2012, with contributions from Paul Irish among others, suggesting it is probably authoritative:
http://www.typotheque.com/articles/opentype_features_in_web_browsers
But I don't understand the distinction it makes between OpenType fonts, and OpenType features:
But while all modern browsers can display OpenType *fonts*, only Firefox
(since version 4) [1], Internet Explorer 10 (preview version)[2] and
the latest versions of Google Chrome[12] are currently able to display
OpenType *features*.
So:
- Can I use this OpenType font in modern browsers? What is the difference between OpenType fonts and features? I would like to be able to display ASCII characters and ligatures.
- How should I actually include this OpenType font in the CSS?
Thanks!
Source: (StackOverflow)
I'm trying to use fonts from the Nitti Basic family for programming. These fonts are packaged as OpenType PostScript OTF files.
Its U+002D (HYPHEN-MINUS) glyph works well as a hyphen, but not so well as a minus.
For example, it doesn't line up with the horizontal bar of the plus sign.
On the other hand, Nitti's glyph for U+2212 (MINUS) is perfect as a minus (of course), and this is what I need when programming. It's not feasible for me to actually use codepoint U+2212; after all, U+002D is what you get when you press the minus sign on the keyboard and it's what programming languages use for subtraction.
So instead I'd like to steal the glyph from U+2212 and use it for U+002D, so that that character looks like a minus sign.
How can I do it?
Update: Yes, it is possible to use U+002D as a hyphen in source code.
As mentioned above, a minus sign is what I need.
Source: (StackOverflow)
How to set default font feature settings per font?
I am using two different fonts in my current project and want to enable font-feature-settings on both of them.
Currently I have to do this via the * selector:
*, *:before, *:after {
-webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
-moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
-ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
font-feature-settings: "kern", "liga", "pnum" "ss01";
}
So far so good; this way I set kerning, ligatures and proportional numbers as a default. The problem is the alternative stylistic set.
I want to have this one on every instance of one of my fonts. The other font has another stylistic set, which I do not want to use.
My prefered way would be to incorporate defaults in the @font-face like this:
@font-face {
font-family: 'FFDin';
font-weight: normal;
font-style: normal;
-webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
-moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
-ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
font-feature-settings: "kern", "liga", "pnum" "ss01";
src: url("fonts/DINWeb-Light.eot");
src: url("fonts/DINWeb-Light.eot?#iefix") format("embedded-opentype"),
url("fonts/DINWeb-Light.woff") format("woff"),
url("fonts/DINWeb-Light.ttf") format("truetype");
}
I have tested this in chrome, but it does not work. Is there any way to declare the default font-feature settings per font?
Source: (StackOverflow)
This is the first time I've used @font-face. The font pack is from myfonts.com and I'm currently testing in Safari and noticed through the web inspector that the css file, which loads the 2 fonts shows as a nearly-2mb-download ! the fonts appear to be there as base64 encoded. The pack didn't include the actual .otf files.
I've added Gzipping via a .htaccess file and this has cut down the size of that file by nearly half but at 1mb, it's still not acceptable and I can't understand why it's so big.
Source: (StackOverflow)
I have a function that converts a decimal to its fraction equivalent. I have found some of the fractions but i cannot seem to find the sixteenths (1/16) fractions. Anyone got any suggestions as to where i can look on the net or an way for me to convert these three character fractions to a one character fraction.
I have a bitmap below that shows where the 16nths fractions take up so much realestate, unlike the other fractions which look nice and small.
I've added the function that I am using to convert these fractions below.
I've checked everywhere online and haven't got this resolved yet.
If i could get something like here http://msdn.microsoft.com/en-us/library/ms745109.aspx about three quarters of the way down the page you'll see the Numerical Types. If i could get something like the stacked version for the windows graphics that would be a win.
static string getFractionFromDecimal(decimal dec)
{
string d = dec.ToString(), dd = string.Empty;
switch (d)
{
case "0.0625": dd = " 1/16"; break;
case "0.1250": dd = "⅛"; break;
case "0.1875": dd = " 3/16"; break;
case "0.2500": dd = "¼"; break;
case "0.3125": dd = " 5/16"; break;
case "0.3750": dd = "⅜"; break;
case "0.4375": dd = " 7/16"; break;
case "0.5000": dd = "½"; break;
case "0.5625": dd = " 9/16"; break;
case "0.6250": dd = "⅝"; break;
case "0.6875": dd = " 11/16"; break;
case "0.7500": dd = "¾"; break;
case "0.8125": dd = " 13/16"; break;
case "0.8750": dd = "⅞"; break;
case "0.9375": dd = " 15/16"; break;
}; return dd;
}
Source: (StackOverflow)
I am following the documentation on apple.com.
I managed to get The 'cmap' encoding subtables. I know 100% that platformID, platformSpecificID are correct, but offset is suspicious. Here is the data:
array(3) {
[0]=>
array(3) {
["platform_id"]=>
int(0)
["specific_id"]=>
int(3)
["offset"]=>
int(532)
}
[1]=>
array(3) {
["platform_id"]=>
int(1)
["specific_id"]=>
int(0)
["offset"]=>
int(28)
}
[2]=>
array(3) {
["platform_id"]=>
int(3)
["specific_id"]=>
int(1)
["offset"]=>
int(532)
}
}
Offset for two tables is the same, 532. Can anyone explain me this? And is this offset from current position or from the beginning of the file?
part 2
Ok. So I managed to get to the format tables using this:
private function parseCmapTable($table)
{
$this->position = $table['offset'];
// http://developer.apple.com/fonts/ttrefman/RM06/Chap6cmap.html
// General table information
$data = array
(
'version' => $this->getUint16(),
'number_subtables' => $this->getUint16(),
);
$sub_tables = array();
for($i = 0; $i < $data['number_subtables']; $i++)
{
// http://developer.apple.com/fonts/ttrefman/RM06/Chap6cmap.html
// The 'cmap' encoding subtables
$sub_tables[] = array
(
'platform_id' => $this->getUint16(),
'specific_id' => $this->getUint16(),
'offset' => $this->getUint32(),
);
}
// http://developer.apple.com/fonts/ttrefman/RM06/Chap6cmap.html
// The 'cmap' formats
$formats = array();
foreach($sub_tables as $t)
{
// http://stackoverflow.com/questions/5322019/character-to-glyph-mapping-table/5322267#5322267
$this->position = $table['offset'] + $t['offset'];
$format = array
(
'format' => $this->getUint16(),
'length' => $this->getUint16(),
'language' => $this->getUint16(),
);
if($format['format'] == 4)
{
$format += array
(
'seg_count_X2' => $this->getUint16(),
'search_range' => $this->getUint16(),
'entry_selector' => $this->getUint16(),
'range_shift' => $this->getUint16(),
'end_code[segCount]' => $this->getUint16(),
'reserved_pad' => $this->getUint16(),
'start_code[segCount]' => $this->getUint16(),
'id_delta[segCount]' => $this->getUint16(),
'id_range_offset[segCount]' => $this->getUint16(),
'glyph_index_array[variable]' => $this->getUint16(),
);
$backup = $format;
$format['seg_count_X2'] = $backup['seg_count_X2']*2;
$format['search_range'] = 2 * (2 * floor(log($backup['seg_count_X2'], 2)));
$format['entry_selector'] = log($backup['search_range']/2, 2);
$format['range_shift'] = (2 * $backup['seg_count_X2']) - $backup['search_range'];
}
$formats[$t['offset']] = $format;
}
die(var_dump( $sub_tables, $formats ));
The output:
array(3) {
[0]=>
array(3) {
["platform_id"]=>
int(0)
["specific_id"]=>
int(3)
["offset"]=>
int(532)
}
[1]=>
array(3) {
["platform_id"]=>
int(1)
["specific_id"]=>
int(0)
["offset"]=>
int(28)
}
[2]=>
array(3) {
["platform_id"]=>
int(3)
["specific_id"]=>
int(1)
["offset"]=>
int(532)
}
}
array(2) {
[532]=>
array(13) {
["format"]=>
int(4)
["length"]=>
int(658)
["language"]=>
int(0)
["seg_count_X2"]=>
int(192)
["search_range"]=>
float(24)
["entry_selector"]=>
float(5)
["range_shift"]=>
int(128)
["end_code[segCount]"]=>
int(48)
["reserved_pad"]=>
int(58)
["start_code[segCount]"]=>
int(64)
["id_delta[segCount]"]=>
int(69)
["id_range_offset[segCount]"]=>
int(70)
["glyph_index_array[variable]"]=>
int(90)
}
[28]=>
array(3) {
["format"]=>
int(6)
["length"]=>
int(504)
["language"]=>
int(0)
}
}
Now, how do I get from here, to getting character Unicode codes? I tried reading the documentation, but it is too vague for a novice.
http://developer.apple.com/fonts/ttrefman/RM06/Chap6cmap.html
Source: (StackOverflow)
okay. according to @fontface, OpenType PS does NOT have subpixel rendering when converted and used on Windows platforms. Crap Factor = 9. my question is, since it's cakey-pants to convert OpenType PS to OpenType TT, what happens to subpixel rendering? i've tried using some online converters and see ZERO difference: fonts look like crap.
so the question is HOW can i convert an OpenType PS file to an OpenType TT file WITH subpixel rendering coming along for the ride?
because once i have an OpenType TT file, i can get to EOT easily.
thanks!
WR!
Source: (StackOverflow)
I'm working on a site where small caps are important: setting the text of the Bible. In the Old Testament the name of God is transliterated as Lord but in small caps—not LORD. However, the state of OpenType small caps support at the moment is… less than optimal. Safari (even up through Safari 8 on Yosemite, from which I am typing this) still doesn't support the -webkit-font-feature-settings: 'smcp' option, and a lot of the hits for this website will be coming from mobile.
Unfortunately, "graceful degradation" is problematic here: if you specify both font-variant: small-caps and font-feature-settings: 'smcp' in a browser that supports the latter (e.g. Chrome), the font-variant declaration overrides it, so the horribly ugly old-style version still comes into play. (Note: this is as it should be per the spec: the font-variant declaration has a higher priority than the font-feature-settings declaration). Given the current implementations of font-variant: small-caps, though—shrunken capitals rather than actual small capitals—the result is that using font-variant: small-caps realists in not-so-gracefully degrading everyone's reading experience.
In the past, I have exported the small caps as a distinct webfont and specified them directly; see this post for a simple example: the first line of each paragraph is specified that way.
While I can do the same thing here (and at least in theory could deliver a pretty small typeface, since I really only need three characters: o, r, and d), I'd prefer simply to enable sane fallbacks. As noted above, however, that's not possible. I am open to but would very much prefer to avoid server-side solutions (browser detection, etc.) as a point of complexity that is better to minimize, especially given how rapidly browsers change. How else might one solve this problem, and especially are there existing solutions for it?
Edit: clarifying based on comments—in the future, font-variant: small-caps will handle this nicely, as per the spec it should display a small-capitals-variant of the typeface if the typeface supplies it. However, at present, no browser supports this (at least, none that I can find!). This means that instead, they all render fake small capitals simply by scaling down actual capitals. The result is typographically unpleasant, and unacceptable on this project.
Source: (StackOverflow)