In my application, I have to fix all the closing tags of the <img> tag as shown below. Instead of closing the <img> with a >, it should close with />.
Is there any easy way to search for all the <img> in this text and fix the > ?
(If it is closed with a /> already then there is no action required).
Other question, if there is no "width" or "height" to the <img> specified, what is the best way to solve the issue?
Download all the images and get the corresponding attributes of width and height, then add them back to the string?
The correct <img> tag is the one that closes with /> and have the valid width & height.
<img align="left" hspace="5" width="150" src="http://s3.dlnws.com/images/products/images/749000/749208-large" alt="" title="">
Apple today unleashed a number of goodies, including giving iMacs and Mac Pros more oomph with new processors and increased storage options. We have those deals today, along with many more items for the Mac lover. Along with the refreshed line of iMacs and Mac Pros, we’ll also look at a number of software deals [...]
<p><img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/0/di" border="0" ismap><br>
<img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/1/di" border="0" ismap></p><img src="http://feeds.feedburner.com/~r/cultofmac/bFow/~4/Mq5iLOaT50k" height="1" width="1">
Regular expressions will solve the problem with closing your tags correctly - make sure whatever you're using to edit your code supports regular expression searching, and then search for something like this (assuming that all of your unclosed image tags end with a ">):
\<img (.*?)"\>
and replace it with this:
<img $1" />
As far as the bit about the width and height attributes, if you're trying to display the images at their regular width and height, you shouldn't need them. The only time you should need width and height is if you're displaying the image at a different size than the original image's size, which doesn't appear to be the case here.
Related
I'm using Tiny 4.9.10 to dynamically generate reports based on templates. Users can create templates which contain placeholders. These placeholders then get swapped out for their actual values when generating the actual report. The placeholders get their style (including font, which is the main issue here) from their enclosing <span>-tag.
When replacing the placeholder with their actual value, we use <br />-tags to insert new lines, since some of the placeholders are almost full reports on their own which need to be structured.
After the placeholders have all been replaced, we inject this dynamically generated content back into a Tiny editor, so as to allow users to make ad hoc changes to the content.
At this point however we noticed that the <span>-tag around a piece of generated content containing <br />-tags gets removed. This is a problem, because the style info that was enclosed in this tag gets removed as well, resulting in problems further down the line when generating a PDF.
What I've tried to work around this:
setting verify_html to false
adding +span[br]/+span[br /] to valid_children
setting forced_root_bloc to div
The first two options did nothing to help me, and while the last one looked promising, it didn't help, because even when using <div>, font info gets enclosed into a child <span>.
I know this is expected behavior, because <span> is an inline tag and so it shouldn't have <br /> tags as children, but I'm currently at a loss for a workaround which allows me to include <br /> tags into my dynamically generated content without losing the style (most importantly the font) of the parent tag.
So I solved this by replacing the <span> tags by <div> tags when we swap out the placeholders by using some regex looking for spans that enclose a <p>...<\p> or a <b />. This stops Tiny from throwing away the <span> tags when they contain either of these enclosed tags
TinyMCE considers the <span> <br /> </span> construct an empty space and deletes it in favor of optimization.
I may be late, but you can also try using this callback in the setup option to stop the editor from removing empty spans:
setup: function(editor) {
editor.on('PreInit', function() {
editor.schema.getElementRule('span').removeEmpty = false;
});
}
The Doxygen don't say anything about the creation of a particular title (or even change de the size of a simple text... lame). My search are surprisingly infructuous about this simple task:
I search a way to put a bigger title on the main page. This title must be huge, squared and centered, here's my actual code:
<div align="center">
<table>
<tr><td> {/Huge **Huge sized title**}
</table>
</div>
Everything work except the size, I tried it outside, font size="X" and the # don't work either.
How to use it correctly?
I'm making an e-mail template. I want to make a line below the heroImage.jpg. The line cannot be a part of the heroImage.jpg as there are several other lines in the e-mail and they should all look the same.
The way I do it is that I set a border-bottom to a table row in which heroImage.jpg is placed.
My problem is that in GMAIL (when the e-mail is delivered, but not in OUTLOOK for example) I get a thin ribbon of space between heroImage.jpg and my line. I think it is because GMAIL does not recognize valign nor vertical-align and thus the heroImage.jpg is aligned top (probably default option) and the colour of #heroImageBlock is thus visible.
But how it should be is that heroImage.jpg would be aligned bottom and right below to it would be my line (no annoying space in between).
Is there a way to force GMAIL to recognize valign or vertical-align and get rid of that annoying space?
HTML
<tr>
<td align="center" valign="bottom" id="heroImageContainer">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="heroImageBlock">
<tr class="border-bottom">
<td>
<img src="images/heroImage.jpg" alt="" height="150" width="600" id="heroImage" />
</td>
</tr>
</table>
</td>
</tr>
CSS
#heroImageBlock td{vertical-align:bottom;}
I've tried to assign vertical align to all other elements too (see below) but it does not work.
#heroImageContainer {vertical-align:bottom;}
#heroImageBlock{vertical-align:bottom;}
#heroImageBlock tr{vertical-align:bottom;}
In OUTLOOK image and a red line are nicely together as it should be:
In GMAIL there is an annoying gray line between the image and the red line.
Valign/vertical align isn't your issue here. Since you're specifically setting a block image, you shouldn't have anything to vertically align. This points to another issue to do with the way you're declaring the image, but I'll get to that soon.
FYI, it's best if you give us more scope or more code. You're referencing a border-bottom class, but we can't see what properties to render that border are. Same goes for the id on the image. If any properties are being set on classes or IDs in the head, it's best to include those for us to help you debug.
Here are my suggested improvements to try and fix this.
1. Don't set any properties or classes on table rows. They aren't designed for that use. Moving the border may fix the issue but even if it doesn't, tables and table cells are where you should be adding these. In this case, move the border-bottom class declaration to the table cell under the row.
2. Have you tried setting display:block; on the image? By default, images will be declared as inline and you have to specifically set is as block. When inline, spacing can appear below images and will throw spacing and dimensions out when trying to be pixel perfect, or in your case aligning content directly below.
Let me know how those go.
Try adding these styles to the parent element:
font-size:0px and line-height:0px.
By default Gmail tends to add its own spacing. The above should remove it.
I'm having some trouble getting {f:uri.image} to work, this doesn't render:
<img src="{f:uri.image(src:person.firstImage,treatIdAsReference:1, width:150c,height:150c,cropVariant:'square')}"/>
person.firstImage is of type TYPO3\CMS\Extbase\Domain\Model\FileReference.
Maybe you spot the error?
On the other hand, this works:
<f:image class="image-author" image="{person.firstImage}" width="150c" height="150c" cropVariant="square"/>
... but then the output will always feature the width="150" height="150" html attributes, which will conflict with responsive CSS.
Is there a way to prevent f:image from outputting with and height in the source tag? Probably not, if I look at the VH?
You need to escape the width and height when adding c
<img src="{f:uri.image(src:person.firstImage,treatIdAsReference:1, width:'150c',height:'150c',cropVariant:'square')}"/>
Would also go for:
<img src="{f:uri.image(image:person.firstImage,width:'150c',height:'150c',cropVariant:'square')}"/>
Does anyone know if it's possible to disable the data detectors for phone numbers, email addresses etc in a UIWebView, for specific HTML elements only?
I'd like the detectors to be active for most of the content loaded into the UIWebView, but disable it in certain areas.
If this is possible, I'm assuming it would be achieved by using an HTML attribute in the loaded content (rather than setting some sort of UIWebView property), e.g.
<html>
<body>
<h1 datadetectors="off">Header text with number 9123 3456</h1>
<p>Body text with number 9872 4567</p>
</body>
</html>
In this example, the number in the <p> would be detected as a phone number due to setting webview.dataDetectorTypes = UIDataDetectorTypeAll, whereas the number in the <h1> would not.
you should use <meta name = "format-detection" content = "telephone=no">
Hope it helps
you can put the attribute
x-apple-data-detectors="false"
but unfortunately this seems to work only for tags.
I ended up using this solution:
666-777-777
besides disabling the telephone numbers "detection", this also prevents adresses and other detection to run.
If you control the web content you can use jscript (via jquery) to write your own data detectors. If you don't control the content you could insert and execute the jscript using stringByEvaluatingJavaScriptFromString: once webViewDidFinishLoad: is called.
In WKWebView Disable all Data Detector Types in Attributes inspector. This will solve your problem
Since an "a" tag will be inserted for you with the x-apple-data-detectors in it, you could write the tag yourself with x-apple-data-detectors set to false.
Original code:
<div class="my_time">17:02</div>
will be transformed to:
<div class="my_time">
<a href="x-apple-data-detectors://1" dir="ltr"
x-apple-data-detectors="true"
x-apple-data-detectors-type="calendar-event"
x-apple-data-detectors-result="1"
style="color: rgb(169, 169, 169);
text-decoration-color: rgba(169, 169, 169, 0.258824);">14:18
</a>
</div>
You can prevent this by writing your code as following...
<div class="my_time">
<a x-apple-data-detectors="false" style="text-decoration: none">17:02</a>
</div>