Adding title attribute to an image in rst - restructuredtext

Seems like restructured text markup is very limited when it comes to image options:
The following options are recognized:
alt : text
height : length
width : length or percentage of the current line width
scale : integer percentage (the "%" symbol is optional)
align : "top", "middle", "bottom", "left", "center", or "right"
target : text (URI or reference name)
Is it possible to set some custom attributes like title via reStructuredText markup?
e.g.
.. image:: foobar.jpg
:title: mouse over text, hi!
Would output:
<img src="foobar.jpg" title="mouse over text, hi!"></img>

You can use figure
.. figure:: picture.png
This is the caption of the figure.

According to docutils, the following options are recognized: alt, height, width, scale, align, target, class, and name. No title.
Options include rewriting in the client with JavaScript or work with the docutils team to make a feature request and implement it.

Alternatively you could simply use the "raw" directive and directly use your ideal target html
.. raw:: html
<img src="foobar.jpg" title="mouse over text, hi!"></img>

Related

Wordpress text block list type is not changing

Try to change list type of text block in word press. I change the text block using text mode not visual mode
add type="A" in <ol> tag . But after save changes, it doesn't work. How to implement it correctly?
In the image below i want to change 1.Informasi Pribadi to A.Informasi Pribadi
https://ibb.co/DKCHtDB
https://ibb.co/NLPSxgY
This might point you in the right direction. Usually you will be changing list styles with either HTML or CSS.
With HTML there are <ul> (un ordered) and <ol> (ordered) lists.
Then you can change their bullet points with some CSS like in this tutorial:
https://www.w3schools.com/css/css_list.asp

CSS how can I change some character's font color automatically?

Say I have a div that shows some text like this:
<div id="some_text">abc_123+xyz</div>
I would like to set a single character's color in RED, if it's neither numeric nor alphabetic.
This is the regular expression I used to identify numeric and alphabetic characters: [0-9A-Za-z], but I got stuck now...
How can I do this, is this possible?
Not possible using only CSS, because the characters are not in a separate element that can be styled.
You'll have to add some JavaScript to create the required elements, for example:
const div = document.getElementById('some_text');
div.innerHTML = div.innerHTML.replace(
/([^a-z0-9])/gi,
'<span style="color: red">$1</span>'
);
<div id="some_text">abc_123+xyz</div>

How to convert set of images to proper RSS description?

