Tag: HTML

Categories
Java

generate HTML MimeMessage with Java

If you want to send some emails with your Java application, you may also want to format these mails using HTML. To achieve this, you have to build a correct multipart message defined in RFC 2045 and RFC 2046 and some more.

The header information of an email, like recipient, subject, etc., differs not from plain text mails:

MimeMessage mimeMessage = new MimeMessage((Session) null);
mimeMessage.setFrom("foo@example.com");
mimeMessage.addRecipient(Message.RecipientType.TO, new InternetAddress("bar@example.com", "Mr. Bar"));
mimeMessage.setSubject("My Subject", "UTF-8");

You should use a common character encoding for subjects. UTF-8 is a recommended and public supported one. This also applies for message content.

Now create the message body:

//create multipart
MimeMultipart content = new MimeMultipart("alternative");
//create simple textpart; content-type text/plain
MimeBodyPart textPart = new MimeBodyPart();
textPart.setText("content which is displayed, if mail client did not support HTML mails", "UTF-8");
//adds text part to multipart
content.addBodyPart(textPart);
//create html textpart; content-type text/html
MimeBodyPart htmlPart = new MimeBodyPart();
htmlPart.setText("<html><body><p>My Mailtext</p></body></html>, "UTF-8", "html");
content.addBodyPart(htmlPart);
//set content of mail to be multipart
mimeMessage.setContent(content);
Categories
Linux

convert Markdown files to PDF in Ubuntu

I love it writing short and medium notes in Markdown. For printing or sharing with others I often use the PDF format.

To convert Markdown files into other formats, like PDF, HTML, etc., you can use pandoc.

Using Latex

Installation in Ubuntu

For installation just install package pandoc. For PDF conversion you need some latex packages too.

sudo apt install texlive-latex-base texlive-fonts-recommended texlive-fonts-extra texlive-latex-extra pandoc

Conversion to PDF

To convert your markdown file test.md into test.pdf you need to run the following command:

pandoc -t latex -o test.pdf test.md

Sometimes I had some problems with “complex” markdown files. Especially if i use nested ordered / unordered lists. One solution is to use the html5 engine of pandoc.

Using HTML

Currently this is my preferred way for conversation, because it is more stable. You can also setup some styling with a simple CSS file.

Installation in Ubuntu

For installation just install package pandoc and the rendered wkhtmltopdf.

sudo apt install wkhtmltopdf pandoc

Conversion to PDF

Now it is like the usage of latex, but with a small different parameter (example is with paper size A4):

pandoc -t html5 -V papersize=a4 -o test.pdf test.md

Further variables can be read in the manual of pandoc.

Categories
HTML/CSS Javascript Polymer/Webcomponents

position:fixed and translate3d

Actually, I thought I understood position:fixed in HTML/CSS, but then I had some trouble in combination with transform:translate3d.  Generally position:fixed of an element means, you will have this element relative to the viewport (the browser window) fixed positioned, regardless any scroll-position.

For example the following HTML-Code

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div style="position:absolute; left: 20px; top: 20px; width: 150px;  background-color: #7FDBFF">
<h1>positioned Box</h1>
<p>
Lorem ipsum ...
</p>
<div style="position:fixed; background-color:#FF851B; left: 50px; top:50px;width:100px;height: 30px;">
Fixed Box
</div>
</div>
<div style="position:absolute; left: 250px; top: 20px; width: 150px;  background-color: #2ECC40">
<h1>translated Box</h1>
<p>
Lorem ipsum...</p>
<div style="position:fixed; background-color:#FF4136; left: 50px; top:90px;width:100px;height: 30px;">
Fixed Box
</div>
</div>

You will see two absolute positioned boxes (an aqua and a green one) and two fixed boxes (orange and red), which are children of the absolute positioned boxes.

boxes1

The CSS-transform API gives now the possibility to use translate3d as a fast left/top replacement. So we can rewrite the green box to:

?View Code HTML
1
2
3
4
5
6
7
8

<div style="position:absolute; transform: translate3d(250px, 20px, 0px); width: 150px;  background-color: #2ECC40">
<h1>translated Box</h1>
<p>
Lorem ipsum...</p>
<div style="position:fixed; background-color:#FF4136; left: 50px; top:90px;width:100px;height: 30px;">
Fixed Box
</div>
</div>

We would expect the same result, but got a different one:

boxes2

You see that the red box is jumped to the right. The reason for this result is due to the fact, that translate3d moves the virtual viewport and so the root of the fixed position-relation. Unfortunately the common function getClientBoundingRect, which gives you the rectangle in the viewport, did not respect the translate3d transformation, so that common elements like Polymers iron-dropdown did not work properly anymore.

Until now I have no common solution for that problem, comments are welcome!

You can see, and play around, with my example on JSFiddle.

And also the polymer example shows the problem.