I've implemented something like this:
http://jsfiddle.net/DKs49/
<p>Here are some numbers: <span id="1">123234</span>. Cool huh?<p>
Then change the number dynamically:
setInterval(function () {document.getElementById('1').innerHTML = Math.random();},100);
However, I am not using a fixed-width font (as jsfiddle does)
When digits are added, I need the surrounding text to move (like its doing...) however, on my site, when the number of digits are the same, the surrounding text still wiggles based on the digit width (since not using a fixed-width font, 1 is narrower than 2).
Anybody know how to fix this? (Or can recommend a cross-platform fixed-width font that doesn't look like a typewriter...)
EDIT: Per the comment by #guffa turns out many fonts have fixed width digits. Rather than hassle with this, simplest route = choose a better font.
If you're okay with a fixed-width <span>:
p span {
display: inline-block;
width: 150px;
text-align: right;
}
http://jsfiddle.net/DKs49/4/
The text is not jumping around because of the digits having different width, it's jumping around because there are different numbers of digits.
If you for example get a random number like 0.7362924825642400 it will instead be displayed as 0.73629248256424, i.e. two digits shorter than the others. A number with a zero right after the decimal separator will be displayed using the same number of significant digits, so it will be longer than the others.
In most fonts the digits are still the same width, eventhough rest of the characters aren't. They are made that way so that the digits will line up when numbers are displayed in columns, without having to align every digit separately.
If you make the number of digits the same all the time, you will most likely see like me that the rest of the text is completely still: http://jsfiddle.net/Guffa/DKs49/8/
document.getElementById('1').innerHTML = String(Math.random()).substr(0,15);
As per the W3 specification:
'monospace' fixed-width fonts are
Andale Mono
Courier New
Courier
Lucidatypewriter
Fixed
monospace
Related
I am implementing a comment system in my website and I need to hide the text after exceeding 5 lines in a view width of 300px and show "Read more", I've tried doing so with string length but every character has a different width, for example 500 characters of "#" (at sign) in a view width of 300px will have more lines than 500 characters of "." (dot) in a view width of 300px and also the user might use a lot of carriage return, after a lot of headache I thought is was impossible, then I've went to YouTube to see if they solved this problem, and obviously they did!
So my question is how it possible? just guide me in the right direction and I'll do my research.
NOTE 1: 300px view width is just an example and can change.
NOTE 2: I am using PHP if that matters.
NOTE 3: I think JavaScript solutions can be fooled by users, but I am not sure.
NOTE 4: The only solution I can think of is using a reference for each character width based on the font in use, and use that to figure out how many lines they are in a specific view width, But isn't that too much work since there is a huge number of supported characters?
Thank you.
You can't reliably calculate how many lines there will be. It depends on too many factors, like the font, the browser and even the operating system.
Just use css to hide everything after x lines. I put together a quick example:
This class hides everything but the first 5 lines.
.truncated {
font-size: 1em;
line-height: 1.2em;
max-height: 6em;
overflow: hidden;
}
Then just add a button that removes that class using javascript.
https://jsfiddle.net/rmwu4sL1/
There are already many questions about hyphenating words, but I couldn't find a question about hyphenate only when one word that is by it's own too long for one whole sentence.
example:
I like this to be intact (not trying to put the word "verlichtingssysteem" in the upper line with hyphenates)
So I don't want this:
But I want to have a word that doesn't fit the whole line/div/page is hyphenated. Otherwise I can't see the text in full as you can see below. (it cuts off the last 3 characters)
All the solutions I have seen before on other questions does hyphenate on both last 2 examples instead of only the last example.
So it needs only to hyphenate when a word by it's own width doesn't fit the whole div/page, so when you have two words it just needs to place the word on the next line instead of hyphenating.
I only have this word fall off screen problem on mobile. But an (soft) hyphenate messes up on other devices that have a bigger width as you can see on picture 2. So I only need it for one word that by it's own to big on one line.
I don't think I am the only one who has this desire?
you can use
It only breaks a word when it would overlap the content width.
use it like thistextisgettinglong = thistextisgettinglong
see this fiddle: http://jsfiddle.net/2r70mhnw/1/
you probably have to set the width of the container to 100%, that's all!
http://en.wikipedia.org/wiki/Soft_hyphen
In computing and typesetting, a soft hyphen (ISO 8859: 0xAD, Unicode U+00AD soft hyphen, HTML: ) or syllable hyphen (EBCDIC: 0xCA), abbreviated SHY, is a code point reserved in some coded character sets for the purpose of breaking words across lines by inserting visible hyphens.
In some cases using
/* using those two for compatibility reasons with old browsers */
overflow-wrap: break-word;
word-wrap: break-word;
could be a valid solution. Beside its probably not a good solution for text content, I found it really useful to use e.g. in navigations or titles.
It breaks only single words if this particular word does not fit into the line. While it does not add "-" and does no real hyphenation, though.
This question already has answers here:
Truncating long strings with CSS: feasible yet?
(6 answers)
Closed 9 years ago.
I have some dynamic text (comes from a database) and I need to fit into a div
My div has a fixed size. However, when the text becomes too long, it breaks into two lines. I would like to put three dots at the end of longer texts to make them fit inside a single line.
For example: My really long text becomes My really lo...
I have committed several attempts, but basically all of them depend on counting characters. That is, whatsoever, not really fortunate, for characters do not have a fixed width. For example, a capital W is much wider than an small i
Therefore, I encounter two main problems with the character-counting approach:
If the text has many narrow characters, it gets cut and appended with ..., even if the text would actually fit on one line afore trimmed.
When the text contains many wide characters, it ends up on two lines even after I cut it to the maximum number of characters and append the dots.
Is there any solution here (JavaScript or CSS) that takes the actual width of the text into consideration, and not the number of characters?
Use these styles:
white-space: nowrap; /*keep text on one line */
overflow: hidden; /*prevent text from being shown outside the border */
text-overflow: ellipsis; /*cut off text with an ellipsis*/
Apart from ellipsis, I would suggest display the whole text on mouse hover using tooltip.
fiddle
I would suggest Trunk8
You can then make any text fit to the size of the div, it trims the text that would cause it to go beyond 1 line (options are available to set amount of lines allowed)
E.g
$('.truncate').trunk8();
You should look at css ellipsis : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
This is a follow-up question to a previous question of mine. I am trying to find a way to find the exact location of each line of text in an element.
I was able to find the css lineHeight attribute (see previous answer). The problem is that the height of my element is slightly larger than the cumulative height of the number of lines times the lineHeight.
An example:
I have a <p> that is 2010px tall without padding, border, or margin, (scrollHeight, offsetHeight, and clientHeight all report the same,) and has 89 lines in the browser. The lineHeight of the computedStyle() is 22.
2010 / 22 = 91.37 lines
With small elements I can just floor the value to get the correct number of lines, but run into the above problem with larger elements where I cannot accurately get the exact number of lines.
My assumption is that there is some small space between these lines of text I am not taking into account. Any idea how to find it? Does it have to do with font types? Is it automatically set by the browser? Any documentation would be especially helpful.
Thanks!!
Update:
So I have 26 superscripts in my <p>, each of which protrude up 2px, extending the lineHeight of those lines on which they appear to 24px, which accounts for my missing space. (Woot! Thanks so far!)
I guess the boat I am in now is that I need to find a way to dynamically calculate how much they protrude above the normal top of the line, or discover how much higher the baseline of a <sup> is above the normal baseline. (Vice-versa for a <sub>.)
Otherwise, could I determine that with CSS?
Providing my own answer, as #lanzz's is incomplete to some extent.
If you define the block element as:
div {
font-size: 10px;
line-height: 10px;
height:30px;
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
overflow-y: hidden;
padding: 0px;
}
you will get sufficient space for EXACTLY 3 lines. However, if you have sub-scripts or super-scripts less lines are visible. By removing the overflow you can force it to only display 3 lines of space.
This is demonstrable at: http://jsbin.com/ogoruy/4/
Superscript and Subscript are 'inline-block elements':
The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'.
When there is only one value of 'line-height' for all inline boxes in a block container box and they are all in the same font (and there are no replaced elements, inline-block elements, etc.), the above will ensure that baselines of successive lines are exactly 'line-height' apart.
http://www.w3.org/TR/CSS2/visudet.html#line-height
Superscripts and subscripts usually protrude above and below the line boundaries, as illustrated in this demo — you see that the left example has more apparent space between the lines than the right one, even though they have the same line-height. Unfortunately, browser "typography" (if you can call it that) does not allow you to determine how much the sub/super-scripts protrude, so you cannot take that into account when you calculate the actual line heights.
The Label, Button, TextArea, and TextBox (abbreviated LBTT from now on) are capable of displaying strings of text. Is there any way to look at a already sized LBTT object, and determine the number of characters that might fit per line of the given object.
For instance, let us say that I have a textArea that is fixed in its width. Is there any way of asking this textArea object how many characters it can hold horizontally? Conceptually, something like a .getHorizontalCharacterWidth() method?
Here is my "visual" ascii Label example. The "-" and "|" are supposed to represent the vertical and horizontal edges of the Label, respectively.
-------
| |
|ABCDEFG|
| |
-------
As you can see, this label can hold up to 7 characters per horizontal line (In this case A-G)? So if you called my imaginary .getHorizontalCharacterWidth() on this Label it would return 7. Question is, how would you go about implementing .getHorizontalCharacterWidth()?
Assume that I am using a fixed width font.
Thank you
Yes, assuming as you say the text area uses a monospaced font, the aTextArea.getCharacterWidth() should give the number of characters available horizontally. Though it will only return the html property cols which returns the browser default width (or whatever you set it to using aTextArea.setCharacterWidth()) ignoring the CSS specified width.
Though if you know the font size in pixels you can get a rough estimate of how many characters is visible by dividing the pixel width with the pixel font-size. Beware that this may vary depending on the font's character height/with ratio, and that some browsers will return the width either including or excluding the scrollbar if present.
In two cases, this already exists in plain html attribute form.
Text area:
<textarea name="" cols="10" rows=""></textarea>
Text input:
<input name="" type="text" size="10" />
The more general cases, labels and buttons, are more difficult. An 'i' character, for example, is much narrower than an 'm', for example. If you constrain usage to a monospaced font it gets a lot easier, but that's probably not what you're looking for.
I assume you want to wrap text in some smart way in a text area or similar control.
I have asked a similar question a while ago, and basically the width can not be determined.
Your only solution is to either use the available HTML attributes or to assume each character has the same average width and calculate with some buffer zone.