Stress character is cut/cropped from top - css

The test is simple. A font face is applied to all the elements. for some reason, the stress characters are cropped from the top. This happens only for the uppercase characters with font lower than 300px. The problem is not visible for lowercase character.
Here is the screenshot:
The test source files are # https://dl.dropboxusercontent.com/u/33841998/font-test.rar
live example # https://dl.dropboxusercontent.com/u/33841998/test/test.html
Thank you in advance :)

This seems to be a problem with the font, a problem that manifests itself in some rendering environments. Testing with the .ttf font in Word 2007, I see the letter È (E with grave accent) as E with no hint of any diacritic mark above it; the same applies to other letters with diacritic marks. If I select the text, I can see the letters placed very high, with considerable space below baseline and practically no space above the height of capital letters. It is as if the baseline were set very high. Setting a large line height value does not help.
Contact the font vendor, or the third party that was used to produce the font files. While waiting for a fix, consider using some other font instead.

Related

How to evenly size font with CSS

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

Minus inside circle

I have this CSS:
.icon-plus-circled:before { content: '\e80f'; }
Which is displayed as a white plus inside black circle (Unicode I guess).
Need to make one more class, that would be a white minus inside black circle. But I can't find a Unicode code for that. Does anyone know?
Solved the problem. It was custom font.
There is no Unicode character for a white minus inside black circle.
There is U+2296 CIRCLED MINUS “⊖”, though it is not clear whether you want to use that or rather U+229D CIRCLED DASH “⊝”.
The notation '\e80f' means U+E80F, which is a Private Use code point. This means that the Unicode standard does not assign any character to that code point and promises to never do so. The code point is only for use by private agreements and has no meaning outside such agreements. The code you are using probably sets the font to a privately encoded special font, embedded with #font-face. While this generally works (when implemented properly) in the the sense of displaying the specific symbol, it easily causes trouble e.g. when content is copied and pasted (losing the font assignment).
Consider using images instead. Created in sufficiently large size and then scaled to font size with CSS, they do the job reasonably well.
Unicode number: U+002D HTML-code: '&#45';
Here is the complete table: http://unicode-table.com/fr/#002D
Unicode characters you might be interested in:
MINUS SIGN (U+2212): − −
HYPHEN-MINUS (U+002D): - -
CIRCLED MINUS (U+2296): ⊖ ⊖
CIRCLED DASH (U+229D): ⊝ ⊝
content: '\e80f' Which is displayed as a white plus inside black circle
U+E80F  doesn't display as anything for me, that's a Private Use Area character that could render as anything or nothing.
There is no standard Unicode character for a filled circle with a plus or minus removed. Presumably you have some icon font where U+E80F looks like a circled plus. In that case you will have to look up the glyph set for that particular font to see if there is a matching minus.
None of the common icon fonts I know of use U+E80F for circled-plus so possibly you have a custom-made font (from Fontello or similar), in which case no-one can tell what the code point would be for a circled-minus without looking at the font file itself. Possibly the circled-minus might not have been included in it, in which case you'd have to create a new version of the icon font with it in.
Or, as Jukka mentions, switch to images (possibly SVG); icon fonts are a bit of a nasty hack.

Font Suggestions - Need an equally spaced font

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

Is there a character that will take up the full height of a line on a terminal?

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”).

Should I avoid using "text-align: justify;"?

