I got from a different Application a html formatted Text from user input.
(With font b br ul and so on, different fonts and colors in one fragment )
I would like to write this on a canvas.
like context.write("<b>Hello</b> World <font...>more text </font>");
how can i do this?
First, you'll have to make available to the canvas all the fonts you are using #font-face if needed.
Then you'll have to describe all the operations needed to draw the text, remember canvas is just a drawing surface. You'll have to iterate over these steps:
Specify the font to be used: (same syntax as the CSS font property)
context.font = "12px Arial bold"
Measure the string that will be drawn to know where to place the next one:
context.measureText(txt).width
Draw your text (fill or stroke):
context.fillText(txt, x, y)
This should help
https://developer.mozilla.org/en/Drawing_text_using_a_canvas
Though you would need to read the formats from the html and re-apply using this method.
Related
I have a bitmap font built with Hiero, which I'm using in scene2d Labels.
In a single Label instance I need to reduce the font's lineHeight value, but I'd like to leave the other Labels (which are using the same font) intact, so they should keep the default lineHeight of the font.
I've tried to simply adjust the value like this:
label.getStyle().font.getData().setLineHeight(localReducedValue);
However, this has modified all the Labels everywhere -- which, in retrospect, seems logical, since I'm modifying the LabelStyle itself.
Unfortunately something like label.setLineHeight(localReducedValue) doesn't exist, so at this point I see two possible solutions:
Create a copy of the font, set its lineHeight to the value I need, and create a separate LabelStyle with that font; or
Write a custom Label for myself which implements setLineHeight.
The first idea seems wasteful, the second is likely a bit complicated, so I'm hoping there's an easier way of achieving a temporary lineHeight in Labels.
Nathan Sweet, one of LibGDX's core developers has kindly suggested a solution, which is working perfectly:
Override Label#layout, set line height, call super.layout, set line height back. You need to use layout and not draw because layout computes and caches the glyph positions, draw just draws them.
You can change the LabelStyle of a single Label by doing something like this:
//skin is the skin that you use
Label myLabel = new Label(text, new LabelStyle(skin.get(LabelStyle.class)));
And then you can modify the style without affecting all the labels.
Alright, so I have a bitmap font with markup enabled. The problem is, I need to set the global alpha value for a whole string of text without setting an individual alpha value for each color code.
For example, I have...
"[#0000ff]this is blue, [#990000]this is red"
I'd like the font text to fade into the background by setting an alpha value. Is there any way to do this without manually parsing color codes and sticking an alpha value into the brackets?
I've also tried adding custom colors with Colors.put(..), but that gets really clunky, as I have to set the alpha value to each color I'm using, with each line of text that I am drawing.
You'll need to use the BitmapFontCache class.
So for example, say your code currently looks like this...
font.drawWrapped(batch, text, x, y, wrapWidth, alignment);
Replace it with the following and you can control the alpha in the way you require...
BitmapFontCache cache = font.getCache();
cache.clear();
TextBounds bounds = cache.addMultiLineText(text, x, y, wrapWidth, alignment);
// This is the useful bit!
cache.setAlphas(alphaTransparency);
cache.draw(batch);
Note - If you're using distance field fonts then the shader most people use for them doesn't support alpha, but it's easy to fix it so it does. Let me know if you hit that problem.
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.
Let's say that I use some HTML5 markup:
<canvas id="e" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "bold 72px JerseyLetters";
context.fillText("Bulls", 50, 100);
</script>
To make some cool text like this:
Then I decide I want these letters to fit into an envelope that looks like this:
Hoping to get something like this:
How would I go about (1) defining an envelope like the one above and then (2) putting the text in the envelope using HTML5 Canvas to get the result?
I am open to either something that directly places text in the envelope or a solution that first creates an image and then fits the image in an envelope.
Thanks!
EDIT
I added the tags "webgl" and "three.js" to this question on the advice of #markE. I will research those two packages in the mean time as well. I'm very new to .
webGL way:
Do it as a image-processing with pixel-shader.
Render text with 2d canvas, bind webGL texture with buffer and fill texture with canvas image (rendered text). Have prepared envelope that actually maps the area that envelope holds and also every pixel play role of the UV coordinate from the first image. Running that as pixel shader, you have image-to-be-squeezed and envelope (uvs) you'll output final image. That way, it's completely font and text independent. You could even probably make one image-processing step more so you could load any envelope shape and process it on spot, so it becomes font, text and envelope-shape independent.
I'm not sure how well did I explain this.
Hope this helps, though.
SVG provides these sort of text transforms. See http://tavmjong.free.fr/SVG/TEXT_PATH/TextPath.html
EDIT: This link appears to be converting the text to actual SVG. Probably not going to be helpful for you, sorry.
This question is a little specific and I am hoping someone here can shed some light on a potential solution for me.
All of the following points are important:
I am writing some HTML pages that are going to be read on a third party hand-held device.
In order to fit the requirements of this device each word must be in a separate span, this is for an upcoming feature of the device that I am not allowed to go into, but it has to be formatted like this.
This HTML is being converted from SVG, the SVG is created from Adobe Illustrator documents.
The only place I have any control of the creation of the HTML is in the conversion from SVG to HTML.
My problem is this, in SVG text is broken down into "text" nodes and tspan nodes. Look at this simple SVG, note how I am changing the Y coord on the first tspan.
<text><tspan y="50">Hello</tspan><tspan> World</tspan></text>
When this renders in a webkit based browser, like safari, the sentence "Hello World" is displayed with the word "World" right next to the word "Hello".
In my converted HTML example:
<div><span style="position:absolute;top:50px;">Hello</span><span> World</span></div>
"Hello" is displayed with a y offset of 50, however "World" is displayed in the top left corner origin of the page.
This is frustrating as I do not have the coords of where the "World" span should be placed in the SVG (as Illustrator does not need this coord to render it correctly). Also, there may be one or more tspans in the SVG with altered positions which will prevent me from applying the style to the div.
In short, does anyone know if there is an attribute I can set to place the second span directly after the first?
Thanks
You could style the div instead of the span
<div style="position:absolute;top=50px;"><span>Hello</span><span> World</span></div>
That would keep text-chunks together and positioned relative to each other, but you could still have a span for every single word
Have figured this out after trying a bunch of different things.
It is actually very straightforward, however I didn't realise spans could be nested so I am going to let myself off.
<div><span style="position:absolute;top:50px;"><span>Hello</span><span> World</span></span></div>
The trick is to wrap all the words that need to be grouped together in a span. Hopefully this helps anyone who is stuck on a similar issue.