Have a text to output in div printed with not fixed-pitch font. This div height permit to print only 4 lines of text. Is it possible to track automatic browser word wrap, so I can find position in text, when it has reached 4 lines and to cut away next lines?
Any suggestions using Javascript manipulating with DOM or maybe text line length calculation with PHP help?
How about using overflow: hidden?
Say you had a font-size of 12px, and a line-height of 16px.
4 lines * 16px = 64px
.hide-extra-lines {
height: 64px;
overflow: hidden;
}
Is this what you're after?
1) You can measure the size of the text on the server and be reasonably accurate. I've done this with GDI+ on a Windows machine; not sure what OS or libraries you have access to.
2) You can use a monospace font on the client and detect when text will wrap based on width of the container and word length. Then, you can truncate the text.
3) You can not use a monospace font on the client, still make a guess using script, and use overflow: hidden to capture any text that overflows.
Related
What I'm trying to achieve is to print generated labels in a very fixed format. The paper they will be printed on is self-adhesive and pre-cut, so the restriction would be to print them in exact positions on the page.
To achieve this purpose, I'm making use of the window.print() function in javascript in a separate window that contains only the grid-like structure.
The problem is that I can't seem to be able to override the margins. I would have expected top and left to be 0, but they are set to something somehow. I would like to have control over what the printable margins are.
This is the most promising version I've tried:
#page {
width: 210mm;
height: 297mm;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
}
I've also tried setting negative margins, on the #page element and to also wrap the divs in a parent div and set negative margins on that and they were ignored, got exactly the result in the image.
I also don't have hidden elements on the page. The window that is opened contains just a parent div with all the little rectangular divs in it.
The inner divs themselves have no margin and no margin is set up in the browser Print prompt.
I'm also open to alternatives. I was going for a front-end solution, but my backend is PHP. I wouldn't find a server-side solution adverse, but I need to make sure I will be able to have a 3 mm margin on the right, between the label and the edge of the paper.
I'd like to use one-line textarea (with rows=1 and overflow-x:hidden;) but for now I have a problem: unlike input type="text", when it is overflown horizontally, the content is scrolled with "jumps" when we continue typing inside it:
which is not nice for typing workflow (see also a fiddle). Is there some simple way to fix this (ideally with just CSS), or the only way is to set an on('input',..) handler, check if we reached the end of the line inside it by some pesky pixel calculation and then set horizontal scroll position of the textarea?
This is easily achieved by using the white-space css attribute:
white-space: nowrap;
overflow-x: hidden; /* don't add this if you want a scrollbar to appear */
I've noticed that as fonts get larger and larger, the vertical padding in a div element above and below the text grows larger. Is there anyway quick way to prevent this? Is this font dependent?
I'm attempting to create a word cloud, but these vertical spacings are proving to be quite annoying.
Here is an example:
You can use the line-height style rule to change the amount of space around the text
Setting the line-height is your answer but I would recommend the em unit and setting the line-height to 1em for all font sizes in your tag cloud. I always use em's to represent line-height because regardless of whether the font is set by pixels, ems, or some other unit, line-height is always relative to the size of the font.
According the the W3C specification for line-height
A value of 'normal' sets the 'line-height' to a reasonable value for
the element's font. It is suggested that UAs set the 'normal' value to
be a number in the range of 1.0 to 1.2.
This means the font size can vary but the vertical height of the fonts will always remain consistent and relative to the corresponding size.
Try in your css:
line-height: 20px;
You could research for some already done word clouds.
Or just put classes to the different sizes, and so you can put negative padding to the bigger sized words.
.span bigger {
font-size:2 em;
padding: -4px;
}
.span big {
font-size:1.5 em;
padding: -2px;
}
.span small {
font-size:0.9 em;
padding: 0;
}
Hope it helped or at least gave you some cool ideas! ;)
I am looking for a Javascript/jQuery + CSS way to limit a text (for example a product name) to say, 2 lines. But the visitors need to know that it is truncated and therefore I will need to append '...' at the end.
The original way I thought of doing this was to put the text in 1 line, measure the width of it and cut it off just before the text reaches 2 times the width of the containing div, but it seems tricky as each character probably needs to be caculated for its width rather than that.
Limiting it to number of characters or words will not work in this case - I would like to fully fill the 2 lines of that div every time, instead of having gaps.
Is there a nice way to achieve this instead of using a monospaced font?
Since you're using jQuery try these plugins:
http://dotdotdot.frebsite.nl/
https://pvdspek.github.com/jquery.autoellipsis/
https://github.com/theproductguy/ThreeDots
https://github.com/jjenzz/jquery.ellipsis
We can use css for this:
.truncate {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block; /* for links */
}
I'm trying to rotate a wide table (work schedule, see example image below) for printing purposes. The reason I'm doing this is because I want the table to stretch over multiple pages so when you print it on paper you can put the different sheets together and get 1 decent sized, readable table/schedule.
Now the problem I'm having isn't the rotating itself, it's the number of pages when trying to print the table. Instead of expanding the table to the next page it's cut-off so you'll only see the top part.
Now Google Chrome does the printing just fine, it spreads the table across 2 or 3 pages like I want it to. I'm having trouble however getting the same result in Firefox or IE.
I'm using the CSS transform:rotate method to rotate the body/schedule and get the wanted result in my browser (see below).
transform:rotate(90deg);
-ms-transform:rotate(90eg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
I've tried adding margins, paddings to the table but it only moves the table around the page instead of expanding it to the next page. Adding overflow (body *{ overflow:visible !important; }) only scaled the body down so it'll fit on 1 page.
Is there any way to print this wide table on multiple pages so it's still readable for FF & IE?
Thanks in advance.
Example image (usually there's text in the time-blocks):
(Normal printing in landscape mode won't do because the text becomes too small to read.)
When you use a css rotation the actual dimensions don't change.
So if you have a block that is 100 x 20 px and you rotate it. The browser will still see the 100 x 20 px block, while you see a 20 x 100 block. Adding margins and padding's wont change this, you will need to modify the height and width.
I guess the simplest method would be to add an invisible div that has the same height as the tables width and vice versa. You can use javascript for this.
#media print {
#page {
size: landscape;
}
div.landscape-parent {
width: 585mm;
height: 450mm;
}
div.landscape {
width: 585mm;
height: 450mm;
transform: rotate(270deg) translate(-585mm, 0);
transform-origin: 0 0;
align-content: end;
}
div.content {
padding: 10mm 10mm 10mm 10mm;
}