I would like to do a trimming of the text that I need to display in box on a web page.
The known parameters are Font Family, Font Size, the number of characters to display and the actual text and of course the width of bounding box.
I need to calculate where to trim the source text and where to put "..."
I have an idea but it is not too fast.
If there exist some other way to do the trimming maybe in CSS I would like to know it and I can accept it as a solution too.
You cannot calculate this ahead of time. You need to position the actual text in the browser and measure the output. You can do this off-screen using a negative text-indent if needed.
There are plug-ins for jQuery that can set an ellipsis based on a fixed-sized container with overflow.
See: http://archive.plugins.jquery.com/plugin-tags/ellipsis
So long as you don't need to support older browsers, you could use this simple css:
text-overflow:ellipsis;
http://www.w3schools.com/cssref/css3_pr_text-overflow.aspenter link description here
Related
I am quite new to the ZPL II language and have some trouble with writing text in reverse mode with the ^GB and ^FR commands. As far as I understood the ZPL language, when I want to print a text in reverse mode (white over black) I have to first draw a graphic box with the ^GB command and then set the field to be written to in reverse mode with the special ^FR command.
The problem I have is that I would like to fit the graphic box's width to the text's width. With the font I use, the ^A0 font, I couldn't find out the algorithm to calculate the correct width of the graphic box.
Depending on the text, if there are numbers or letters or both, the graphic box's width is not just (number of caracters)*(width of one caracter)...
Here is the code I use :
^XA
^FO64,0,^GB70,20,10^FS
^FO64,0,^FR^A0N,32,37^FD0001^FS
^XZ
When using a mix of numbers and letters the graphic box doesn't fit anymore :
^XA
^FO64,0,^GB70,20,10^FS
^FO64,0,^FR^A0N,32,37^FDAW01^FS
^XZ
I would be very grateful to anyone who could give me the correct approach to my problem .
I do not believe that there is a way to make the graphic box auto size based on the actual length of the text. I'd recommend using a mono-spaced font. That should easily allow you to calculate the width of the box based on the number of characters. Use Zebra Utilities to download a mono-spaced font to he printer.
I am currently creating a word cloud using an in house developed library, it uses the svg element text to display the words, the problem I have encounter is that the area of some words sometimes overlaps other words as you can see if you inspect test1 in this jsfiddle, this becomes a problem if the words must be clickable.
I want to know if it is possible to reduce the area of the text to the minimum, just wrapping the word, a small padding is accepted.
I have already tried the solution posted in this answer but it didn't work.
I would prefer a css solution if it exists rather than messing with svg but if there is no other option that will do.
Edit: Ok, enough reputation to post images. What I currently have:
What I would like to have:
There are two problems; I currently have only a solution to one. Your text example is misleading. Try Text1g instead to see the descent (i.e. the amount of space below the baseline which the g needs). If you do this, then you'll see that the texts really overlap - you just don't notice because your test text doesn't contain a good set of test characters.
Apart from that, I see that the element is 67px high while the font-size is only 60px. I don't see where the additional 7 pixels are coming from. It's not padding and not margin :-/
Why do you need to know the minimum bounding box?
If it is because you are linking with the element, or applying click events to the words, then you should investigate the pointer-events attribute.
You possibly want something like:
<text ... pointer-events="fill">ejecutar</text>
You will only get events when the pointer is over the fill of the words. This might be a bit fiddly for clicking though because the holes in words will not be clickable.
You could ease that by putting an invisible <rect> of an appropriate size in front of the word with pointer-events="fill". The "fill" value will attract events for where the fill would be even if it is invisible. However that requires you know the bbox of the word, which we already established you don't have (?).
You could give the words an invisible fat stroke and use pointer-events="all". The invisible stroke will make the clickable area (invisbly) fatter and hence the inter-word holes smaller.
Is there a simple css way to display text with every letter replaced with a filled square?
My idea was to find a font-family that has squares for all letters, but I didn't find anything like that existing. Google is no friend as it gives hits of posted issues with boxes that appear when fonts fail in some way.
Letters should be displayed as squares, not replaced with squares. Also, I need to be able to control the square fill color with the usual html/css.
I'm fine to use font-face, but am trying to avoid the learning curve for creating my own font.
Update: here is an example:
div.innerHTML = "some arbitrary text".
Should be displayed like this:
"■■■■ ■■■■■■■■■ ■■■■".
#NoobEditor is right although. Many online font editors available (e.g.: http://fontark.net/farkwp/ ), you can create such font family in few minutes and can embed with your app.
Get a square font, define it in your we page style, asign it to an object, a div must work, put your text there. Voila.
I've got a textbox which has text that is coming from a stored procedure. I'm trying to increase the line spacing between text so that the text doesn't seem so "squished together".
i.e.
ABC
DEF
I want slightly more spacing between ABC and DEF. Using the newline operation isn't feasible, because the spacing will be too large.
I've tried using the line spacing property option but that hasn't made a difference.
Edit: DEF should be directly under ABC in the example.
What you want is unfortunately not possible in SSRS. From the relevant documentation, here's the limited list of what you can do with CSS in reports:
text-align, text-indent
font-family
font-size [...] Supported units are: in, cm, mm, pt, pc. [...]
color
padding, padding-bottom, padding-top, padding-right, padding-left
font-weight
Your question speaks of "line spacing" (i.e. line-height?), but your examples seem to be about word-spacing. Unfortunately, neither's available in SSRS.
For word-spacing I can only think of hacks and workarounds, most of which aren't pretty:
Use SQL or expressions to double spaces, e.g. Replace(Fields!Xyz.Value, " ", " ")
Choose a different font that allows for more space between words.
Beyond that workarounds get even less pretty.
For word-spacing I can't really think of any workarounds, except for the one you used (linebreaks) or using a different font.
Bottom line is probably that you can't really do anything about his, AFAIK.
I was able to control this by double spacing my text and then changing the font size of the second line break
For example:
text <--CRLF, 8pt
<-- CRLF, 4pt
text
It's not very scalable, but it does the job.
Try adding padding in the textbox and changing the vertical alignment. It will increase the space between the cells. Worked for me.
I know this is an old topic, but you can do that by changing SpaceAfter and SpaceBefore properties.
Try this:
TextBox Properties -> Font -> Line Spacing -> Custom
UPDATE:
This is Microsoft bug..
The line spacing depends on font size... option below doesn't work..
Yes you can make a line any height you want. When you select the line on the far left side of the row drag your mouse to increase the row height. Set the vertical alignment in the text box to Top. This will stop the data from moving to the center of the box or you can use padding options for the bottom.
There isn't a way to natively do this, but a very customisable way is to simply add lines in between your lines manually and change the font-size so that the line size decreases respectively. A bit time-consuming but better than nothing.
I finally found that if I add blank expressions within my text I can trick SSRS to double space.
right click-> Create Placeholder
Do this mid sentence on the second or subsequent line
Set the Value in Placeholder Properties to ="" (*an empty string*)
you will have text in your SSRS document that looks like this:
I want to <Expr>double space.
Now highlight the <Expr> and set the text size to double the font you're using
And the report will render with the effect of double spacing.
I want to make it so there's only 350 characters inside the paragraph, regardless of how many characters are put into it, I only want 350 displayed.
How can I do this?
The text is just in a div tag in text.
Cheers
You could put the text into a textbox, style away the fact that it's in a textbox and then limit the length on the textbox using the size attribute.
However, the ideal solution would be to limit it on the server side.
You can also inspect the contents via the DOM in JavaScript if you feel like a client-side solution.