I have a flash application and i am trying to create a hand write effect, it will have to draw the outline of the text , so i need the outline of the text , I could have got it if it is predefined fonts , but my users can upload fonts too , so is there any way i can extract outlines of a text in run time? any help is appreciated
I know about readGraphicsData, but it wont help!
We had this question before (can't find it). It boils down to this:
There's afaik no trivial way to access the vector outline of text. Yes, you can read the font file (like any other file) and just parse it. Any font description file obviously includes the font outline in some way. You'd have to read the specification of that font file and extract the desired information accordingly.
For example, according to the OpenType specification's Font File Tables, the Tables Related to TrueType Outlines contain a glyph tag wherein you can find numberOfContours, xCoordinates[ ], yCoordinates[ ], etc.
I haven't come across a library that reads font description files and extracts that data conveniently, so you'd have to parse it yourself, which is - just to be clear here - an insane amount of work. You could try to find a library in some other language like C and see if you can somehow use it in As3. That might be less work, but it's complicated.
However, there's a flaw in your premise anyway:
I have a flash application and i am trying to create a hand write effect, it will have to draw the outline of the text
There's pretty much no way to accomplish this. In order to do this, knowing the outline is not enough. To write each glyph, a number of strokes are made. There's no general way to know how a glyph would be written by hand only from its outline.
If you know the outline of an
A
nothing tells you that the steps to handwrite it are
/
\
––
Fonts might have additional lines. If I wanted to use a service that produces handwriting from a font that I supply, I'd be inclined to use a calligraphic font with plenty of additional loops, curves, etc. There's no trivial way to automate this.
Related
I'm looking for a font which displays a or a * for every character, in the same way. A totally unreadable font.
Despite my efforts I couldn't find one on the internet. Is there a system font like this ? Or do you know one ?
As I doubt that such a font exists, an alternative could be to do your own select. Using the data-* attribute provided by HTML5, you can attach any additional information to any element. So, you can develop a select that would display the character you want (e.g. *) but set data-something to the correct value. Then, when the user press on a button or so, you can call a function to iterate through your personal selects and read the data-something from them to compute the data the user entered.
Here is a minimal example of such a code : https://jsfiddle.net/w0za8ut6/2/
Make one. Just fire up FontForge, the authoritative open source font editor of choice, and make a font with your desired glyph pasted into every letter box that you need supported, or you can craft a cmap 13 font with a single glyph but defined as used for the entire code range, like Adobe's "Blank" font.
Generate your font, pick "web open font" format to make it a WOFF2 instead of a system font like ttf/otf, and done. You can now load it with an #font-face rule.
That said, what you want to do sounds like a weird hack that doesn't actually make passwords any more or less secure, but that's your decision.
The font part at least is almost trivially easy.
I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.
I was curious how Imgur was rendering their upvote/downvote arrows:
I assumed they were images, but I found something that I did not expect:
A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:
Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.
I can imagine the reasons for:
Your site uses a standard icon set that can be mapped to single-character codes.
You only need control over foreground/background color for the icons.
You want icons that scale the same as text.
I want to know any specific reasons against using this method.
In particular, I'm looking for answers that address any of the following:
browser/platform compatibility
future maintenance implications
semantics
performance
standards compliance
The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.
I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?
However, I'm certain Imgur has thought all of this through already. So, why am I wrong?
Modern browsers (e.g. IE9 above) support custom fonts.
Even Bootstrap also uses custom fonts for icons, known as Glyphicons! It is a nice way to beautify the websites icons without having to do it from Photoshop as an image which may cause responsive issues.
They are usually used by calling the class name which links to the CSS that call the icons from the font family. Html lang would not have any issues with it.
Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.
Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.
To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.
As Mike 'Pomax' Kamermans put it:
"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"
One big reason is accessibility. There are many browser extensions which swap out a website's font for one that's more legible for people with different visual impairments. If you use fonts for your icons, these will be swapped out too, leaving your user looking at whatever string you placed in for your icons.
I publish technical books, in print, PDF, and Kindle/MOBI, with EPUB on the way.
The Kindle does not support monospace fonts, which are kinda useful for source code listings. The only way to do monospace fonts is to convert the text (Java source, HTML, XML, etc.) into JPEG images. More specifically, due to pagination issues, a given input ASCII file needs to be split into slices of ~6 lines each, with each slice turned into a JPEG, so listings can span a screen. This is a royal pain.
My current mechanism to do that involves:
Running expand to set a consistent 2-space tab size, which pipes to...
a2ps, which pipes to...
A small Perl snippet to add a "%%LanguageLevel: 3\n" line, which pipes to...
ImageMagick's convert, to take the (E)PS and make a JPEG out it, with an appropriate background, cropped to 575x148+5+28, etc.
That used to work 100% of the time. It now works 95% of the time. The rest of the time, I get convert: geometry does not contain image errors, which I cannot seem to get rid of, in part because I don't understand what the problem is.
Before this process, I used to use a pretty-print engine (source-highlight) to get HTML out of the source code...but then the only thing I could find to convert the HTML into JPEGs was to automate screen-grabs from an embedded Gecko engine. Reliability stank, which is why I switched to my current mechanism.
So, if you were you, and you needed to turn source listings into JPEG images, in an automated fashion, how would you do it? Bonus points if it offers some sort of pretty-print process (e.g., bolded keywords)!
Or, if you know what typically causes convert: geometry does not contain image, that might help. My current process is ugly, but if I could get it back to 100% reliability, that'd be just fine for now.
Thanks in advance!
You might consider html2ps and then imagemagick's convert.
A thought: if your target (Kindle?) supports PNG, use that in preference to JPEG for this text rendering.
html2ps is an excellent program -- I used it to produce a 1300-page book once, but it's overkill if you just want plain text -> postscript. Consider enscript instead.
Because the question of converting HTML to JPG has been answered, I will offer a suggestion on the pretty printer. I've found Pygments to be pretty awesome. It supports different themes and has lexers for pretty much any language out there (they advertise the fact that it even highlights brainfuck). There's a command line tool and it's available on most Linux distros.
Your Linux distribution may include pango-view and an assortment of fonts.
This works on my FC6 system:
pango-view --font=DejaVuLGCSansMono --dpi=200 --output=/tmp/text.jpg -q /tmp/text
You'll need to identify a monospaced font that is installed on your system. Look around /usr/share/fonts/.
Pango supports Unicode.
Leave off the -q while you're experimenting, it'll display to a window instead of to a file.
Don't use jpeg. It's optimized for photographs and does a terrible job with text and line art. Use gif or png instead. My understanding is that gif is now patent-free, so I would just use that.
[We have a Windows Forms database front-end application that, among other things, can be used as a CMS; clients create the structure, fill it, and then use a ASP.NET WebForms-based site to present the results to publicly on the Web. For added flexibility, they are sometimes forced to input actual HTML markup right into a text field, which then ends up as a varchar in the database. This works, but it's far from user-friendly.]
As such… some clients want a WYSIWYG editor for HTML. I'd like to convince them that they'd benefit from using simpler language (namely, Markdown). Ideally, what I'd like to have is a WYSIWYG editor for that. They don't need tables, or anything sophisticated like that.
A cursory search reveals a .NET Markdown to HTML converter, and then we have a Windows Forms-based text editor that outputs HTML, but apparently nothing that brings the two together. As a result, we'd still have our varchars with markup in there, but at least it would be both quite human-readable and still easily parseable.
Would this — a WYSIWYG editor that outputs Markdown, which is then later on parsed into HTML in ASP.NET — be feasible? Any alternative suggestions?
I think the best approach for this is to combine
Converting Markdown to HTML &
Displaying HTML in WinForms
The most up to date Markdown Library seems to be markdig which you can install via nuget
A simple implementation might be to:
Add a SplitContainer to a Form control, set Dock = Fill
Add a TextBox, set Dock = Fill and set to Multiline = True
Add a WebBrowser, set Dock = Fill
Then handle the TextChanged event, parse the text into html and set to DocumentText like this:
private void textBox1_TextChanged(object sender, EventArgs e)
{
var md = textBox1.Text;
var html = Markdig.Markdown.ToHtml(md);
webBrowser1.DocumentText = html;
}
Here's a recorded demo:
#Soeren,
You can most definitely embed IE with the Javascript Markdown editor inside a Windows Forms application.
the RichTextBox control
So you want to use Markdown but you want the user not to know it? This might not be an achievable goal. I think the point of Markdown is that it is geared toward writers that are willing to learn a little bit of fairly natural syntax and edit everything in plain text (like Wikipedia? are there pure WYSIWYG editors for that? probably... and probably some other Wikipedia editor person has to come and clean up the resulting markup and formatting...). If you want it to be transparent to the user (like MS Word) Markdown may not be what you want or give you the advantages it advertises in that situation.
The input happens in Windows Forms
Oops! Now I understand better your question. I guess it depends on how your Windows Forms app looks whether the embedded IE control sticks out like a sore thumb. If you try it you might find that you can get it to work.[1]
In your position, I would try something like this [2]:
http://wmd-editor.com/examples/splitscreen
If you don't think that sort of arrangement will go over well with your users, (especially all the editing in the text-only window) then once again I don't think Markdown is the answer for your specific application. If you think your users are keen on the idea of editing pure text, then I bet we can find a solution. Please clarify?
Jared.
[1] I had success dropping an IE HTML control into a project strictly to display some generated results as a PDF (using an IE Reader plugin like Adobe Reader or Foxit). The user has no idea that that part of the GUI is an IE control, it just shows the PDF, allows printing and saving, etc.
[2] ...but remove the borders and make the two split controls touch all four edges of the embedded IE control, or get very close... keep it light grey or white, for example, and eliminate any borders of the IE control so it blends into the surrounding controls. Maybe put this on its own tab page and I challenge a non-technical user to tell/care if it's an HTML control or native.
I could totally be wrong about all this (one would have to see this in action to determine if it would work) but it might be easier than writing your own interactive Markdown editor...
...actually to implement your own C# Markdown editor, you could just put a text edit box next to an embedded IE control and run the current Markdown through the .NET Markdown->HTML converter on a separate thread, and replace the HTML in the IE control (assuming the Markdown->HTML converter is very liberal and robust against throwing ANY exceptions).
Can't you just use the same control I'm Stack Overflow uses (that we're all typing into)---WMD, and just store the Markdown in the VARCHAR. Then use the .NET Markdown to HTML converter, as you mentioned, to display the HTML as needed. Jeff talks about this in more detail in a StackOverflow podcast (don't know the episode number).
"WYSIWYG Markdown" is really an oxymoron since the whole point of Markdown is to allow you to write markup syntax naturally and intuitively which is then post-processed into html, unless you mean actually taking for example **text** and rendering it as **text** for example. That would actually be kind of cool, but it would get very difficult for things like numbered and bulleted lists, since you would have to do all the positioning, yet keep everything based on actual textual characters (e.g. '*' instead of the bullet symbol) and support proper textual input positioning, backspace, etc.
For example,
in this bullet list,
the bullets would actually have to be asterisks,
and the spacing would not really be there.
That would certainly be worth paying attention to, if someone did tackle it.