I'm building a CSS/Javascript Graphing engine and one of the components on it is a circular text wheel. I need a font for it that is equally spaced between letters and spaces so that all the labels take up the same amount of space regardless of the letters. Now if I have some letters like 'L' in one of the labels the extra spacing between it in the font I'm using now causes the whole wheel to get offset.
A simple fix for this is to have a font that has equal or almost equal spacing between all letters, spaces and characters.
Any suggestions for me to try out?
As you can see some the wheel is off center because it is smaller than it is most of the time and therefore the diameter is off.
What you are looking for is called a 'monospace' font. Try Courier or Courier New.
Try using a monospaced font where all of the letters take an equal amount of space. Here is a collection of web usable monospace fonts to try out:
http://www.fontsquirrel.com/fonts/list/classification/monospaced?filter%5Bweb%5D=Y&filter%5Bdownload%5D=all
Related
I would like to make each font take equal amount of space, similar to fonts displayed in a Linux terminal
For example:
Notice that each character take same amount of space
Use a font designed so that every character in it is of the same width.
These are called monospaced fonts.
The CSS generic font family monospace will select the system's default font of that style.
Various values of the white-space property such as pre will cause multiple spaces to be treated as significant, although the <pre> element should be used if the semantics of the text mean that the spacing is significant rather than just presentational.
It's not super clear to me what you're asking for, but I'll try to help.
-Terminal fonts generally used monospacing, here is a list of monospaced fonts: https://www.typewolf.com/top-10-monospaced-fonts
-If you're looking to evenly increase the amount of spacing between letters I suggest checking out letter spacing for css: https://www.w3schools.com/cssref/pr_text_letter-spacing.asp
I'm making a command line version of the board game Blokus and I'd like to have the pieces take up the full height of a line. I tried to use the Unicode character █ (U+2588) but it leaves vertical gaps in the lines like so:
Does anyone know how I can have it take up the full line?
Those characters are, by definition, supposed to fill the entire character cell. If they aren't, there may be an issue with the font you're using. (For instance, your default font may not have that character, so the terminal is having to use a substitute font with different metrics.)
You may be able to work around this by "faking" a block character by entering inverse video mode ("\x1b[7m") and outputting a space character, then switching back ("\x1b[0m") when you're done.
The U+2588 should take full height of a line in a terminal, but due to font issues, it does not always do that.
The Block Elements characters are described in clause 15.8 Geometrical symbols in the Unicode character: “the legacy block elements are designed to fill some defined fraction of each display cell or to fill each display cell with some defined degree of shading. […] When emulating terminal applications, fonts that implement the block element characters should be designed so that adjacent
glyphs for characters such as U+2588 full block create solid patterns with no gaps between them.”
However, fonts that support U+2588 do not always implement it correctly. So you should check whether you can set the font to one that has a correct glyph for U+2588, such as DejaVu Sans.
If you are using U+2588 and friends in an environment that is more complicated than a simple terminal, such as software emulating a simple terminal, or in a word processor, you probably have another issue, too. Even though U+2588, when implemented correctly in a font, takes the full height of the font, it does not usually take the full height of the line. Normally line height is larger than font height (font size), and you would need to take extra measures to make them the same (to make the text “set solid”).
So I know that my question is pretty technical, but basically I would like to know specifically how the following CSS affects the display of text in <p> tags.
p {
letter-spacing:2px;
font-family:"Georgia";
}
I know that Georgia is a proportional font, that the designer has spent time crafting the spaces between letters to make the font more readable and visually pleasing.
But my question is how does the letter-spacing property affect this proportionality? Does this code add two pixels onto the spacing already defined by the type designer, or does it reset that spacing to two pixels?
This property is additive to what the font would normally use. So, 1px will increase it by a pixel. Sitepoint calls it "extra" space (with negative values allowed).
The W3C docs say the same thing:
"This value indicates inter-character space in addition to the default space between characters. Values may be negative..."
It is in addition to any default spacing.
See: https://developer.mozilla.org/en-US/docs/CSS/letter-spacing
From my experiment on Firefox on OSX, using a kerned font (Arial) as opposed to Georgia which does not appear to have kerning on my machine, I can testify that the spacing is in addition to existing spacing, and kerning, and can be either additive, or subtractive.
It is also worth mentioning that different browsers and operating systems replace fonts, and handle them slightly differently to each other, making it impossible to predict 100% how any font will be rendered.
Sometimes while typing in a textarea in Flex many characters will be rendered at one height then at some point on that same text line the rest of the characters are rendered a couple pixels lower than the rest. Here is an example, look at the last 'I' character, its low:alt text http://img.skitch.com/20091031-ej5n28akygnm3gmxcjx731ic85.jpg
Sometimes changing the font size will fix this but its not consistent and its not something I can detect (and fix even if I could). Anybody got an idea why this happens? It happens for embedded and non-embedded fonts.
Thanks,
Sam
Flash acts strange sometimes when movie clips, textboxes etc are not on whole pixels. Make sure the textbox has integers for it's coordinates. If it is in any movie clips, make sure those movie clips have integers for coordinates too.
The other option would be to fudge around with the anti-aliasing features in Flash, but that's always a hit-or-miss situation.
I have an < mx:Label > tag that has a set width, which is usually large enough to display the text it needs to show. Every once in a while though the text is a little too long and gets chopped off and "..." gets appended. Instead of this happening I would like to decrease the font-size just low enough to show the whole text.
Does anyone know of a nice way to do that?
Thanks
Fonts are a complicated beast. For a given text, you can find the string length and calculate the maximum allowable font-size very simply using the following approximate formula:
var max_allowable_size:int = yourLabel.width / yourLabel.text.length;
This could lead to serious issues for some fonts, namely:
Remember not all fonts are equal i.e. they cannot all be resized gracefully.
Anti-aliasing may break
Fonts may not look good/text may become illegible
The above naive formula will probably break when applied to non-roman characters
Also, this is an inefficient way.
I would rather suggest that you define two different styles, one regular and another fallback one with font-size set to the smallest, which you switch to when you encounter longer label texts. You can calculate the threshold limit to switch by using the default font-size on the above mentioned formula. Of course, some experimentation is in order, if you have to support localization/multiple languages.
Finally, always embed the fonts if you are going to use anything other than the most common fonts.
There is a measureText function. Check out:
http://frankieloscavio.blogspot.com/2008/01/flex-use-measuretexttxt-to-calculate.html
http://livedocs.adobe.com/flex/3/langref/mx/core/UITextFormat.html#measureText()
You can probably use measureText and decrease the font size till it fits.