Extracting glyph-path information from ttf files - javascript

I'm trying to figure out a way to extract the information encoded in ttf files. namely: The char-to-glyph table and the individual glyph path data.
Does anyone have a good reference explaining the ttf file structure, or some other solution?
Keep in mind that I'm not interested in any libraries that can do it for me either (unless they are open source and I can see how they are doing it). The "master" goal is to implement it in Javascript.
Thanks!

Take a look at OpenType.js at http://opentype.js.org/
opentype.js provides you with raw access to the glyphs so you can modify them as you please.
One can inspect all the tables in an OpenType and TrueType font using Font Inspector, and enumerate all the glyphs using Glyph Inspector

This toolkit has an utility called ttf2svg, it is open source written in java.
http://xmlgraphics.apache.org/batik/
You can try to extract the ttf parsing logic and implement it as you want.
In a past situation I used this utility to generate a svg file and use it in a web page targeting ipad users (#fontface css feature).

OpenType.js is perfect in a javascript environment, browser or Node.js (I contributed to the lib). Fast & easy to use.
Just keep in mind that the implementation is not complete, if you need something that is not yet implemented you can open an issue and we will help you if we can!
For a more complete tool, fontTools will be more powerful in command line (& complete parsing/writing) https://github.com/behdad/fonttools/
If you do ttx myfont.ttf it will generate an xml file (myfont.ttx) with all infos, you can modify the infos and do ttx myfont.ttx and it will generate a font based on it!
By the way I did an awesome list for typography recently with a lot of resources concerning ttf / otf: https://github.com/Jolg42/awesome-typography
There are a lot of librairies in different languages from javascript to C 😉

Related

Rendering MathJax/MathML at compilation/preprocessing time, to create an HTML file without MathML?

I have some webpages, which make heavy use of MathJax (or MathML?) that I would like to convert into ebooks and display on my kindle, which does not support enough javascript, nor MathML. So I would like to preprocess the .html files, possibly by running MathJax during a preprocessing/compilation step, to replace uses of MathML with HTML/CSS. Are there any tools that will do this for me?
You would be better off replacing the MathML by SVG rather than HTML-CSS. MathJax's HTML-CSS output is different for different browsers, operating systems, font sizes, and several other factors, so if you save the HTML generated for one situation, it may not work properly for another. The SVG output is consistent across browsers.
There are some folks who have worked on doing this sort of thing already. The svgtex project is one. Wikipedia developed Mathoid to do something similar.

Machine readable HTML and CSS spec?

is there a XML or JSON resource I can parse in Javascript that tells me what HTML elements there are, what their attributes are and what CSS styles I can apply? I want to have a list of valid options without typing in everything by hand.
Please bear with me here, I'm new to this web stuff but have plenty experience in C (mostly game engines).
TIA!
(X)HTML before version 5 have DTDs that you can parse (you can get the URLs for them from the Doctype for the version of (X)HTML you are working with.
HTML 5 doesn't have an official machine readable spec. You might be able to extract something useful from the validator.nu source code though.
The CSS properties that can be applied to an element depend only on what other CSS properties have bee applied to it. Their only connection to HTML is that the browser's default stylesheet applies some properties automatically.
Sorry that this answer is almost six years too late for you. I was looking for the same thing and ended up writing my own tool for extracting some of the specs from the standard and exporting it as JSON
https://github.com/tawesoft/html5spec (self promotion disclaimer: I made this)
Hope that helps someone

Jquery script for document preview?

Do you know any components from jQuery with which you can preview .doc,.pdf,.jpg .... files in browser ?
Thanks
If you really want to keep it all native inside the browser you can display images on their own and pdfs with pdf.js.
If you only need to display it somehow I advise you to look at Google docs viewer (officially discontinued, see below) which allows you lots of different files and which you can next embed in one of the scripts altschuler mentioned. (See my comment to his answer why those tools alone don't do the trick)
Supported file types by google docs viewer
Microsoft Word (.DOC and .DOCX)
Microsoft Excel (.XLS and .XLSX)
Microsoft PowerPoint (.PPT and .PPTX)
Adobe Portable Document Format (.PDF)
Apple Pages (.PAGES)
Adobe Illustrator (.AI)
Adobe Photoshop (.PSD)
Tagged Image File Format (.TIFF)
Autodesk AutoCad (.DXF)
Scalable Vector Graphics (.SVG)
PostScript (.EPS, .PS)
TrueType (.TTF)
XML Paper Specification (.XPS)
Archive file types (.ZIP and .RAR)
Although I wouldn't recommend this usage on production or professional systems, you can still use the system as described here.
I think you're looking for a lightbox feature. Lightbox is the common name for (pre)viewing things in an overlay, so to say.
There are a great deal to choose from, here's a few:
http://gettopup.com (try the #2 example, this looks a lot like quicklook).
http://leandrovieira.com/projects/jquery/lightbox
http://jacklmoore.com/colorbox
How you want to show .doc and .pdf files is another issue.

How to get the associated icon of a file in HTA (HTML/Javascript/VBScript)

I'm building an HTA application in which I need to display a list of file with their associated system icon.
I'm using FileSystemObject to list the file but there seem to have no way to get the icon...
I've found a script in VBS that can save the icon of a file into a .ico .
It read the file (PE resource file, .exe or dll) and parse the icon data.
I modified that script to return the icon's bytes, convert it to base64 and use embed base64 images in HTML.
Here's the original script: http://gilpin.us/IconSiphon/
Issue
) In most case the .ico contains multiple icons (many sizes and color depth) but there's no way I can specify which one to use (as I need 16x16 icons).
) Not all icons are displayed
) Could be slow with many file as it read exe and dll (but I'm ok with that, I can cache already fetched icon)
I've also tried some ActiveX control but none seem to work properly. Even those provided by microsoft (ShellFolderView or ListView) are very buggy.
Requirements
Must display 16x16 icon
Must allow multiple file selection
Everything must be embed in hta (if possible). No external .exe
Does anyone know a way to achieve that?
Thanks!
Use SHGetFileInfo() with the SHGFI_ICON flag.
http://msdn.microsoft.com/en-us/library/windows/desktop/bb762179(v=vs.85).aspx
The filesystemobject will provide you the necessary functions for enumerating files on the local filesystem. However to get the icon image you will need to use the win32 api per #seanchase's response or an external exe.
However you can access the win32api via javascript in the hta using the wshApiToolkit activex object - http://www.google.com/search?q=wshAPIToolkit.ucATO%2F&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1
Find a copy of that and you're close to being done. It does require distributing the activex object with your code and shell executing the registration process from within the HTA so that might violate your third constraint. Though I believe you can base64 encode the exe into the hta in a dataurl and write that back out to the file system so it would at least be bundled into a single file. If you support that option then maybe embedding an exe that does the same would meet your requriements.
Definitely some hacky stuff that may be unstable on future OS versions - heck I'm not even sure the wshApiToolkit works on windows 7, and 8 is just around the corner. Good luck!
You indicated you're opened to installing ActiveX components and using them in your HTA.
If I had the time, I would approach this for myself by creating ActiveX components using Visual Studio to call FindResource, LoadResource and LockResource. These will enable access to the Group Icon resource for which I would then provide rich interfaces to iterate through the Icons offering the ability to extract BMPs (or PNGs).
This is "how" I would go about achieving this short of actually going off doing it.
Once I build a similar HTA interface and I faced the same problem. I solved the problem by creating a custom icon gallery and converting the images using base64. You may achieve the same by either converting or using sprite. Many UI does it, even java.swing has its own collection embbebed. As you noticed, reading from *.dll can speed down the application

How to generate graphics into photoshop using actionscript?

I've a text file with content like this:
id, pixelsize, color, text
block1, 200x60, black, Header
block2, 200x180, white, Body
block2, 200x60, black, Footer
Now using actionscript,
I want to generate a psd file which would generate a 3 vertical block graphics (like this) after parsing the given file. All the blocks are placed vertically on top of each other.
Convert this psd file into PDF automatically using the script.
Automate this whole process without opening photoshop. Is it possible?
Please help. Thanks.
You aren't going to be able to create a PSD w/o opening Photoshop. Even when you use something like Adobe Bridge to batch process files from any Adobe app it still uses the appropriate app to open a supported file and perform actions on it.
I have seen apps that allow you to output PDFs from user defined text and variable images (PageFlex comes to mind)...but even then, saving Adobe-compatible files aren't simple tasks to turn off and on (like when you make a text file). There's a lot of data to manage even with PDFs and I'd suspect even more when you look at a PSD file.
Unless you can find an open-source app that somehow allows you mess with its coding so that you can bypass opening it 100% to output a somewhat compatible PSD/PDF file, I don't think you're going to be able to automate much w/o lots of work and some potentially expensive software solutions.
Long answer short, I think you'll have to use Photoshop at some point in your solution. On the upside, you could make a recording of actions in PS so that individual files can be output to whatever format you like...and those I'm sure can be scripted into complicated solutions.
You can do this kind of thing using the ExtendScript Toolkit from Adobe.
Not sure you can do it without having Photoshop open, however.
Given that you want a PDF at the end, could you use something like AlivePDF (ActionScript 3 Open-Source PDF Library)?
If you actually need to also generate a PSD, I'm not sure how you do that from scratch, but the Photoshop SDK would be a good place to start, as well as getting a good understanding of bytearrays.

Categories

Resources