Improve readability in small width contexts

Use text-align:left on mobiles instead of justify
Use hyphenator.js to hyphenate wallet's description
(CSS hyphenation will need to support hyphenate-limit-zone
to be used while not generating too much hyphens)

_layouts/base.html

@@ -24,6 +24,17 @@ menu:
 {% if page.lang == 'ar' or page.lang == 'fa' %}{% lesscss rtl.less %}{% endif %}
 {% if page.lang == 'pl' or page.lang == 'ru' or page.lang == 'zh_CN' or page.lang == 'zh_TW' %}{% lesscss sans.less %}{% endif %}
 <script type="text/javascript" src="/js/main.js"></script>
+{% if page.lang == 'de' or page.lang == 'es' or page.lang == 'it' or page.lang == 'nl' or page.lang == 'pl' or page.lang == 'ru' or page.lang == 'tr' %}
+<script src="/js/hyphenator.js" type="text/javascript"></script>
+<script type="text/javascript">
+if(typeof(legacyIE)==='undefined'){
+	Hyphenator.config({
+		{% if page.lang == 'ru' %}minwordlength : 7{% else %}minwordlength : 9{% endif %}
+	});
+	Hyphenator.run();
+}
+</script>
+{% endif %}
 <link rel="shortcut icon" href="/favicon.png">
 <link rel="apple-touch-icon-precomposed" href="/img/logo_ios.png"/>
 </head>

_less/ie.css