I am trying to build a RSS feed, so first I get the page with XPath Fetch Page (XPath is //div[#class='topic']/h2/a), then I Loop for each item and XPath Fetch Page again with URL equal to item.href and extract images there with XPath equal to //*[#id="topic"]/div[4]/div/div/a/img.
In result I get a description, which contains set of images like:
0
alt Sample title
height 925
src http://cdn.example.com/f2dd/3702212_6cddf28e.jpg
style width:640px; height:925px;
width 640
1
alt Sample title
height 920
src http://cdn.example.com/1cc7/3702213_00acefab.jpg
style width:640px; height:920px;
width 640
...
How should I convert it to one text string with a number of <img src="..."> elements? If I Loop thru each item (what is shown on the image below), then I get just one (first) element.
So you want to join / concatenate a list of images... I don't think there's an operator for that.
The next best thing is a dirty hack like this:
In your loops, assign to x instead of description
Add a Regex operator with params:
in: item.description
replace: .*
with: ${x.0}${x.1}${x.2}${x.3}${x.4} (and so on)
UPDATE
As #LA_ commented, the replacement should be like this instead: <img src="${x.0.src}"><br><img src="${x.1.src}">

Extracting text fragment from a HTML body (in .NET)

I have an HTML content which is entered by user via a richtext editor so it can be almost anything (less those not supposed to be outside the body tag, no worries about "head" or doctype etc).
An example of this content:
<h1>Header 1</h1>
<p>Some text here</p><p>Some more text here</p>
<div align=right>A link here</div><hr />
<h1>Header 2</h1>
<p>Some text here</p><p>Some more text here</p>
<div align=right>A link here</div><hr />
The trick is, I need to extract first 100 characters of the text only (HTML tags stripped). I also need to retain the line breaks and not break any word.
So the output for the above will be something like:
Header 1
Some text here
Some more text here
A link here
Header 2
Some text here
Some
It has 98 characters and line breaks are retained. What I can achieve so far is to strip the all HTML tags using Regex:
Regex.Replace(htmlStr, "<[^>]*>", "")
Then trim the length using Regex as well with:
Regex.Match(textStr, #"^.{1,100}\b").Value
My problem is, how to retaining the line break?. I get an output like:
Header 1
Some text hereSome more text here
A link here
Header 2
Some text hereSome more text
Notice the joining sentences? Perhaps someone can show me some other ways of solving this problem. Thanks!
Additional Info: My purpose is to generate plain text synopsis from a bunch of HTML content. Guess this will help clarify the this problem.
I think how I would solve this is to look at it as though it were a simple browser. Create a base Tag class, make it abstract with maybe an InnerHTML property and a virtual method PrintElement.
Next, create classes for each HTML tag that you care about and inherit from your base class. Judging from your example, the tags you care most about are h1, p, a, and hr. Implement the PrintElement method such that it returns a string that prints out the element properly based on the InnerHTML (such as the p class' PrintElement would return "\n[InnerHTML]\n").
Next, build a parser that will parse through your HTML and determine which object to create and then add those objects to a queue (a tree would be better, but doesn't look like it's necessary for your purposes).
Finally, go through your queue calling the PrintElement method for each element.
May be more work than you had planned, but it's a far more robust solution than simply using regex and should you decided to change your mind in the future and want to show simple styling it's just a matter of going back and modifying your PrintElement methods.
For info, stripping html with a regex is... full of subtle problems. The HTML Agility Pack may be more robust, but still suffers from the words bleeding together:
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(html);
string text = doc.DocumentNode.InnerText;
One way could be to strip html in three steps:
Regex.Replace(htmlStr, "<[^/>]*>", "") // don't strip </.*>
Regex.Replace(htmlStr, "</p>", "\r\n") // all paragraph ends are replaced w/ new line
Regex.Replace(htmlStr, "<[^>]*>", "") // replace remaining </.*>
Well, I need to close this though not having the ideal solution. Since the HTML tags used in my app are very common ones (no tables, list etc) with little or no nesting, what I did is to preformat the HTML fragments before I save them after user input.
Remove all line breaks
Add a line break prefix to all block tags (e.g. div, p, hr, h1/2/3/4 etc)
Before I extract them out to be displayed as plain-text, use regex to remove the html tag and retain the line-break. Hardly any rocket science but works for me.

Flex 3: Different text styles within same label/control

Can anyone tell me if it's possible to have a the text in a single label control displayed in more than one style.
e.g. I have a label
I want the the text to appear with the style "english" (which it does), but I want the "th" of the text to be different (bold, different colour, whatever).
So, the question in a nutshell is: Is there a flex equivalent of the following HTML?
<p class="english">bro<span class="highlight">th</span>er</p>
If not, can anyone think of a good workaround, short of having to separate the text into multiple label controls (thus making alignment a bit of a nightmare)?
Thanks to anyone who can help!
Dan
yes, try the following
var la : Label;
la.htmlText = '<TEXTFORMAT LEADING="3"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="14" COLOR="#000000" LETTERSPACING="0" KERNING="1">what ever texst you wish</FONT><FONT FACE="Verdana"SIZE="18" COLOR="#848484" LETTERSPACING="0" KERNING="1">more text here</FONT></P></TEXTFORMAT>';
Yes, it's possible. Take a look at the Label.htmlText documentation in the livedocs which explains how to set markup on a Label control, e.g.
<mx:Label>
<mx:htmlText><![CDATA[This is an example of <b>bold</b> markup]]></mx:htmlText>
<mx:Label/>
The Text.htmlText reference has a full list of the tags supported and gives detail about the Paragraph and Span tags :
Paragraph tag
The <p> tag creates a new paragraph.
The text field must be set to be a multiline text field to use this tag.
The <p> tag supports the following attributes:
align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Span tag
The <span> tag is available only for use with CSS text styles.
It supports the following attribute:
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Ultimately, there are quite a few ways to do what you want.

Resources