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
Related
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
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.
I remember reading a style guide explaining what the proper line-height should be for each element. I can't find it on google.
I would appreciate it if anyone could link me to such a guide, or perhaps explain it in an answer.
Thanks!
Edit: SORRY, please let me clarify. I'm not asking about how to use CSS to set line-heights, but what the recommended line-heights are for various elements. eg headers, paragraph text, etc.
Thanks!
Maybe these references are more like what you're looking for. I haven't found a definitive rule, but at least here are some things to consider.
This one suggests that it depends on your choice of font-family:
http://www.webteacher.ws/2009/09/30/improve-readability-with-line-height/
This one suggests that it depends on the width of the lines:
http://kingdesk.com/articles/optimal-line-height/
This reference essentially agrees with both of those:
http://www.wpdesigner.com/2007/06/21/web-typography-line-spacing/
The main rules seem to be (1) wider lines of text require greater line-heights, and (2) greater line-height is required based on font if the height of lower-case letters is a high percentage of the height of upper-case letters.
The best approach is probably just to eyeball it, and try to avoid impenetrable walls of text.
The info here is pretty basic, but useful.
To summarize:
The default line-height:normal gives line-height:1.2, 120% of the font size. If you're going to change it, it's still usually best to use a number with no units, e.g., lineheight:1.5 (150% the font size), because then the line-height for an element will be computed from that element's font size, even if the line height was inherited from an element with different font size.
If you instead say line-height:10em, it's computed from the font on the element where the line-height was specified . . . that may be wrong if this line-height is inherited by an element with a different font size.
Likewise a specific number of pixels such as line-height:10px could certainly be wrong if it's inherited by elements with different font size.
It's usually 120% (of the font size).
W3 schools recommends (here) a line height of 1.6, though I've seen that between 1.2 and 1.45 is good as well
Normal line-height value is normal. You can edit that with numbers like 1.6 2 etc
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.