@@ -245,6 +245,9 @@ body{
 .previewrow h2{
 	font-size:115%;
 }
+.previewrow p{
+	font-size:95%;
+}
 .previewrow div{
 	/*zoom and display are also required for IE7*/
 	zoom:expression(this.parentNode.className=='previewrow'?'1':'');
@@ -316,7 +319,6 @@ body{
 	padding:0;
 }
 .previewrow div div div h2{
-	font-size:130%;
 	position:relative;
 	left:30px;
 	margin:0;

_less/screen.less

@@ -720,6 +720,9 @@ li p{
 .previewrow>h2{
 	font-size:115%;
 }
+.previewrow>p{
+	font-size:95%;
+}
 .previewrow>div{
 	display:inline-block;
 	position:relative;
@@ -777,7 +780,7 @@ li p{
 }
 .previewrow>div>div>div:first-child+div{
 	background:url(/img/bubblemiddle.svg) bottom center repeat-y;
-	padding:0 30px;
+	padding:0 25px;
 }
 .previewrow>div>div>div:first-child+div+div{
 	background:url(/img/bubblebottom.svg) bottom center no-repeat;
@@ -791,6 +794,7 @@ li p{
 .previewrow>div>div>div>h2{
 	margin:0;
 	padding-top:10px;
+	font-size:115%;
 }
 .previewrow>div>div>div>span>img{
 	margin-left:4px;
@@ -1233,8 +1237,14 @@ h2 .rssicon{
 	}
 	.content{
 		position:static;
-		margin:0 5px;
+		text-align:left;
+		margin:0;
 		padding:15px 10px 20px 10px;
+		border-right:0;
+		border-left:0;
+		-webkit-border-radius:0;
+		-moz-border-radius:0;
+		border-radius:0;
 	}
 	.footer{
 		padding:20px 0 20px 5px;
@@ -1287,11 +1297,20 @@ h2 .rssicon{
 		margin-right:0;
 		margin-bottom:20px;
 	}
+	.press-volunteer>div:first-child>p:first-child+p{
+		text-align:left;
+	}
 	.press-faq>div{
 		width:auto;
 		display:block;
 		margin-right:0;
 	}
+	.press-faq>div>div{
+		text-align:left;
+	}
+	.press-faq li{
+		text-align:left;
+	}
 	.press-news>div{
 		width:auto;
 		height:auto;
@@ -1327,6 +1346,9 @@ h2 .rssicon{
 	.mainlist>div:first-child+div+div{
 		text-align:left;
 	}
+	.start p{
+		text-align:left;
+	}
 	.start>div{
 		position:static;
 	}

_templates/choose-your-wallet.html

@@ -19,15 +19,15 @@ id: choose-your-wallet
 
 <div class="previewrow">
   <h2><img class="titleicon" src="/img/ico_software.svg" alt="Software wallets" />{% translate walletdesk %}</h2>
-  <p>{% translate walletdesktxt %}</p>
+  <p class="hyphenate">{% translate walletdesktxt %}</p>
 </div>
 <div class="previewrow">
   <h2><img class="titleicon" src="/img/ico_mobile.svg" alt="mobile wallets" />{% translate walletmobi %}</h2>
-  <p>{% translate walletmobitxt %}</p>
+  <p class="hyphenate">{% translate walletmobitxt %}</p>
 </div>
 <div class="previewrow">
   <h2><img class="titleicon" src="/img/ico_international.svg" alt="web wallets" />{% translate walletweb %}</h2>
-  <p>{% translate walletwebtxt %}</p>
+  <p class="hyphenate">{% translate walletwebtxt %}</p>
 </div>
 
 </div>
@@ -41,7 +41,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Bitcoin-Qt</h2>
       <span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /><img src="/img/dow-osx-uni.png" alt="Mac OS X" title="Mac OS X" /></span>
-      <p>{% translate walletbitcoinqt %}</p>
+      <p class="hyphenate">{% translate walletbitcoinqt %}</p>
       <p>{% translate walletdownload %}</p>
     </div>
     <div class="b3"></div>
@@ -54,7 +54,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>MultiBit</h2>
       <span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /><img src="/img/dow-osx-uni.png" alt="Mac OS X" title="Mac OS X" /></span>
-      <p>{% translate walletmultibit %}</p>
+      <p class="hyphenate">{% translate walletmultibit %}</p>
       <p><a href="https://multibit.org/">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -67,7 +67,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Armory</h2>
       <span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /></span>
-      <p>{% translate walletarmory %}</p>
+      <p class="hyphenate">{% translate walletarmory %}</p>
       <p><a href="http://bitcoinarmory.com/">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -82,7 +82,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Electrum</h2>
       <span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /><img src="/img/dow-osx-uni.png" alt="Mac OS X" title="Mac OS X" /><img src="/img/dow-android.png" alt="Android" title="Android" /></span>
-      <p>{% translate walletelectrum %}</p>
+      <p class="hyphenate">{% translate walletelectrum %}</p>
       <p><a href="http://electrum.org/">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -96,7 +96,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate wallettrustinfo %}</h2>
       <span></span>
-      <p>{% translate wallettrustinfotxt %}</p>
+      <p class="hyphenate">{% translate wallettrustinfotxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -113,7 +113,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Bitcoin Wallet</h2>
       <span><img src="/img/dow-android.png" alt="Android" title="Android" /><img src="/img/dow-blackberry.png" alt="BlackBerry OS" title="BlackBerry OS" /></span>
-      <p>{% translate walletbitcoinwallet %}</p>
+      <p class="hyphenate">{% translate walletbitcoinwallet %}</p>
       <p><a href="https://play.google.com/store/apps/details?id=de.schildbach.wallet">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -129,7 +129,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate wallettrustinfo %}</h2>
       <span></span>
-      <p>{% translate wallettrustinfotxt %}</p>
+      <p class="hyphenate">{% translate wallettrustinfotxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -145,7 +145,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate walletwebwarning %}</h2>
       <span></span>
-      <p>{% translate walletwebwarningtxt %}</p>
+      <p class="hyphenate">{% translate walletwebwarningtxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -159,7 +159,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate wallettrustinfo %}</h2>
       <span></span>
-      <p>{% translate wallettrustinfotxt %}</p>
+      <p class="hyphenate">{% translate wallettrustinfotxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -173,7 +173,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate walletwebwarning %}</h2>
       <span></span>
-      <p>{% translate walletwebwarningtxt %}</p>
+      <p class="hyphenate">{% translate walletwebwarningtxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -191,7 +191,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate walletwebwarning %}</h2>
       <span></span>
-      <p>{% translate walletwebwarningtxt %}</p>
+      <p class="hyphenate">{% translate walletwebwarningtxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -205,7 +205,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate wallettrustinfo %}</h2>
       <span></span>
-      <p>{% translate wallettrustinfotxt %}</p>
+      <p class="hyphenate">{% translate wallettrustinfotxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -219,7 +219,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate walletwebwarning %}</h2>
       <span></span>
-      <p>{% translate walletwebwarningtxt %}</p>
+      <p class="hyphenate">{% translate walletwebwarningtxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -232,7 +232,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>{% translate walletwebwarning %}</h2>
       <span></span>
-      <p>{% translate walletwebwarningtxt %}</p>
+      <p class="hyphenate">{% translate walletwebwarningtxt %}</p>
       <p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
     </div>
     <div class="b3"></div>
@@ -251,7 +251,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Electrum</h2>
       <span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /><img src="/img/dow-osx-uni.png" alt="Mac OS X" title="Mac OS X" /><img src="/img/dow-android.png" alt="Android" title="Android" /></span>
-      <p>{% translate walletelectrum %}</p>
+      <p class="hyphenate">{% translate walletelectrum %}</p>
       <p><a href="http://electrum.org/">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -267,7 +267,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Mycelium Wallet</h2>
       <span><img src="/img/dow-android.png" alt="Android" title="Android" /></span>
-      <p>{% translate walletmyceliumwallet %}</p>
+      <p class="hyphenate">{% translate walletmyceliumwallet %}</p>
       <p><a href="https://play.google.com/store/apps/details?id=com.mycelium.wallet">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -281,7 +281,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Blockchain.info</h2>
       <span><img src="/img/dow-android.png" alt="Android" title="Android" /><img src="/img/dow-ios.png" alt="iOS" title="iOS" /></span>
-      <p>{% translate walletblockchaininfomob %}</p>
+      <p class="hyphenate">{% translate walletblockchaininfomob %}</p>
       <p><a href="https://blockchain.info/wallet/">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -294,7 +294,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Blockchain.info</h2>
       <span></span>
-      <p>{% translate walletblockchaininfo %}</p>
+      <p class="hyphenate">{% translate walletblockchaininfo %}</p>
       <p><a href="http://blockchain.info/wallet/chrome-extension">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -307,7 +307,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>BIPS</h2>
       <span></span>
-      <p>{% translate walletbips %}</p>
+      <p class="hyphenate">{% translate walletbips %}</p>
       <p><a href="https://bips.me/">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -320,7 +320,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Coinbase</h2>
       <span></span>
-      <p>{% translate walletcoinbase %}</p>
+      <p class="hyphenate">{% translate walletcoinbase %}</p>
       <p><a href="https://coinbase.com/">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>
@@ -333,7 +333,7 @@ id: choose-your-wallet
     <div class="b2">
       <h2>Coinbase</h2>
       <span></span>
-      <p>{% translate walletcoinbase %}</p>
+      <p class="hyphenate">{% translate walletcoinbase %}</p>
       <p><a href="https://play.google.com/store/apps/details?id=com.coinbase.android">{% translate walletvisit %}</a></p>
     </div>
     <div class="b3"></div>

js/ie.js

@@ -34,4 +34,8 @@ if ((version >= 5.5) && (document.body.filters))
 }
 }
 
+//Let other scripts know browser is IE6-7
+legacyIE=true;
+
+//Render all transparent pngs
 window.onload=pngfix;

js/patterns/it.js

@@ -0,0 +1,18 @@
+Hyphenator.languages['it'] = {
+	leftmin : 2,
+	rightmin : 2,
+	specialChars : "àéèìòù’'",
+	// The italian hyphenation patterns are retrieved from 
+	// http://www.ctan.org/tex-archive/language/hyphenation/ithyph.tex
+	patterns : {
+		2 : "1b1c1d1f1g1h1j1k1l1m1n1p1q1r1t1v1w1x1z",
+		3 : "2’2e2w2bb2bc2bd2bf2bm2bn2bp2bs2bt2bvb2lb2r2b_2b’2cb2cc2cd2cf2ck2cm2cn2cq2cs2ct2czc2hc2lc2r2c_2c’_c22db2dd2dg2dl2dm2dn2dpd2r2ds2dt2dv2dw2d_2d’_d22fb2fg2ff2fnf2lf2r2fs2ft2f_2f’2gb2gd2gf2ggg2hg2l2gmg2n2gpg2r2gs2gt2gv2gw2gz2g_2g’2hb2hd2hhh2l2hm2hn2hr2hv2h_2h’2j_2j’2kg2kfk2h2kkk2l2kmk2r2ks2kt2k_2k’2lb2lc2ld2lgl2h2lk2ll2lm2ln2lp2lq2lr2ls2lt2lv2lw2lz2l_2mb2mc2mf2ml2mm2mn2mp2mq2mr2ms2mt2mv2mw2m_2m’2nb2nc2nd2nf2ng2nk2nl2nm2nn2np2nq2nr2ns2nt2nv2nz2n_2n’2pdp2hp2l2pn2ppp2r2ps2pt2pz2p_2p’2qq2q_2q’2rb2rc2rd2rfr2h2rg2rk2rl2rm2rn2rp2rq2rr2rs2rt2rv2rx2rw2rz2r_2r’1s22sz4s_2tb2tc2td2tf2tgt2ht2l2tm2tn2tpt2rt2s2tt2tv2twt2z2t_2vcv2lv2r2vv2v_w2h2w_2w’2xb2xc2xf2xh2xm2xp2xt2xw2x_2x’y1i2zb2zd2zl2zn2zp2zt2zs2zv2zz2z_",
+		4 : "_p2sa1iaa1iea1ioa1iua1uoa1ya2at_e1iuo1iao1ieo1ioo1iu2chh2chbch2r2chn2l’_2l’’2shm2sh_2sh’2s3s2stb2stc2std2stf2stg2stm2stn2stp2sts2stt2stv4s’_4s’’2tzktz2s2t’_2t’’2v’_2v’’wa2r2w1yy1ou2z’_2z’’_z2",
+		5 : "_bio1_pre12gh2t2l3f2n2g3n3p2nes4s3mt2t3s",
+		6 : "_a3p2n_anti1_free3_opto1_para1hi3p2n2nheit3p2sicr2t2s32s3p2n3t2sch",
+		7 : "_ca4p3s_e2x1eu_narco1_su2b3r_wa2g3n_wel2t1n2s3fer",
+		8 : "_contro1_fran2k3_li3p2sa_orto3p2_poli3p2_sha2re3_su2b3lu",
+		9 : "_anti3m2n_circu2m1_re1i2scr_tran2s3c_tran2s3d_tran2s3l_tran2s3n_tran2s3p_tran2s3r_tran2s3t",
+		10 : "_di2s3cine"
+	}
+};

js/patterns/tr.js

@@ -0,0 +1,13 @@
+// For questions about the turkish hyphenation patterns ask
+// Andreas Lappe nd at off-pist dot de
+Hyphenator.languages['tr'] = {
+	leftmin : 2,
+	rightmin : 2,
+	specialChars : "âıîöüûçğş",
+	patterns : {
+		3 : "2a12â12e12ı12i12î12o12ö12u12ü12û11b11c11ç11d11f11g11ğ11h11j11k11l11m11n11p11r11s11ş11t11v11y11z12bb2bc2bç2bd2bf2bg2bğ2bh2bj2bk2bl2bm2bn2bp2br2bs2bş2bt2bv2by2bz2cb2cc2cç2cd2cf2cg2cğ2ch2cj2ck2cl2cm2cn2cp2cr2cs2cş2ct2cv2cy2cz2çb2çc2çç2çd2çf2çg2çğ2çh2çj2çk2çl2çm2çn2çp2çr2çs2çş2çt2çv2çy2çz2db2dc2dç2dd2df2dg2dğ2dh2dj2dk2dl2dm2dn2dp2dr2ds2dş2dt2dv2dy2dz2fb2fc2fç2fd2ff2fg2fğ2fh2fj2fk2fl2fm2fn2fp2fr2fs2fş2ft2fv2fy2fz2gb2gc2gç2gd2gf2gg2gğ2gh2gj2gk2gl2gm2gn2gp2gr2gs2gş2gt2gv2gy2gz2ğb2ğc2ğç2ğd2ğf2ğg2ğğ2ğh2ğj2ğk2ğl2ğm2ğn2ğp2ğr2ğs2ğş2ğt2ğv2ğy2ğz2hb2hc2hç2hd2hf2hg2hğ2hh2hj2hk2hl2hm2hn2hp2hr2hs2hş2ht2hv2hy2hz2jb2jc2jç2jd2jf2jg2jğ2jh2jj2jk2jl2jm2jn2jp2jr2js2jş2jt2jv2jy2jz2kb2kc2kç2kd2kf2kg2kğ2kh2kj2kk2kl2km2kn2kp2kr2ks2kş2kt2kv2ky2kz2lb2lc2lç2ld2lf2lg2lğ2lh2lj2lk2ll2lm2ln2lp2lr2ls2lş2lt2lv2ly2lz2mb2mc2mç2md2mf2mg2mğ2mh2mj2mk2ml2mm2mn2mp2mr2ms2mş2mt2mv2my2mz2nb2nc2nç2nd2nf2ng2nğ2nh2nj2nk2nl2nm2nn2np2nr2ns2nş2nt2nv2ny2nz2pb2pc2pç2pd2pf2pg2pğ2ph2pj2pk2pl2pm2pn2pp2pr2ps2pş2pt2pv2py2pz2rb2rc2rç2rd2rf2rg2rğ2rh2rj2rk2rl2rm2rn2rp2rr2rs2rş2rt2rv2ry2rz2sb2sc2sç2sd2sf2sg2sğ2sh2sj2sk2sl2sm2sn2sp2sr2ss2sş2st2sv2sy2sz2şb2şc2şç2şd2şf2şg2şğ2şh2şj2şk2şl2şm2şn2şp2şr2şs2şş2şt2şv2şy2şz2tb2tc2tç2td2tf2tg2tğ2th2tj2tk2tl2tm2tn2tp2tr2ts2tş2tt2tv2ty2tz2vb2vc2vç2vd2vf2vg2vğ2vh2vj2vk2vl2vm2vn2vp2vr2vs2vş2vt2vv2vy2vz2yb2yc2yç2yd2yf2yg2yğ2yh2yj2yk2yl2ym2yn2yp2yr2ys2yş2yt2yv2yy2yz2zb2zc2zç2zd2zf2zg2zğ2zh2zj2zk2zl2zm2zn2zp2zr2zs2zş2zt2zv2zy2zz",
+		4 : "a3a2a3â2a3e2a3ı2a3i2a3î2a3o2a3ö2a3u2a3ü2a3û2â3a2â3â2â3e2â3ı2â3i2â3î2â3o2â3ö2â3u2â3ü2â3û2e3a2e3â2e3e2e3ı2e3i2e3î2e3o2e3ö2e3u2e3ü2e3û2ı3a2ı3â2ı3e2ı3ı2ı3i2ı3î2ı3o2ı3ö2ı3u2ı3ü2ı3û2i3a2i3â2i3e2i3ı2i3i2i3î2i3o2i3ö2i3u2i3ü2i3û2î3a2î3â2î3e2î3ı2î3i2î3î2î3o2î3ö2î3u2î3ü2î3û2o3a2o3â2o3e2o3ı2o3i2o3î2o3o2o3ö2o3u2o3ü2o3û2ö3a2ö3â2ö3e2ö3ı2ö3i2ö3î2ö3o2ö3ö2ö3u2ö3ü2ö3û2u3a2u3â2u3e2u3ı2u3i2u3î2u3o2u3ö2u3u2u3ü2u3û2ü3a2ü3â2ü3e2ü3ı2ü3i2ü3î2ü3o2ü3ö2ü3u2ü3ü2ü3û2û3a2û3â2û3e2û3ı2û3i2û3î2û3o2û3ö2û3u2û3ü2û3û2",
+		6 : "tu4r4k",
+		7 : "2e2cek_m1t4rak"
+	}
+};