My mx:Text's htmlText is the following:
mainText.htmlText = "<img src=\"breadmaker.png\" width=\"339\" height=\"275\" vspace=\"0\" hspace=\"0\" \/>" + "Lorem Ipsum is simply dummy tex......(more here)"
However, the result looks like the following:
Screenshot
As you can tell, it cuts off the first few characters in the text after the image tag (Lorem Ipsum is sim), but it is only because the image is full width. If I change the img tag to width=\"200\", it shows the text floating to the right.
However, as you can tell with a full width image (because the Text component's width is 339), it seems the text is still floating to the right, but it's hidden off to the right side of the image.
Any help?
HtmlText property is not very reliable when displaying HTML content. Adobe even has a note about img tag not being fully supported.
But if you're trying to get your text under you image, try to put them both in different paragraphs (p tag).
Alternatively you can check out Alex Harui's blog post from 3 years ago. He had at that point an HTML implementation that I found better for my purposes than the htmlText property.
What I ended up doing was determining if it was a full width image, and adding an actual <mx:Image> to the vbox. When I request the htmlText from the element, I simply run something like this:
if( fullWidthImage )
return "<p>"+imageString+"</p>"+body;
else
return body;
That way, the element itself returns the image wrapped in the body for a non full width image, but I make sure it is not included in a full width image until I need it there.
Related
How can I have text in an HTML document so that it will be “there” in the PDF document (generated via wkhtmltopdf), but invisible when viewed or printed?
Constraints:
The text must appear at the right place, with the right size, because the purpose is to find the text with an automated tool and discover its co-ordinates and size on the page.
The solution must be to do with the text only, because I'm trying to keep this simply about CSS styles. Any “hide it under another element” doesn't address the problem, because there might not be any other element at those co-ordinates.
The solution can't be dependent on what's already on the page; I can't go inspecting the background elements on the page because I can't determine those dynamically. The text should be invisible in its own right.
The text must be findable with an automated tool (e.g. pdfgrep), which means wkhtmltopdf must place the text in the document file.
So a “display: none” style or “opacity: 0” doesn't work, because that makes the text not exist at all in the PDF document.
So I want to have an HTML document, place a text element “FOO” within that document with an inline CSS style, and process it through wkhtmltopdf; then, pdfgrep FOO should find the text, the text location and size should be correct, but the text should not show up in HTML, not appear when the PDF is viewed, and not appear when it's printed.
With a style of color: transparent; the text will be fully transparent on the page, but show up normally for any tool looking in the document for that text.
I.
The PDF syntax supports different "text rendering modes". These lets a PDF creating software (or anybody who authors a PDF with a simple text editor) render any text, regardless the chosen font, as
outlined only,
filled only,
outlined and filled,
neither filled nor outlined (invisible),
plus some more, which deal with clipping.
Here is the illustration from the PDF specification:
However, this is not supported by HTML or CSS (at least AFAIK). So your only option to get it done in a similar way is to...
...either set the background color in HTML to the same as the text color,
...or set the text color to transparent.
Then hope that htmltopdf will translate that into a PDF which represents the same...
II.
The following HTML code (essentially using style="color:transparent") works for me. You'll have to decide whether it fullfills your requirements completely:
<html>
<head></head>
<body>
<div style="color:transparent; background:red; border: 1px dashed currentColor;">
The color of this text is transparent/invisible. <br />
The background of this text is red.
<div style="background:blue; height:9px;"></div>
Above this text is a blue box with a height of 9px. <br />
This block is surrounded by a transparent border.
</div>
</body>
</html>
Then, when opening the PDF I cannot read any text lines, but I can select/mark/highlight them.
When running
pdftotext -layout my.html -
I see the following text:
The color of this text is transparent/invisible.
The background of this text is red.
Above this text is a blue box with a height of 9px.
This block is surrounded by a transparent border.
Make text colored with background color of your PDF (ex. white).
I am using CSS3 resizable property to resize an HTML Div element.
Here is sample code : http://jsfiddle.net/blunderboy/nMTm9/1/
But, I want to update the value inside input element as soon as width of div changes. How can we achieve this ?
With setInterval, you can do this:
http://jsfiddle.net/nMTm9/3/
It's not perfect but works great.
var input = $('input'), div = $('#resizable');
function calculate(){
input.val(div.width()+"px");
}
setInterval(calculate,500);
No, CSS cannot change the value attribute of an input, or indeed any attribute of any element.
The close change content by style is if you put content in the input field or erased the content input field the label change by css.
enter link description here
I have a div with a fixed width, but the text inside (someones name) will vary. Is there a way of dynamically resizing/letter-spacing the text to fit perfectly in the div?
However, I cannot use javascript as this script will be used in a HTML-PDF converter, which does not read javascript
text-align:justify won't work as if the text is too long for the div, it won't resize it. I find text-align:justify only works for paragraphs etc.
The name cannot go onto two lines
You need to use either:
Graphics graphics = this.CreateGraphics();
SizeF textSize = graphics.MeasureString("How long am I?", this.Font);
or
Size textSize = TextRenderer.MeasureText("How long am I?", font);
TextRenderer is less accurate, but Graphics requires you to use a windows form - in your case you could have a form with a single textbox into which you place the text to be measured and then read it back, but TextRenderer is simpler.
Using the above you could write a function that adjusted the font-size until the desired length was reached.
It would then be a case of setting the style on the text sent to the browser to reflect this font-size.
For some reason, if you add an image to htmlText, like the following:
myText.htmlText = "<img src='"+dataProvider.bodyImage.getUrl('original')+"' align='left' \/>" + dataProvider.bodyText;
The image will be succesfully added to the htmlText, but it seems to measure the sizes completely wrong. At times, the actual text (dataProvider.bodyText) will have part 'hidden' under the image. At other times, there are anywhere from 1 to 4 lines cut off at the bottom. However, if you select the text and drag your mouse down, you can see the bottom lines. It appears the text is all there, but the mx:Text component is not including the image in the textHeight, so it doesnt resize the componenet to the correct size.
Any ideas?
Currently using: Flex 3 (cannot upgrade to 4, unfortunately).
Thanks so much!
The key is you have to specify the width/height of the image in htmlText in order for it to be calculated correctly (or close to it, anyway).
on this page: https://www.bcidaho.com/mammography/
if you click "find a screening center" a table of information comes up...
how can i rotate the text in the last 5 cells?
obviously cross browser would help... this would allow the table to fit properly...
and do i have to set a height on the TDs to make it fit right?
Take a look at this page: https://www.udemy.com/blog/css-rotate-text/
in the section "Rotating Text with CSS Transform Property".
You have to create a class or id in your CSS file, and apply it to the text you want to rotate, not the div.