link anchors in HTML email - html

I am trying to make a newsletter email with an idnex that has links to different anchors in the mail, but so far, it doesn't seem to work in any client. This is the code:
<ul style="list-style: none; margin: 0px; padding: 0px; ">
<li>Sehen wir uns auf der ISH?</li>
<li>Sehen wir uns auf der ISH?</li>
<li>Sehen wir uns auf der ISH?</li>
<li>Sehen wir uns auf der ISH?</li>
<li>Sehen wir uns auf der ISH?</li>
</ul>
...
<a name="anchor1" id="anchor1">foo</a>
What?s even weirder, in GMAIL my ID tag disappears and my name tag gets some sort of weird prefix, like "124335132_anchor1". What could I do?

you know how usually you have the string
<div id="boom">...
and you want to anchor link to that from somewhere else, you would enter
so now you would use a name tag in addition to your destination.
<a name="boom"></a><div id="boom">...
Viola! anchor link in html email.

Email clients aren't web browsers or designed to be. They leave off vast swathes of things you are likely to consider "pretty basic".
Make all links absolute and plan for them to open in a web browser.

To work with outlook 2010, it has to be like that:
Jump to section!
<p>A bunch of content</p>
<a name="section1">An anchor!</a>

not sure i'm getting what you mean.. but, it looks like you wanted to send MIMEBody as an email content, so the email looks like an html format.. if it the case, here is some piece from my java code:
#Override
public void coba() {
try {
MimeMessage message = new MimeMessage(mailSession);
message.setSubject("Whatever");
message.setRecipient(RecipientType.TO, new InternetAddress("SomeEmail#email.com", "SomeName Name"));
//
// This HTML mail have to 2 part, the BODY and the embedded image
//
MimeMultipart multipart = new MimeMultipart("related");
// first part (the html)
BodyPart messageBodyPart = new MimeBodyPart();
String htmlText = "<div style=\"width:800px; background-color:#525252\"><h1>Header</h1></div><br /><div style=\"width:200px; background-color:#ff0000; float: left\"><h3>Navigation Panel</h3><ul><li>link here</li><li>link here</li></ul></div><div style=\"width:600px; background-color:#727272; float: left\"><h3>Content</h3><p>blabla blabla blabla blabla blabla</p><br /><img src=\"cid:image\" /></div>";
messageBodyPart.setContent(htmlText, "text/html");
// add it
multipart.addBodyPart(messageBodyPart);
// second part (the image)
messageBodyPart = new MimeBodyPart();
DataSource fds = new FileDataSource("C:/img/lion.JPG");
messageBodyPart.setDataHandler(new DataHandler(fds));
messageBodyPart.setHeader("Content-ID","<image>");
// add it
multipart.addBodyPart(messageBodyPart);
// put everything together
message.setContent(multipart);
Transport.send(message);
//System.out.println("Successfully Send Email(" + subject + ") to " + emailAddress);
} catch(Exception e) {
e.printStackTrace();
}
}
i send an email with html format, here is screen shot the message content on gmail
here is the screen shot
hopefully it have any use for you..

Related

Laravel: How to change div font

