<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>deadlime.project &#187; HTML</title>
	<atom:link href="http://deadlime.hu/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://deadlime.hu</link>
	<description>squeezed out</description>
	<lastBuildDate>Tue, 24 Jan 2012 21:54:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Dőlt rémálom</title>
		<link>http://deadlime.hu/2006/10/12/dolt-remalom/</link>
		<comments>http://deadlime.hu/2006/10/12/dolt-remalom/#comments</comments>
		<pubDate>Thu, 12 Oct 2006 03:47:18 +0000</pubDate>
		<dc:creator>kriz</dc:creator>
				<category><![CDATA[nincs kategória]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Internet Explorer]]></category>

		<guid isPermaLink="false">http://deadlime.hu/2006/10/12/dolt-remalom/</guid>
		<description><![CDATA[Az új dizájn átpakolása során találkoztam egy érdekes problémával. Talán mondanom sem kell, hogy ez az érdekes probléma Internet Explorer alatt jelentkezett, és először fogalmam sem volt arról, hogy mi a fene baja lehet az oldalnak. A hibás részt először sikerült leszűkítenem egy bejegyzésre, aztán azon belül is az egyik bekezdésre, ami végig dőlt betűvel [...]]]></description>
			<content:encoded><![CDATA[<p>Az új dizájn átpakolása során találkoztam egy érdekes problémával. Talán mondanom sem kell, hogy ez az érdekes probléma Internet Explorer alatt jelentkezett, és először fogalmam sem volt arról, hogy mi a fene baja lehet az oldalnak. A hibás részt először sikerült leszűkítenem egy bejegyzésre, aztán azon belül is az egyik bekezdésre, ami végig dőlt betűvel volt írva. Elég egyszerűen reprodukálható dologról van szó, ezért nézzük is rögtön a hozzá tartozó példakódot:</p><span id="more-82"></span>

<pre class="code prettyprint lang-HTML">&lt;div class=&quot;valami&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/div&gt;
&lt;div class=&quot;valami&quot;&gt;Lorem ipsum &lt;em&gt;dolor sit amet&lt;/em&gt;, consectetuer adipiscing elit.&lt;/div&gt;</pre>

<p>Mint az látható, nem is kell feltétlen az egész bekezdésnek dőltnek lennie, elég ha egy sor vége és a következő sor eleje az.</p>

<pre class="code prettyprint lang-CSS">.valami {
	width: 150px;
	background: #DDD;
	color: #777;
	text-align: justify;
	margin: 2px 0;
}</pre>

<p>A másik fontos dolog a <code>text-align: justify;</code> sor, szimpla balra vagy jobbra igazítás mellett semmi gond nincs a dőlt betűkkel. <a href="http://deadlime.hu/wp-content/uploads/2006/10/italic-justify-ffx.gif">Itt pedig egy kép is látható</a>, hogy ennek a dolognak hogy kellene kinéznie (van egy 10px-es padding is, amit a kódból kihagytam, mert nem befolyásolja a dolog működését).<br/>
Természetesen <a href="http://deadlime.hu/wp-content/uploads/2006/10/italic-justify-ie.gif">az IE máshogy értelmezi a világot</a>, és valami úton módon a második bekezdés 4px-el szélesebbre sikerül neki, mint ami elfogadható lenne.</p>

<p>Megoldás? Szerencsére az is akad, akár több is. Választhatjuk azt, hogy az IE számára másfajta szabályokat adunk az <code>&lt;i&gt;</code> és az <code>&lt;em&gt;</code> tageknek, hogy ne legyenek dőltek. Csinálhatjuk azt, hogy a sorkizárt bekezdések IE-ben balra legyenek igazítva. Ha viszont minden áron dőlt betűstílust akarunk használni sorkizárt bekezdésben, akkor ez a kis kibővítés megoldja a problémánkat, amire <a href="http://archivist.incutio.com/viewlist/css-discuss/45539">itt leltem rá</a>:</p>

<pre class="code prettyprint lang-CSS">.valami {
	width: 150px;
	background: #DDD;
	color: #777;
	text-align: justify;
	margin: 2px 0;

	overflow: visible;
	height: 1em;
}</pre>

<p>Természetesen a normális böngészők nem szeretik látni ezt a két sort, tehát úgy használjuk, hogy ők ne lássák, vagy számukra felül legyen definiálva (IE feltételes megjegyzések, !important, stb.). Remélem sikerült megspórolnom az érintettek számára pár percnyi bugvadászatot.</p>]]></content:encoded>
			<wfw:commentRss>http://deadlime.hu/2006/10/12/dolt-remalom/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Csatolt fájl küldése PHP-ben</title>
		<link>http://deadlime.hu/2006/05/25/csatolt-fajl-kuldese-php-ben/</link>
		<comments>http://deadlime.hu/2006/05/25/csatolt-fajl-kuldese-php-ben/#comments</comments>
		<pubDate>Thu, 25 May 2006 14:04:34 +0000</pubDate>
		<dc:creator>kriz</dc:creator>
				<category><![CDATA[nincs kategória]]></category>
		<category><![CDATA[csatolt fájl]]></category>
		<category><![CDATA[email]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://deadlime.hu/2006/05/25/csatolt-fajl-kuldese-php-ben/</guid>
		<description><![CDATA[Talán sokaknak okozott már gondod a PHP kicsit fapados, viszont ennél fogva nagyon jól testre szabható mail() függvénye. Senki se szereti az ide vonatkozó RFC-ket túrni azért, hogy tudjon küldeni egy HTML levelet, vagy hogy egy képet tudjon csatolni a kiküldött levélhez. A továbbiakban megnézzük, hogyan tudunk felépíteni egy HTML levelet, amihez egy képet csatoltunk [...]]]></description>
			<content:encoded><![CDATA[<p>Talán sokaknak okozott már gondod a PHP kicsit fapados, viszont ennél fogva nagyon jól testre szabható mail() függvénye. Senki se szereti az ide vonatkozó RFC-ket túrni azért, hogy tudjon küldeni egy HTML levelet, vagy hogy egy képet tudjon csatolni a kiküldött levélhez.</p>

<p>A továbbiakban megnézzük, hogyan tudunk felépíteni egy HTML levelet, amihez egy képet csatoltunk hozzá. A dolog ott bonyolódik meg, hogy úgy szeretnénk azt a HTML levelet kiküldeni, hogy akinek az e-mail olvasója nem támogatja az ilyen leveleket az is el tudja majd olvasni. Azaz alternatívaként a levélben meg kell adnunk a sima szöveg változatot is.</p><span id="more-58"></span>

<p>
<div class="post-image image-left"><img id="image59" src="http://deadlime.hu/wp-content/uploads/2006/05/level_felepitese.gif" alt="A küldendő levél felépítése"/></div>

A bal oldalamon látható, hogy hogyan fog felépülni az e-mail maga. A dolog lényege, hogy valami egyedi karaktersorozatot tartalmazó elválasztó egységekkel több részre bontjuk a levél tartalmát, és ezeknek a részeknek a típusát és azt, hogy az e-mail olvasó hogy kezelje őket, külön megadhatjuk. Tehát a levél kezdetben így fog kinézni:</p>

<pre >--boundary_mixed
ide jön majd a levél szövege

--boundary_mixed
ide jön majd a kép

--boundary_mixed--</pre>

<p>A "boundary_mixed" az egyedi azonosító, amivel daraboljuk a levelet. Új blokk kezdésénél két kötőjelet írunk az elválasztó elé, ha pedig le akarjuk zárni az utolsó blokkot, akkor az elválasztó elé és mögé is írunk két kötőjelet. A dolog ott bonyolódik csak meg egy picit, hogy a levél szövegét is több részre kell bontani majd, tehát egy lépéssel később a levél tartalma már így fog kinézni:</p>

<pre class="code">--boundary_mixed
Content-Type: multipart/alternative; boundary=boundary_alt

--boundary_alt
a levél sima szövege

--boundary_alt
a levél html szövege

--boundary_alt--

--boundary_mixed
ide jön majd a kép

--boundary_mixed--</pre>

<p>Mint látszik, az első blokk elején megadtuk a blokk tartalmának a típusát (ezt majd a többi blokk kezdetnél is meg kell majd adnunk), amiben definiáltunk egy új elválasztó elemet. A multipart/alternative típus tulajdonsága, hogy a benne felsorolt blokkokból azt jeleníti meg, amelyiket a felhasználó e-mail olvasója támogat. Épp ezt akartuk elérni, hogy ha a kliens nem támogatja a HTML alapú leveleket, akkor a sima szöveget kapja meg. A levél tartalma így fog kinézni, miután mindenhol megadtuk a megfelelő fejléc elemeket:</p>

<pre class="code">--boundary_mixed
Content-Type: multipart/alternative; boundary=boundary_alt

--boundary_alt
Content-Type: text/plain; charset=iso-8859-2
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

a levél sima szövege

--boundary_alt
Content-Type: text/html; charset=iso-8859-2
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

a levél html szövege

--boundary_alt--

--boundary_mixed
Content-Type: image/gif; name=image.gif
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=image.gif

a kép base64-el elkódolva

--boundary_mixed--</pre>

<p>A multipart résztől eltekintve a Content-Type fejléc teljesen hasonlóan viselkedik, mint a HTML-es fejlécek. A Content-Transfer-Encoding határozza meg, hogy milyen formátumban van az adott szöveg abban a blokkban. Kép esetén ez egy base64-es elkódolást jelent, szöveg esetén a quoted-printable értéket használjuk, aminek az esetén a blokk az ASCII karakterkészlet nyomtatható karaktereiből álló karakterláncot fog tartalmazni. A Content-Disposition azt adja meg, hogy a blokk a levél megjelenítésekor hogyan legyen kezelve (csatolt állományként (attachment), vagy jelenjen meg az e-mailben (inline)). A levél tartalma már megvan, most már csak a levél fejlécét kell megadnunk, ami annyiban módosul, hogy ott kell definiálnunk az első elválasztó elemünket (boundary_mixed) és meg kell adnunk a MIME verzióját:</p>

<pre class="code">From: a levél feladója
MIME-Version: 1.0
Content-type: multipart/mixed; boundary=boundary_mixed</pre>

<p>Nincs más hátra, mint hogy ezt az egészet PHP-ben is megvalósítsuk, ami innentől már nem lesz egy bonyolult dolog:</p>

<pre class="code prettyprint lang-php">$files   = array('image/gif' =&gt; 'image.gif');
$from    = 'a levél feladója';
$to      = 'a levél címzettje';
$subject = 'a levél témája';
$content = 'a levél tartalma, ami HTML-t is tartalmazhat';

$bd_mixed = md5(uniqid(rand(), true));
$bd_alt   = md5(uniqid(rand(), true));

$header =
'From: '.$from.'
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary=&quot;'.$bd_mixed. '&quot; ';

$text =
'--'.$bd_mixed. '
Content-Type: multipart/alternative; boundary=&quot;'.$bd_alt.'&quot;

--'.$bd_alt.'
Content-Type: text/plain; charset=iso-8859-2
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

'.trim(strip_tags($content)).'

--'.$bd_alt.'
Content-Type: text/html; charset=iso-8859-2
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

'.$content.'

--'.$bd_alt.'--

';

foreach ($files as $mime =&gt; $name) {
	$text .=
'--'.$bd_mixed.'
Content-Type: '.$mime.'; name=&quot;'.$name.'&quot;
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=&quot;'.$name.'&quot;

'.chunk_split(base64_encode(file_get_contents($name))).'

';
}
$text .= '--'.$bd_mixed.'--';

mail($to, $subject, $text, $header);</pre>

<p>Ennyi lenne a kód, mint említettem, nem egy bonyolult dolog, a fentebb írt mail-darabolási ismeret birtokában. Talán csak a chunk_split függvény szorul némi magyarázatra: ha a szövegen kívül nem adunk meg neki más paramétert, akkor a 2045-ös RFC-nek megfelelő szemantika alapján 76 karakterenként tesz egy "\r\n"-t a szövegbe.</p>

<p>Erről ennyit, kellemes csatolt fájlokkal tűzdelt e-mail küldözgetést mindenkinek. :)</p>]]></content:encoded>
			<wfw:commentRss>http://deadlime.hu/2006/05/25/csatolt-fajl-kuldese-php-ben/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

