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.
Related
I'm using Electron to try to make a native app. The interface has an image of a scanned document as a div background image, with the OCRed text as content. I'm able to match almost all the styles of the scanned document (to a degree that satisfies me, anyway), but line-height is problematic.
The correct size of the font seems to be 10.5pt. When the line-height is set 100%, the content text is a little too high and the text drifts beyond the scan. Set at 99%, it's too small... and 99.5% doesn't seem to make any difference in rendering. This isn't a problem with using percentage values either, as I find the same thing occurs whether I use pixel values, em, or whatever. There are values that cause different rendering, and any fractional values between those are ignored.
If I use the magnification/zoom on this (control-+), fractional values start working, but fail once I've unzoomed.
Are these values being ignored by Chrome, or is it something else which causes this behavior (my montior's dpi, some aspect of font rendering in general I'm dumb and don't understand, etc)?
Is there a work-around for this? I don't need pixel perfect matching on this, but the difference amounts to about 3 lines worth of text, which isn't close enough for my purposes.
I want to specify two different fonts in a font-family (font-family:A, B;) but the sizes of these two fonts are different.
It seems font-size-adjust onlys work in Firefox. So how can I adjust second font size if the first one is not available?
You cannot. The conclusion is that you should list only fonts that are sufficiently similar in their properties.
Well, there are some tricks used to detect the availability of a font on the basis of its properties. You could use font A (only) for an invisible inline test element containing some text and then compare, using JavaScript, the width of the test element with its measured width (allowing some small difference, since different implementations of font A may yield slightly different widths). If the widths don’t match, you would change the font size setting for the element(s) that have font-family: A, B, so that the size is suitable for B. Well, you would still have the problem that font B might not be available either. So it would be messy, with no real guarantee of success.
You are right, font-size-adjust isn't standard, and is hence won't work.
I think that the best way to solve your problem isn't to try and work around two completely different font sizes, but to select two fonts that are sufficiently similar as so the sizing is consistent.
Preferably, I would use Web Fonts (Also, http://www.google.com/fonts is a good place to start), so ensure that everyone gets the same experience, and you can load consistent, beautiful fonts across browsers and platforms. If the performance hit is a problem, then consider using reliable font stacks.
I understand that this isn't a strict answer to your question, but it may be a better way to go. :)
I've tried using em as well as px, but I cannot get a certain line of text to display at the same size in every browser. I know I'm reaching for a lot but I'm tasked with achieving a pixel-perfect development based on a mock-up, and need a certain text to span the width of an area left-to-right so that it all flushes from side to side with an image.
My last option is to use an image, which I don't want to do. I know that you can specify certain CSS parameters that work on the different browsers such as -moz-SOMECSSPROPERTY:some value; but can you do this with the font size so that one browser has it at one size, and another as another. Oddly enough too though this is actually only happening in the browsers that are on different OS's, i.e. - on my Mac it's as intended, and on Windows (same browsers) different.
Thanks for advice.
It won't be enough to specify the font on a per-browser basis, because (as you noticed) you'll also run into inconsistencies across platforms and devices.
If you want the text to always fit the image flush, the text pretty much has to be an image, too.
I have seen a few design where the developers have defined very long values in percentage. I am wondering what's the reason to write so long values, why not just round about? and how do you even calculate/convert such values?
For example (taken from a css file):
.thumbnail { width: 68.08510638297872%; }
table { font-size: 0.9166666666666667em; }
Most likely they are using some kind of CSS templating engine like Sass to generate stylesheets from code, and setting widths based percentage calculations.
In the book Responsive Web Design Ethan Marcotte actually advocates leaving all the numbers after the decimal place when calculating percentage-based widths, to give the greatest accuracy, even when the developer is calculating the widths themselves using a calculator.
EDIT: I just dug out my copy of the book, and here is Marcotte's reasoning:
Now, you might be tempted to round 0.45833333333333em to the nearest
sane-looking number—say, to 0.46em. But don’t touch that delete key!
It might make your eyes bleed to look at it, but 0.458333333333333
perfectly represents our desired font size in proportional terms.
What’s more, browsers are perfectly adept at rounding off those excess
decimal places as they internally convert the values to pixels. So
giving them more information, not less, will net you a better result
in the end.
That looks to me like those figures are generated programatically, not by humans directly. No Scotsman would do such a thing. Well, no true Scotsman :-)
Probably they come from a WYSIWYG layout editor that couldn't care less about readability, never expecting anyone to go and hand-edit the output.
The most clients want a pixel perfect website inside the browser with scalabel font-size and web-content.
The developer has used the long percent, to get it perfect matched to the layouts.
Percent and em is an scalable unit not an pixel related unit and on some resolutions or font-size scales, the element do not match with the layouts and you can make it precise with more decimal places.
Newer Browser like Chrome or Firefox scale the font and the elements at once and this problem will not happen, but older browsers like ie 6-7 hasn't this feature and must learn it with em or percent units.
I hope it will help you to understand this problem
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
There's a really good article on web typography on A List Apart.
Their conclusion:
Sizing text and line-height in ems,
with a percentage specified on the
body (and an optional caveat for
Safari 2), was shown to provide
accurate, resizable text across all
browsers in common use today. This is
a technique you can put in your kit
bag and use as a best practice for
sizing text in CSS that satisfies both
designers and readers.
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
From http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle
percent for font-size but interprets
150% as 150px. (Some NN4 versions,
for instance.) IE also has problems
with percent on nested elements. It
seems IE uses percent relative to
viewport instead of relative to
parent element. Yet another problem
(though correct according to the W3C
specs), in Moz/Ns6, you can't use
percent relative to elements with no
specified height/width.
em: Sometimes browsers use the wrong
reference size, but of the relative
units it's the one with least
problems. You might find it
interpreted as px sometimes though.
pt: Differs greatly between
resolutions, and should not be used
for display. It's quite safe for
print use though.
px: The only reliable absolute unit on
screen. It might be wrongly
interpreted in print though, as one
point usually consist of several
pixels, and thus everything becomes
ridiculously small.
The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.
So, the answer is that it probably doesn't matter. Use whatever works for you.
% is nice because it allows for relative resizing.
px is nice because it's fairly easy to manage expectations when using it.
em can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.
I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.
Regarding the difference between the css units % and em.
As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your em value with 100 and then replace em with % it should be the same thing ?
If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?
(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by "Liam, answered Sep 25 '08 at 11:21" since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)
Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.
With YUI one is supposed to use percentages.