I am displaying a greeting to the user on my dashboard page, how can I change the first 2 words (the div) to be a larger, maybe even a different font? Can I add a space margin underneath too, to separate the greeting from the rest? (This is me trying to learn Laravel) Thank you :)
So far I've tried:
<div>
#isset($user)
<style type="text/css">
#font-face {
font-family: Muli-Bold;
src: url('{{ public_path('fonts/materialdesignicons-webfont.ttf') }}');
} // I guess I need an #endfont-face here, but for some reason my ide wasn't recognizing it
</style>
Hallo {{ $user->name }},
#endisset
</div>
<div>Willkommen im <b class="text-gray-700">Formular-Editor!</b></div>
<div>Neue Formulare kannst du über den Tab <i><b class="text-gray-700">"Editor"</b></i> oben in der Leiste anlegen. Hier kannst Du auch bestehende Formulare bearbeiten.</div>
(I've also tried putting "hello user" into the style component/tag)
also like this:
<div font-size="3">
Hallo {{ $user->name }}
</div>
But they haven't worked. What's the best way to make it work without insalling trailhead?
Move your #isset($user) to wrap the <div> element and apply your styles on the <div>. There is no point performing #isset($user) inside the <div> as all that will do is render a redundant empty element.
#isset($user)
<div style="font-family: Muli-Bold; font-weight: bold; text-decoration: underline; padding-bottom: 10px;">
Hallo {{ $user->name }},
</div>
#endisset
You can apply any other css styles you want in the same manner, however, it would be better to define one or more classes which encapsulate the required styling and then apply the class to your elements.

How do I select unnamed node in HTML or XML using XPath?

I try to access the text inside the <dl> environment following the <p> environment with the text "Bedeutungen:" inside. I try to specify an XPath to select this specific <dl> node.
<p><span style="visibility:hidden" id="Bedeutungen"><span id="Anker:Bedeutungen"></span></span></p><p style="margin-bottom:-0.5em; font-weight:bold;" title="Sinn und Bezeichnetes (Semantik)">Bedeutungen:</p>
<dl><dd>[1] roh essbare, meist saftige Früchte, die von Bäumen, Sträuchern und mehrjährigen Stauden stammen, mit überwiegend süßlichem oder säuerlichem, "fruchtigem" Geschmack</dd></dl>
This is an excerpt from the German wiktionary entry for Obst "fruit" (a link).
You can select the targeted element based upon the label that precedes it:
This XPath,
string(//dl[preceding-sibling::*[1][self::p][normalize-space()='Bedeutungen:']])
will return the string value of the dl element with an immediately preceding sibling p element with a space-normalized string value equal to 'Bedeutungen:':
[1] roh essbare, meist saftige Früchte, die von Bäumen, Sträuchern und mehrjährigen Stauden stammen, mit überwiegend süßlichem oder säuerlichem, "fruchtigem" Geschmack

ReactJS - JSON and HTML markup

I am new to ReactJS. I am looping through JSON and need to include some links.
My JSON looks like this:
"text": ["Nähere Informationen zu den Funktionalitäten der Plattform und der Dienste finden Sie unter /features."],
But when I loop through and expose the data, it just exposes plain text HTML.
<div className='small-53 medium-54 large-55 medium-offset-1 large-offset-1 columns end'>
<p className='text--uppercase text--book border--solid--bottom-red padding-bottom-10'>
{item.title}
</p>
</div>
Try:
<div className='small-53 medium-54 large-55 medium-offset-1 large-offset-1 columns end'>
<p className='text--uppercase text--book border--solid--bottom-red padding-bottom-10' dangerouslySetInnerHTML={ {__html: item.title} }/>
</div>
You can read more about dangerouslySetInnerHTML here

Some links with accented characters and dot doesn't open on Chrome, Explorer and Edge

I'm dealing with an issue at my work that I had never seen. When I'm developing I use always Firefox and generating an HTML by a XSL on JAVA I tested the links on Firefox and ALL works, even if they have or not accented characters or dots at the end of the URL (https://..........some words**.**) When you click on the link it sends you to the bottom of the page where is the info of that link (https://...............#name displayed on the clicked link
But today, my boss openned an issue telling me that on Chrome, Edge and Explorer, the links with accented characters or dots on the URL can't be openned. So I tried click some links and on Chrome, some works and others not work..... On Explorer and Edge none works. I'm very rookie dealing with display browser problems.
So, I've checked the code that transforms the XML template to HTML and I tried to add this two lines:
transformer.setOutputProperty(OutputKeys.METHOD, "text/html");
transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
(With these two lines, the browser shows a ? instead the accented characters, I don't know why)
Moreover, on the XML template I've added:
<xsl:template match="/">
<html>
<head>
<meta charset="UTF-8"></meta>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </meta>
</head>
...... more template code ......
But the result it's the same. On Firefox all links work, on Chrome some yes and some no, on Explorer and Edge none of them.
Why it works on Firefox and on the rest of all no?
Regards.
------------- UPDATE -------------
The file it's generated by a desktop application and creates a html file that it's opened at the end of the process by the default browser of the system.
I thought that the problem was not encoding on UTF-8, but I've changed the encondig to the original (ISO-8859-1) because the result it's the same.
The code is:
public URL createHTML(ReportValidationTO validationTO) throws IOException, SAXException, IntrospectionException {
try {
PATH_XML = File.createTempFile("validacion", ".xml").getAbsolutePath();
String path_xsl = ConfigurationParametersManager.getParameter(PATH_XSL);
BeanReader reader = new BeanReader();
reader.registerBeanClass("validation", ReportValidationTO.class);
BeanWriter bWriter = initHTML();
AttributeDescriptor a1 = new AttributeDescriptor("validationName");
ElementDescriptor e1 = new ElementDescriptor();
e1.addAttributeDescriptor(a1);
XMLBeanInfo xmlInfo = new XMLBeanInfo(ReportValidationTO.class);
xmlInfo.setElementDescriptor(e1);
bWriter.write("validationTO", validationTO);
bWriter.flush();
InputStream inputXSL = getClass().getResourceAsStream(path_xsl);
URL retorno = (URL) transformToHTML(PATH_XML, inputXSL);
return retorno;
} catch (Exception e) {
logger.info("No se pudo cargar el archivo ");
logger.info("El error fue : " + e.getClass().getName() + " " + e.getMessage());
return null;
}
}
private BeanWriter initHTML() throws IOException, MissingConfigurationParameterException {
FileWriter fWriter = new FileWriter(PATH_XML);
BeanWriter bWriter = new BeanWriter(fWriter);
bWriter.setIndent("\t");
String path_xsl = ConfigurationParametersManager.getParameter(PATH_XSL);
URL url_xsl = getClass().getResource(path_xsl);
String encoding = "<?xml version=" + "\"1.0\"" + " encoding=" + "\"ISO-8859-1\"" + " standalone=" + "\"yes\"" + "?>";
String xslFile = "<?xml-stylesheet type=" + "\"text/xsl\"" + " href=" + "\"" + url_xsl + "\"" + "?>";
bWriter.writeXmlDeclaration(encoding);
bWriter.writeXmlDeclaration(xslFile);
return bWriter;
}
And then:
private URL transformToHTML(String sXMLData, InputStream inputXSL) {
try {
Source xmlSource = new StreamSource(new File(sXMLData));
Source xsltSource = new StreamSource(inputXSL);
StringWriter cadenaSalida = new StringWriter();
Result bufferResultado = new StreamResult(cadenaSalida);
TransformerFactory factoriaTrans = TransformerFactory.newInstance();
Transformer transformador = factoriaTrans.newTransformer(xsltSource);
transformador.setOutputProperty(OutputKeys.METHOD, "html");
transformador.setOutputProperty(OutputKeys.ENCODING, "ISO-8859-1");
transformador.transform(xmlSource, bufferResultado);
File salida = File.createTempFile("validacion", ".html");
FileOutputStream out = new FileOutputStream(salida);
byte[] bytesSalida = cadenaSalida.toString().getBytes();
out.write(bytesSalida);
out.close();
URL url = salida.toURI().toURL();
return url;
} catch (Exception e) {
logger.info("\nERROR EN TRANSFORM HTML VALIDACIONES");
logger.error(LoggerHelper.getStackTrace(e));
return null;
}
}
------- Update with some HTML code -------
<font face="Verdana" color="#003399"><b>Title Example</b></font>
<ul type="disc">
<li>
<font size="-1" face="Verdana">SERIALNUMER2: Frase con acentos, el estado está en ejecución</font><a><font size="-1" color="red" face="Verdana">
[Fails:
3
]
</font></a>
</li>
</ul>
<a name="Linked Example"></a><b><font size="+1" face="Verdana">After click on the second link from above, it should send you here</font></b>
<hr color="black" WIDTH="100%">
<br>
<a name="Link 1: Frase con acentos, el estado est%C3%A1 en ejecuci%C3%B3n"></a><b><font size="-1" face="Verdana">Validacion:</font></b><font size="-1" face="Verdana">SERIALNUMER2: Frase con acentos, el estado está en ejecución</font>
<br>
<b><font size="-1" face="Verdana">Solution:</font></b><font size="-1" face="Verdana">None</font>
<br>
<br>
<table WIDTH="100%" BORDER="1">
<caption>
<font size="+1" face="Verdana" color="red">Error list</font>
</caption>
<tr>
<th align="LEFT" bgcolor="dddddd"><b>column1</b></th><th align="LEFT" bgcolor="dddddd"><b>column2</b></th><th align="LEFT" bgcolor="dddddd"><b>column3</b></th><th align="LEFT" bgcolor="dddddd"><b>column4</b></th><th align="LEFT" bgcolor="dddddd"><b>column5</b></th><th align="LEFT" bgcolor="dddddd"><b>column6</b></th><th align="LEFT" bgcolor="dddddd"><b>column7</b></th>
</tr>
<tr>
<td align="LEFT">2000</td><td align="LEFT">15</td><td align="LEFT">019</td><td align="LEFT">001</td><td align="LEFT">1087</td><td align="LEFT">0</td><td align="LEFT">B</td>
</tr>
<tr>
<td align="LEFT">2000</td><td align="LEFT">15</td><td align="LEFT">019</td><td align="LEFT">001</td><td align="LEFT">1113</td><td align="LEFT">0</td><td align="LEFT">B</td>
</tr>
<tr>
<td align="LEFT">2000</td><td align="LEFT">15</td><td align="LEFT">069</td><td align="LEFT">001</td><td align="LEFT">125</td><td align="LEFT">0</td><td align="LEFT">B</td>
</tr>
</table>
<br>
<b><font size="-1" color="#FF0000" face="Verdana">
Total:
3
fail(s)
</font></b>
<br>
<b><font size="-1" face="Verdana">
The end
:
</font></b><b><font color="red" size="-1" face="Verdana">Problems found</font></b>
On the snippet, here:
href="#Link 1: Frase con acentos, est%C3%A1 en ejecuci%C3%B3n"
and here:
name="Link 1: Frase con acentos, el estado est%C3%A1 en ejecuci%C3%B3n"
To make it work on Edge, I need replace %C3%A1 with a and %C3%B3 with o if you want to get redirected to the position on the page where are the details of the link.
So what is the aim, writing out a HTML file with the Java Transformer? In which encoding? And if you want to write out a file why are you using a StringWriter in between? Consider to declare in the XSLT with e.g. <xsl:output method="html" encoding="UTF-8"/> which output method and encoding you want, then, to write with your Transformer to the HTML file named validacion.html simply create a new StreamResult("validacion.html") (https://docs.oracle.com/javase/8/docs/api/javax/xml/transform/stream/StreamResult.html#StreamResult-java.lang.String-)and pass that to the transform method. And don't put any encoding info (like <meta http-equiv="content-type" content="text/html; charset=UTF-8"> literally into the HTML your XSLT creates, the Transformer will do its job based on the xsl:output directive, as long as you let it do its job with properly used StreamResult. Trying to create a temporary StringWriter result and converting a string to bytes to write them out to a FileOutputStream is not necessary and probably causing encoding/decoding inconsistency.
<font>
is depreciated. Use css font-family instead. Web browsers have a default font-family that they will fall back to if any of the css font-families are not installed on the OS. IE has an accessibility setting to "Ignore font styles specified on web pages".
Wikipedia uses this style rule.
.uc {
font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
"Chrysanthi Unicode", "Bitstream Cyberbit",
"Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
"Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
"Lucida Sans Unicode";
font-family /**/:inherit; /* resets fonts for everyone but IE6 */
}
add the uc class to the body tag.
To debug your web page output use the DOM Explorer of the dev tool, to inspect the css rules applied to the element or textContent of an element.
Ok, finally I got the links work. Thanks to Rob Parsons and Martin Honnen
The problems where these two:
The URL at href was being generated with spaces (thanks Martin)
href="#Link 1: Frase con acentos, est%C3%A1 en ejecuci%C3%B3n" <- I removed the spaces on the XSLT with translate(validationName, ' ','-')
On the reference of the href link as these was a legacy code, there was name but in HTML5 it's deprecated so now you must use "id" so here:
I changed:
**name**="Link 1: Frase con acentos, el estado est%C3%A1 en ejecuci%C3%B3n" (also removed spaces with translate(validationName, ' ','-'))
by
**id**="Link 1: Frase con acentos, el estado est%C3%A1 en ejecuci%C3%B3n" (also removed spaces with translate(validationName, ' ','-'))

Reactjs json looping image path not loading

I am new to reactjs - I am keen to retain all the content from json - but I am having an issue with the images.
So the json looks like this:
"items" : [
{
"title" : "Projekt ausschreiben",
"description" : "Schreiben Sie Ihr Projekt aus und zeigen Sie es einer handverlesenen Gruppe von Fachexperten",
"image" : "/img/home/works_emp_01.png"
},
{
"title" : "15 Minuten Video-Gespräch",
"description" : "Führen Sie eine unverbindliche Unterhaltung mit 3 vorselektierten Anwälten",
"image" : "/img/home/works_emp_02.png"
},
{
"title" : "Transparente Zusammenarbeit",
"description" : "Erhalten Sie einen bindenden Kostenvoranschlag und arbeiten Sie online zusammen",
"image" : "/img/home/works_emp_03.png"
}
]
and then I've tried to loop through the markup on the template like this.
In a previous research it was suggested to use a require.context function to get the image paths defined. - but this isn't working
const pathToImages = require.context('./src', true)
{
lang.howTiles[0].items.map(function (item, index) {
return (
<div key={index}>
<div className='small-60 columns grid__row--offset--30 show-for-small-only'> </div>
<div className='small-45 medium-20 small-centered medium-uncentered columns'>
<div className='row'>
<div className='small-60 medium-45 small-centered columns'>
<div className='relative-container'>
x<img src={pathToImages(imagesArray[index], true)} />x
<img className='centered' src={imagesArray[index]} style={{maxWidth: '50%', marginLeft: '25%'}} />
<h3 className='text--bold text--center' style={{marginTop: '25px'}}>{item.title}</h3>
<p className='text--center text--font-size-14' style={{marginTop: '15px'}}>{item.description}</p>
</div>
</div>
</div>
</div>
</div>
)
})
}
check if yours src={ "../your_path_to_image" } works as expected at all.
then check lang.howTiles[0].items for same values. 100% something lost in translation here.
anyway i dont get why ya use require.context('./src', true) ?? it just loads images separate from div src
..maybe helpfull https://github.com/facebookincubator/create-react-app/issues/517
make simple array with your image paths and in render function just one div with map and src={item} to check 100% if it path problem or more .. i still got strong feeling of that is problem.
btw. in mentioned older thread there already shows up some problems with this approach.
and i still see no reason to use require.context there if ya simply want add dynamic path to view render.
as i understand web packs require` it runs per build and do all magic paths related job etc.. but it will run in trouble when dynamic path names given
gaearon commented on Mar 10
Is there a problem with explicitly importing them in the code? After all require.context is just sugar for doing that.
here is my code example how to deal with dynamic paths:
var some_path = ( some_value ) ? ${root_path}/0${other_value + tag.toUpperCase()}_Active.svg : default_path;
return <div className={class_names.join(' ')} >
<div className="some class name">
<img src={some_path} alt="image" />
</div>
</div>;
and with array
return (
<div className="class name">
{my_array.map(function( path ){
return <img src={ path } alt="image" />
})}
</div>
);