Is there any reason to avoid using text-align: justify;?
Does it reduce readability or cause problems?
Firstly, this is purely a design-related problem and solution. The design of your grid specifies if justifying text is needed. I think justify align alone has no major effect on usability. Bad typography that makes text illegible is what decreases usability. That said, make sure you have solid contrasts and a good balance of spacing in your type. Font-size matters too.
This site is a successful attempt at justifying text online. Since you can't control the spaces between letters and words nearly as much with CSS as you can with InDesign, it's a lot harder to justify text and not have 'rivers' of whitespace run down your rows, which happens when the spaces between words exceeds the spaces between lines. Things that make justifying text difficult: long words, row widths that don't hold enough words, and too much contrast between the text and the background colors; they make the rivers appear wider and more apparent.
The typographic ideal is to have an even text-block, where if you squint the text block becomes a uniform solid shade. So if you keep text at about 10px and 60% gray on white background, and have rows that fit about 20 words, justify align shouldn't look ugly. But keep in mind this does nothing to improve usability. Small, relatively light text annoys a lot of people, especially the older readers.
I should note that with ­ (soft hyphenation) correctly separating long troublesome words like super­awesome you can mimic proper typesetting (e.g. InDesign). There's a lot of stuff out there to help you do this. I would recommend the logic for hiding, manipulating, and displaying the text to be done on the client side, perhaps with this.
Edit: As others mention below, css hyphens are possible now, except not feasible (not in Chrome). Plus, css4 offers even more control.
text-align: justify shouldn't be used in browsers at the moment. They aren't good at handling the minute details within and the output ends up containing lots of rivers and there's no support for hyphenation (other than soft hyphens).
Note above was written 4.5 years ago. Things are slowly changing... http://caniuse.com/#feat=css-hyphens
Edit:
Hyphenator was brought to my attention in this answer's comments. It looks like it makes text-align justify worth using, check out the sites that use it. You may want to use javascript to apply text-align justify before using this script so that those without javascript don't get caught out.
Edit 2:
CSS now allows for hyphenation with the hyphens property [browser support]. PPK is now saying to add it to your stylesheets, whilst Eric Meyer says just add it for mobile.
Edit 3:
A good little overview of things available to us now, with some SASS.
The problems brought up by others about justify alignment are more prevalent with narrow columns. If your columns are wide enough in relation to the size of your fonts and other parameters then it's ok to justify the text. Let's say you'd want a minimum of 12 to 15 words per line in average. More is better.
There's no technical reason not to - it's purely a design decision. Many people find that justified text is harder to read, but I guess it depends on your situation. Though it works fine for print, generally web browsers do not give enough control over the eventual output of text to guarantee that what you're serving won't look like crap on some people's screens.
Your best option is to avoid justification.
I cant think of a compelling reason why not to justify text - at a certain point the volume and width of content almost demand that it be justified. Of course, you'll get issues with content consisting of certain word combinations, but to my mind if you're seeing rivers and unusually large spaces between words you have a different problem altogether - one of readability and clarity.
What I would avoid, at all costs, is centered body text. I don't think there's a greater red flag of ammateurish web design than that.
I prefer left justification (text-align: left) because it's generally more readable. It's also quicker to read evenly-spaced words, so I hear. Unless you have a stylistic reason for using justify, keep it left, right, or center. Especially for body text, use left. (Actually, you'd want something like "forward" for text in the other direction (e.g. Hebrew)...)
Justification should not be used without hyphenation. Here is a PHP based hyphenation library, and a port of this library to a WordPress plugin: wp-Typography.
Like any web design question... it depends. As has been suggested, justified text does not usually end up looking good in narrow columns. I'd recommend against it as a general rule in sidebars as sidebars are usually narrow.
With body copy at the often recommended 10 words per line (or with any amount above that) you will probably be able to get away with justified text and have it look reasonably good most of the time unless you're using a lot of really long words and/or strings.
I think I've pimped this site on StackOverflow before, but Jon Tan uses justified text in his body copy (within articles) and it looks great 99.99% of the time.
Erhh... No...!
[seriously] WordPress uses justify, and I think that's a pretty strong statement in regards to whether or not it decreases readability...
You can also use text-justify:newspaper. The text-justify css tag helps you control how you wrap the text when you justify
Text justification can be done in several ways.
Couple of definitions: Adjusting the spacing between words is "tracking" Adjusting the spacing between characters is "kerning" Good layout programs do some kerning automatically, and it varies by letter pair. The va of variable can be kerned closer than the xa in exact. Good fonts have built in tables of kerning hints to aid in this process.
In early days of monospace fonts it was done by inserting extra spaces between words. This made for very clunky looking output. If you had 4 spaces at the end of the line, and 6 spaces in the line, 4 of them would become double spaces.
Monospace fonts shouldn't be justified.
With variable width fonts, we have em spaces, en spaces, etc, and so the space could be better distributed.
I think this is where most browsers are now. It works reasonably well most of the time. For it to work well the following conditions need to hold:
You need a reasonable number of words on a line.
A large word at the end of the line can make problems.
The average word in English is 5 characters. So on the average you will have 5 characters (the 5 character word plus space wouldn't fit so gets bumped to the next line)
If you have 10 words on the line, then you need to add about half a standard space to each interword gap.
If the last word is a long one, like "headaches" and there isn't room for it, now you have 10 spaces to distribute. This starts to look bad.
This is where a hyphenation dictionary comes into play. Hyphenation can be done by algorithm, but there are enough exceptions that having a dictionary helps a lot. (There is a special character ­ for soft hyphens for words not in your dictionary.)
Hyphenation can split a word so that the the line fills more evenly.
Empirically I decided that a 65 em line length made a good compromise. This gives 11-13 words per line a lot of the time.
Another approach to justification is to split the space up between characters. This avoids some of the problems above, but still looks odd if you are distributing a lot of space in not enough line. You see this in newspapers now and then where a word seems to have a full space between each character. This is a good argument for a longer line.
Good typesetting programs (InDesign, *TeX, Framemaker) do a combination of extra space in interword gaps, and tiny extra spaces between characters.
There is a new kid on the block, text-justify that can be used in CSS to modify the use of text-align: justify. Nominally it accepts the options
auto (default)
interword
inter-character (+ distribute for legacy reasons)
none
CanIuse https://caniuse.com/#search=text-justify
CSS working group https://drafts.csswg.org/css-text-3/#text-justify-property
CanIuse reports compliance only for Firefox right now, Chrome supports it but requires that you enable experimental features. CanIuse claims that support is buggy. Going to the Chromium bug tracking site, claims that it's fixed. Go figure. Haven't tested.
Other pragmatic points:
I made four changes to my site's style sheet:
Maximum line length of 65 rem
body font increase to 110%
leading increase to 125%
Justified text.
The result was that time on site and pages per session doubled.
Anecdotal, but may be worth your own test.
I think it is perfectly OK on print, but it is clunky on most Web browsers, by lack of fine control of spacing and hyphenation. Typographers can even play slightly on letter spacing or font contraction in some cases, as pages/columns (at least in magazines) can be finely tuned.
It should be mentioned that Internet Explorer (at least) up to version 8 does not render text-align: justify correctly. Instead it is interpreted as text-align: center.
Here is more info: text-align: justify
Caused me some headaches to find out why IE kept centering stuff. Maybe it saves somebody else some time.

Resources