i am making a html5 text splash in which i require the text to be in multiple line. For eg
Everything
Awesome
Is Really
Not awesome
But is coming in one line such that
Everything
Awesome
Is Really
Not awesome
i am unable to create a line break . for different words.Can anyone help me with this.
I have created a demo to show what is goin on http://cssdeck.com/labs/owxlsevi/0.
Can anyone please suggest me how to get each word in different line like i specified above.
Unfortunately, the fillText and strokeText methods of the canvas 2d context do not support line-breaks. When you want multi-line text, you have to do this yourself by splitting the text into substrings and output them separately with different y-offsets.
This is a function which draws a text with line breaks (\n) in multiple lines separated by a fixed line height of 12 pixels:
function fillMultilineText(context, text, x, y) {
// split text at line-breaks and put the resulting sub-strings into an array
var lines = text.split('\n');
// draw each line with 12pixel offset
for(var i = 0; i < lines.length; i++) {
var line_y = y + i * 12;
context.fillText(lines[i], x, line_y);
}
}
Here is a related question with some solutions:
HTML5 canvas ctx.fillText won't do line breaks?
Related
I face a problem that When I use fitz to detect pdf layout. The two paragraph will be detect as one textblock if the two block as a close line margin.
for example. I want detect the text and the isolated formula as to text blocks. but for now fitz detect them as one text block.How could i handdle this.
Shoud I detect words coordinates and sort it with normal reading order or some methods like this.
PyMuPDF also has ways to adjust the granularity of text extraction: there are more levels between and beyond block extraction and word extraction.
You can extract by line, by text span (both are a higher level than word) and by character (level below word). And all of them deliver wrapping rectangles of the respective text, plus a plethora of text font proprerties (font size, font weight, font style, font color), writing direction.
Here is an example that extracts lines of text:
details = page.get_text("dict", flags=fitz.TEXTFLAGS_TEXT) # skips images!
for block in details["blocks"]: # delivers the block level
for line in block["lines"]: # the lines in this block
bbox = fitz.Rect(line["bbox"]) # wraps this line
line_text = "".join([span["text"] for span in line["spans"]])
Please do have a look at this picture in the documentation - it shows an overview of the dictionary layout: https://pymupdf.readthedocs.io/en/latest/_images/img-textpage.png.
I am trying to make a display that takes an input number and displays that number centered vertically on a strip along with the numbers above and below it, appropriately spaced. That much works - my problem is with getting it to bottom out at zero. I don't want to have negative numbers or even tick marks below zero.
You can see the file in question here: http://www.fastswf.com/r58wGg0
In that file, the left is what the final version will look like (masked - giving the illusion that it is moving infinitely) and the right is unmasked, showing the actual movement of the movieclip and text boxes. The input number is based on mouse position so slowly move your mouse around to see the action.
And here is my code.
var labelSpacing = 500;
var tickSpacing = 18;
function updatePosition(currentValue){
tape.y = ((currentValue/100)%5)*tickSpacing;
current.y = (((currentValue/100)%5)*tickSpacing)+170.85;
plus1.y = (((currentValue/100)%5)*tickSpacing)+82.85;
minus1.y = (((currentValue/100)%5)*tickSpacing)+259.9;
current.text = (Math.floor(currentValue/labelSpacing)*labelSpacing).toString();
plus1.text = (Math.floor(currentValue/labelSpacing)*labelSpacing+labelSpacing).toString();
minus1.text = (Math.floor(currentValue/labelSpacing)*labelSpacing-labelSpacing).toString();
}
Is there a way to modify this so that it changes its behaviour near zero so that it displays correctly?
Hmm, normally such indicators do allow displaying values below zero. But, for your purpose, you can use a limited currentValue to use in your calculations, but preserve the old value in case you need to display something else based on actual currentValue too.
function updatePosition(currentValue:Number):void {
var cappedValue:Number=currentValue;
cappedValue=Math.max(cappedValue,1.0*labelSpacing);
// experiment with this constant ^^^ to achieve desired result in production
tape.y = ((cappedValue/100)%5)*tickSpacing;
// and use cappedValue in place of currentValue in calculations
// rest of code
}
In the code, I am reading an xml file and painting the contents accordingly on a JPanel.
If the file contains a tag <LineBreak/> I am supposed to insert a Line Break before the next word.
I thought I could use a
g.drawString(..)
but that requires that I know what follows the break, which in this case, I do not.
Is there any other way to do this by overriding the draw method?
Really appreciate the help. Thanks
I think you will need to use FontMetrics (g.getFontMetrics()) to determine the number of vertical pixels needed to display a line of text. When you call drawString to paint the second line of text, you must pass a y value large enough that the second line of text is drawn below the first line of text.
String[] lines = myStringFromXmlDoc.split("\r\n|\r|\n");
int verticalOffset = 0; // your starting offset would probably be more dynamic
foreach(String line : lines)
{
g.drawString(line, 0, verticalOffset);
// use FontMetrics to implement calcLineHeight for yourself
int currentLineHeight = calcLineHeight(line, g);
verticalOffset += currentLineHeight;
}
Edit:
Also see java.awt.font.LineBreakMeasurer for a possibly useful utility class.
I have set up a grid class that contains theoretical cells.
I have a method collectCells() which accepts a starting point, radians and distance as arguments. I want this method to return an Array containing all the cells that are along a given angle and that are within the specified distance from the starting point, e.g.
The easiest way for me to do this is just loop through all the pixels in the given direction and pick cells up as I go, something like:
for(var i:int = 0; i<distance; i++)
{
startPoint.x += Math.cos(radians);
startPoint.y += Math.sin(radians);
if( start point falls within uncollected cell) collect cell;
}
This is obviously really poor, as the loop will be as long as the distance I specify - extremely slow.
I tried something different, creating a nextCell() method which accepts the last collected cell and radians. The method threw a point 25 pixels in the direction specified by radians, collected the resulting cell and then started over from that cell for a given amount of cells.
I didn't really think about this approach clearly enough, and once done realized that I had a problem, being that the actual path I'm testing gets broken each time the next cell is sought, e.g.
Where the green dotted line is the desired path, and the blue lines are the paths that make up each nextCell() call because the check is made from the centre of each cell.
What is the correct way to efficiently collect the cells in a given direction over a specified distance (pixels)?
Or you could use Bresenham's line drawing algorithm. Because literally you are trying to draw a pixel width line but with huge pixels.
I would like to show some images and text in the same line. The text and image is completely dynamic. At first I thought to use htmlText property of TextField as img tag is supported. Something like this:
var tf:TextField = new TextField();
tf.htmlText = "before img <img src='img.png'> after image";
addChild(tf);
But I found that the image is showing in the next line, not in the middle of two text segments. Then after checking the manual of TextField I have found that this is the documented behavior that the image will be shown on the line following the img tag.
So what is the best way to do this? Note that the text and position of images are completely dynamic.
I understand that it is possible to split the input in a series of texts and images and then position them calculating the text and images width. In other words parse the input ourselves.
Is there any better way to do this? Or is there any library available that does this parsing?
Hail, Taskinoor.
You need use TLF.
You can follow this link that describe even more that you want.
Edit: I'm assuming you are using Flex (TextFlow).
Don't know if it is possible directly on Flash with Flex SDK4...
Maybe you'll need TLF2 (Flex SDK 4.5 Hero)