I'm using an HTML parser library to parse a web page into XML. With the XML I want to select nodes containing text that belong to each other using xPath queries.
Here's an example of the HTML:
<p><span style="font-family: 'Verdana','sans-serif'; font-size: 32pt;"><span style="font-family: 'Verdana','sans-serif'; font-size: 11pt; mso-bidi-font-size: 18.0pt;"> <span style="line-height: 115%; font-family: 'Verdana','sans-serif'; font-size: 36pt; mso-fareast-font-family: Calibri; mso-bidi-font-family: 'Times New Roman'; mso-fareast-language: EN-US; mso-ansi-language: SV; mso-bidi-language: AR-SA;"> </span> VECKA 3</span></span></p><p><span style="font-family: 'Verdana','sans-serif'; font-size: 32pt;"></span><span style="font-family: 'Verdana','sans-serif'; font-size: 11pt; mso-bidi-font-size: 18.0pt;"> 17-21 JANUARI</span></p>
<p style="margin-bottom: 0pt;"><span style="font-family: 'Verdana','sans-serif'; font-size: 11pt; mso-bidi-font-size: 18.0pt;"> </span><span style="font-family: 'Verdana','sans-serif'; font-size: 11pt; mso-bidi-font-size: 18.0pt;">11.30-14.30</span></p>
<p style="margin-bottom: 0pt;"><span style="font-family: 'Verdana','sans-serif'; font-size: 10pt; mso-bidi-font-size: 15.0pt;">MÅNDAG: Parmesangratinerad tungafile med paprikasås</span></p>
<p style="margin-bottom: 0pt;"><span style="font-family: 'Verdana','sans-serif'; font-size: 10pt; mso-bidi-font-size: 15.0pt;"> Biffgryta med syltlök & ris</span></p>
Using xPath on the parsed piece of HTML, I want to select the <span>-node containing the word MÅNDAG, but also the following <span>-node which belongs to it. So for example I want to select the nodes that contain the text: "MÅNDAG: Parmesangratinerad tungafile med paprikasås" and the text "Biffgryta med syltlök & ris".
I think that I want to use an xPath that looks something like this:
"//span[contains(.,'MÅNDAG') or (contains(.,' ') and ../parent-sibling::/span[contains(.,'MÅNDAG')]]"
Any ideas?
In XPath 2.0:
//span[contains(.,'MÅNDAG')/(. | following::span[1])
In XPath 1.0:
//span[contains(.,'MÅNDAG') | //span[contains(.,'MÅNDAG')/following::span[1]
I want to select the <span>-node
containing the word MÅNDAG, but also
the following <span>-node which
belongs to it
An XPath 1.0 expression without node set union:
//span[(.|preceding::span[1])[contains(.,'MÅNDAG')]]
Related
I have html email template and there is an <ul> tag.The bullets of the list does not align properly in outlook windows app but it works fine in the browser.
It needs to be pulled in either to left align exactly or even just within the left margin and should work in both app and browser.
<table class=\"test\" border=\"0\" cellpadding=\"25\" cellspacing=\"0\" width=\"100%\">
<tr>
<td bgcolor=\"#FFFFFF\" style=\"padding-top: 5.25%; padding-right: 5.25%; padding-bottom: 5.25%; padding-left: 5.25%;\">
<ul style=\"margin-left: 20px; padding-left: 0;\">
<li style=\"font-family:'open sans'; color: #252525; font-size: 16px; line-height: 24px; margin:0 0 5px 0;\">
Test content 1
</li>
<li style=\"font-family:'open sans'; color: #252525; font-size: 16px; line-height: 24px; margin:0 0 30px 0;\">
Test content 2
</li>
</ul>
</td>
</tr>
</table>
Giving 2px more to <ul> margin-left is fine for the app but not for the browser.
Try out lists.cm, it's a tool that helps you create bullet lists that work in all email clients.
Alternatively, you could just use tables and <td>'s instead for each <li> - all email clients support padding on them, so you don't need client-specific hacks. Downside is that you will lose semantics for screenreader users.
Margins and paddings are a bit all over the place with email clients. There are defaults, and Outlooks tend NOT to work with <ul> / <ol> margins. So you have to use margins in the <li>.
Furthermore Gmail webmail will set a margin-left on the <li>.
It's best to reset everything if you want consistency. Use the following, and only change the margins in the <li>.
<head>
<!--[if gte mso 9]>
<style>
li {
text-indent:-1em;
}
</style>
<![endif]-->
</head>
<body>
<ul style="margin:0;padding:0;">
<li style="margin:0 0 5px 30px;padding:0;">Point 1</li>
<li style="margin:0 0 5px 30px;padding:0;">Point 2</li>
<li style="margin:0 0 30px 30px;padding:0;">Point 3</li>
</ul>
</body>
I've tried everything I can think of, but I cannot get the whitespace between cells to show in Outlook 2013. This is being sent from NationBuilder. How do I add cellspacing so that it renders in Outlook?
Thank you!
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in --> <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS --> <title>NationBuilder</title> <style type="text/css"> body {
background-color: #ffffff;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Palatino Linotype', serif;
}
body {
color: #333333;
margin: 0;
padding: 0;
}
A:link {
color: #2594aa;
text-decoration: none
}
A:visited {
color: #2594aa;
text-decoration: none
}
A:active {
color: #2594aa;
text-decoration: none
}
table {
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
#bodytable {
border-spacing: 10;
border-collapse: sepatate;
}
#bodytable td {
border-collapse: separate;
}
p {
font-family: chaparral-pro, Helvetica, Arial, sans-serif;
margin-bottom: 8px;
margin-top: 5px;
}
.body-content img {
max-width: 100%;
}
ul {
font-family: font-family: chaparral-pro, Helvetica, Arial, sans-serif;
text-align: left;
}
h1 {
margin-top: 35px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 20pt;
color: #e37c00;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 14pt;
color: #c8d300;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize
}
h3 {
margin-bottom: 0px;
margin-top: 10px;
font-weight: bold;
text-align: left;
font-size: 12pt;
color: #000000;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize;
text-decoration: underline
}
dt {
font-weight: bold;
margin-top: 10px;
margin-bottom: 6px;
}
/* Constrain email width for small screens */
#media screen and (max-width: 600px) {
table[class="container"] {
width: 100%!important;
}
}
/* Give content more room on mobile */
#media screen and (max-width: 480px) {
table[class="container"] {
width: 100%!important;
}
div[class="body-content"]img {
width: 100%;
}
}
/* Styles for forcing columns to rows */
#media only screen and (max-width: 600px) {
/* force container columns to (horizontal) blocks */
table[class="container"] {
width: 100%!important;
}
}
</style> </head> <body style="margin:0; padding:0;" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- 100% wrapper --> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center" valign="top" bgcolor="#ffffff"> <!-- header --> <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#2594aa;"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td width="600" style="padding:20px; font-family:chaparral-pro,Helvetica,Arial,sans-serif;" valign="middle" height="100"> <img src="{{ settings.site.meta_image_url }}" alt="{{ settings.official_name }}" width="120" height="auto" border="0" valign="middle" style="vertical-align:middle;"> <a style="color:#000000;font-weight:bold;text-decoration:none;padding:20px;font-size:28px;" href="{{ settings.site.full_url }}"> {
{
settings.official_name
}
}
</a> </td> </tr> </table> </td> </tr> </table> <!-- ### 600PX CONTAINER ### --> <table style="font-size: 14px;" width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding: 20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;" bgcolor="#ffffff" class="body-content"> {
{
body
}
}
</td> </tr> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding:20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;"> {
{
settings.official_name
}
}
{
% if settings.has_address? %
}
·
{
{
settings.address.one_line
}
}
{
% endif %
}
<br/>This email was sent to <a style="color:#505054;" href="{{ recipient.email }}"> {
{
recipient.email
}
}
</a>. To stop receiving emails,
<a style="color:#505054;" href="{{ settings.site.unsubscribe_url }}">click here</a>. <br/><b>Don't forget to like us on Facebook!</b>
<br/>You can also keep up with {
{
broadcaster.name
}
}
on Twitter,
Facebook or Instagram. </td> </tr> </table> <p style="text-align:center;margin: 20px 40px; font-size: 0.8em;font-family:Helvetica,Arial,sans-serif;">Created with NationBuilder,
software for leaders.</p> <!-- ### 600PX CONTAINER ### --> </td> </tr> </table> <!--/100% wrapper--> </body> </html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>{{ recipient.first_name_or_friend }} --
<h1 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">The
Rogers Park Food Co-op has some exciting upcoming events!</h1>
<table id="bodytable" border="0" cellspacing="10" cellpadding="20" width="100%" style="border-spacing: 10px !important; border-collapse: separate !important; background-color:#ffffff;">
<tbody>
<tr>
<td style="background-color: #f8febf; border-collapse:seperate !important;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Berger Park Sustainability Open House
</h2>
<p>
<strong>Date: April 22, 2016 from 7 - 8:30pm</strong>
<br />
<strong>Location:
Berger Park Cultural Center
<br />
6205 N Sheridan Rd</strong>
</p>
<p>
Come celebrate the renovation of Berger Park,s south lawn! The architects plan will be unveiled. Also, Edgewater organizations committed to sustainability will have presentation tables. Share your ideas for other improvements to your park.
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/177/attachments/original/1460228200/April_22BergerPark2016-SustainOpenHouse.pdf?1460228200">
<img align="right" style="margin: 6px 1px; border: 1px solid black; float: right;" title="BergerSmall.gif" src="BergerSmall.gif" alt="BergerSmall.gif" width="100" height="129" />
</a>
<p>Presentation Tables:</p>Berger Park South Lawn Renovation
<br />Loyola Sustainability Institute Student sustainability projects
<br />Edgewater Environmental Sustainability Project
<br />Monarch butterfly project at Berger Park
<br />LetsGOChicago
<br />Rogers Park Food Co-op
<br />Free Little Libraries
<p>Please RSVP at
https://nextdoor.com/events/il/chicago/earth-month-at-berger-park-sustainability-open-house-581265
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Meet the Farmers
</h2>
<p>
<strong>Date:
April 27, 2016 at 5pm - 7pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/174/attachments/original/1458565305/Meet_the_Farmers.jpg?1458565305">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="MeettheFarmers_sm.jpg" src="MeettheFarmers_sm.jpg" alt="MeettheFarmers_sm.jpg" width="100" height="155" />
</a>
<p>FREE EVENT!</p>
<p>Get some face-time with the local farmers who supply the best Chicago restaurants and Farmers Markets!</p>
<p>Learn about where your food comes from by talking to the people who grow it!</p>
<p>Get 10% off Dinner from Uncommon Ground!</p>
<p>Stay for live musicfrom 8-10 pm.</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Farm Fresh Jams
</h2>
<p>
<strong>Date:
April 27, 2016 at 8pm - 10pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="FarmFresh_sm.jpg" src="FarmFresh_sm.jpg" alt="FarmFresh_sm.jpg" width="100" />
</a>
<p>Fundraiser Concert for the Rogers Park Food Co-op</p>
<p>
<strong>Featuring performances by:</strong>
</p>
<p>Signal-to-Noise</p>
<p>Luna Blu</p>
<p>Abbie & Marlon</p>
<p>Abud: A Bard.</p>
<p>
<strong>Get 10% off Dinner from Uncommon Ground!</strong>
</p>
<p></p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Moah's Ark 4th Annual Plant Sale
</h2>
<p>
<strong>Date:May 7th and 8th</strong>
<br />
<strong>Location:Moah's ark</strong>
<br />
<strong>1839 W Touhy Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="moah.jpg" src="moah.jpg" alt="moah.jpg" width="250" height="188" />
</a>
<p>Our 4th annual plant sale will feature a big variety of heirloom tomatoes and peppers, plus herbs, flowers and more.
</p>
<p>We have several new tomatoes, including 7 varieties of dwarf heirlooms, old favorites like the cherokee purple, green and chocolate, Moah's yellow, and a couple new italian imports.</p>
<p>This is a 2 day event, Saturday and Sunday, which is Mother's Day. Mom's get a free plant.</p>
<p>RSVP to this event so that you will be notified of the full list which i will be putting up soon.</p>
<p>Happy spring!!</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td>
<h2 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">
Click Here For Full Event Listing
</h2>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Exclusive Offers for Co-op Owners!</h2>
<p>In our effort to provide value for our Owners, the Rogers Park Food Co-op is excited to offer the following exclusive deals for owners!</p>
<h3>$50 Discount to Natures Farm Camp</h3>
<p>To celebrate their love of Co-ops, Nature's Farm Camps has decided to offer a $50.00 discount for Natures Farm Camp registrations to the Chicago-area food cooperative members.</p>
<p>
<em>
<strong>Owners will receive a coupon code in an upcoming email.</strong>
</em>
</p>
<p>From naturesfarmcamp.com:</p>
<blockquote>We are an overnight summer camp where kids (ages 8-14) step out of their every day and immerse themselves in nature growing, foraging, cooking, making, building and exploring. Campers do with their hands, head and heart. In the process they
discover more about life and themselves, all while having a blast with new friends in the great outdoors.
</blockquote>
<hr />
<h3>Biggest Slim-Down with Hank: Help The Co-op While Getting Fit!</h3>
<p>Every few months, personal trainer Hank Rouse and his team of coaches run a Biggest Slim Down Contest. This past Holiday Season we had a Maintain Don't Gain Contest. To win cash prizes, all the contestants had to do was maintain their weight
(or even lose weight). I'm so excited to announce an Exclusive Opportunity for RPFC Co-Owners.</p>$25 will be donated to the Rogers Park Food Co-op for each participating Co-Owner who achieves the 3% Body Weight (Loss/Gain) benchmark.
<p>NEW Contest: Begins April 18th</p>
<p>Applications accepted until April 13th.</p>More Information at
http://www.facebook.com/events/495659513953786/
<br />
</td>
</tr>
</tbody>
</table>{{ broadcaster.name }}
<br />
{{ settings.site.full_url }}
</body>
</html>
Here is the HTML: https://jsfiddle.net/63v8cra7/1/
Screenshot from Thunderbird:
From Outlook:
I'm trying to add some text over an image. I've set the position of the image to relative and the position of the text is absolute. It's working completely fine in Firefox but not in Chrome.
All I see in Chrome is an image.
Can anybody help me out in this ?
My code:
<p class="call text-right hidden-xs tel">
Call: 1-800-378-7566
</p>
<img src="img/slider/slider01.jpg" alt="" title="" style="margin-top:-28px; position:relative;" />
this could help you.
added
<p class="call text-right hidden-xs tel">
<a href="tel:+18003787566" style="position: absolute;
top: 50px;
left: 10px;
padding: 6px;
background-color: #292D30;
font-size: 26px;
padding-left: 100px;
padding-right: 127px;
z-index: 999;">Call: 1-800-378-7566</a>
</p>
Added top and left position as well as added z-index.
See the example
http://jsfiddle.net/nanduh/wo2eyhp6/
I am new to the whole SVG and imagemagick, so still learning things as I go. I have this image in a svg format, which I would like to convert to png. This is how the SVG looks like when opened using Chrome:
The original SVG file also has some white spaces, which I would like to trim out. After doing some searching, I found out the "trim" option that can be used in "convert".
I tried the following:
convert -trim example_image.svg example_image.png
Which seems to trim out any unnecessary white spaces and most of the SVG file is converted. However, the text portion of this image is no longer visible in the png file:
I went through some forums and most of them seems to suggest to start by checking the DELEGATES section that I can read using "convert -list configure", and look out for tags such as "freetype" and "gs". So it seems like those two tags are available. Is there anything else I could do to diagnose the issue? I don't necessarily generate these SVG files (it is generated by one of the colleagues at work), so not sure where to look exactly. However, I am attaching a snippet of the SVG "code" that prints the text portion. I hope this might help somebody diagnose the issue:
<g transform="translate(0, 480)">
<g transform="translate(50.000000, 0)">
<switch x="0" y="0">
<foreignObject height="300" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="1150">
<p style="font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">Figure 1. Putative Fusion-translocation event. The 5' (in the fusion) transcript EWSR1-001(ENST00000397938) from the gene EWSR1(ENSG00000182944) on the forward strand is drawn top left with its corresponding breakpoint at 22:29684366. The 3' (in the fusion) transcript FLI1-004(ENST00000525560) from the gene FLI1(ENSG00000151702) on the forward strand is drawn top right with its corresponding breakpoint at 11:128664210. Exons are drawn to scale relative to other exons in the same drawing. Introns are scaled to make up approximately 1/4th of the final drawing. This is predicted to be an IN-frame fusion. Domains include: </p>
<div style="display: table; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-row; font-family: Arial; font-size: 20px; font-weight: bold" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell" xmlns="http://www.w3.org/1999/xhtml">Domain Name</div>
<div style="display: table-cell; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">External identifier(s)</div>
</div>
<div style="display: table-row; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">Ets</div>
<div style="display: table-cell; font-family: Arial; font-size: 20px; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">PF00178</div>
</div>
<div style="display: table-row; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">RRM_dom</div>
<div style="display: table-cell; font-family: Arial; font-size: 20px; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">PF00076</div>
</div>
<div style="display: table-row; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">Znf_RanBP2</div>
<div style="display: table-cell; font-family: Arial; font-size: 20px; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">PF00641</div>
</div>
</div>
</foreignObject>
</switch>
</g>
Your help would be greatly appreciated.
Is there a way how to paste formatted text to ckeditor without styles and preserving semantics?
For example this is what it pastes:
<h1 style="font-family: sans-serif; color: rgb(34, 34, 34); line-height: 18.2000007629395px;">An h1 header</h1>
<p style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: small; line-height: 18.2000007629395px;">Paragraphs are separated by a blank line.</p>
<p style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: small; line-height: 18.2000007629395px;">2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code style="white-space: pre; background-color: rgb(238, 238, 238);">monospace</code>. Itemized lists look like:</p>
<ul style="color: rgb(34, 34, 34); font-family: sans-serif; font-size: small; line-height: 18.2000007629395px;">
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
But I want to paste this:
<h1>An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
If you have the Advanced Content Filter enabled (should be enabled by default), then it will filter the pasted content according to what your editor's configuration allow. Read more in the Content Filtering guide.
However, if you disabled ACF for some reasons, or you want to filter the pasted content differently, then you can create your own CKEDITOR.filter instance and apply it to the pasted data. Read more in Apply CKEditor Advanced Content Filter to a string on how to apply the filter to HTML string.