From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 15 Dec 2015 16:25:48 +0000 (+0530)
Subject: mw.ForeignStructuredUpload.BookletLayout: Option 4: Add RTL images
X-Git-Tag: 1.31.0-rc.0~8668^2
X-Git-Url: http://git.cyclocoop.org/%24image?a=commitdiff_plain;h=3439473dfcc611d1f369961ded1d567320211741;p=lhc%2Fweb%2Fwiklou.git

mw.ForeignStructuredUpload.BookletLayout: Option 4: Add RTL images

Change-Id: I06c207aa89b85cfa5994fa9be8fa6bc623d739d7
---

diff --git a/resources/src/mediawiki/bookletlayout/option4/search-ltr.png b/resources/src/mediawiki/bookletlayout/option4/search-ltr.png
new file mode 100644
index 0000000000..26d6beb965
Binary files /dev/null and b/resources/src/mediawiki/bookletlayout/option4/search-ltr.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/search-ltr.svg b/resources/src/mediawiki/bookletlayout/option4/search-ltr.svg
new file mode 100644
index 0000000000..7bcf826362
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/search-ltr.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#E5E5E5;}
+	.st4{opacity:0.5;fill:#E5E5E5;enable-background:new    ;}
+	.st5{fill:#E5E5E5;stroke:#E5E5E5;}
+	.st6{fill:#9B9B9B;}
+	.st7{fill:#4470B6;}
+	.st8{fill:#D0D1D1;}
+	.st9{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st10{fill:none;stroke:#D02227;stroke-miterlimit:10;}
+	.st11{fill:#D02227;}
+</style>
+<g id="Layer_1" class="st0">
+	<g class="st1">
+		<path class="st2" d="M24.8,151.4l-11.5,10l-12.9-9.6V0.5h263v151.7l-9,6.7V42.5h-39v112.6l-4.4-3.7l-7.6,5.3V42.5h-155v110.8
+			l-9.8,8L24.8,151.4z"/>
+		<path class="st3" d="M263,1v151l-8,6V42h-40v112l-3.3-2.8l-0.6-0.5l-0.6,0.4l-6.5,4.6V42H48v111.1l-9.3,7.7l-13.3-9.6l-0.6-0.5
+			l-0.6,0.5l-10.9,9.5L1,151.5V1L263,1L263,1z M264,0H0v152l13.4,10l11.5-10l13.9,10l10.2-8.4V43h154v114.7l8.1-5.7l4.9,4.2V43h38
+			v116.9l10-7.4V0L264,0z M203,43H49v110.6l2.1-1.6l12.6,10l13.8-10l14.2,10l13-10l13,10l13.8-10l12.1,10l13.4-10l14.2,10l13-10
+			l13,10l5.8-4.3L203,43L203,43z"/>
+		<path class="st4" d="M254,43h-38v113.2l7.6,5.8l13.8-10l13.9,10l2.7-2.1V43z"/>
+		<path class="st5" d="M2,14.5h260"/>
+		<path class="st3" d="M232.5,5h26v6h-26V5z M208.5,5h22v6h-22V5z M142,6v4H50V6H142z M143,5H49v6h94V5z M184.5,5h22v6h-22V5z
+			 M161.5,5h13v6h-13V5z M176.5,5h6v6h-6V5z M153.5,5h6v6h-6V5z M9,5h32v6H9V5z M52,7h2v2h-2V7z M11,36c0-7.7,6.3-14,14-14
+			s14,6.3,14,14s-6.3,14-14,14S11,43.7,11,36z M38,107V72H13v35H38z M38,59v-5H13v5H38z"/>
+	</g>
+	<g class="st1">
+		<path class="st6" d="M123.8,68H85.6v7.8h38.1L123.8,68L123.8,68z M180.5,103v-8.8h-50.8v8.8H180.5z M90.8,80.6H69.9v8.6h20.8V80.6
+			z M189.3,88.4v-7.8h-37.7v7.8H189.3z M100.7,94.1H75v7.8h25.7V94.1z M175.2,68H129v7.8h46.2V68z"/>
+		<path class="st7" d="M94.7,80.6v9.2h51.6v-9.2L94.7,80.6z"/>
+	</g>
+	<g class="st1">
+		<path class="st2" d="M94,94h75v44H94V94z"/>
+		<path class="st7" d="M169,94h-31v44h31V94z M150.8,118.1l5.9,9.7l3.2-3l4.8,6.1l-21.1,0l6.2-12.8H150.8z"/>
+		<g transform="scale(-1 1)">
+			<path class="st8" d="M-102,100h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
+				C-101,100.2-101.4,100-102,100z"/>
+			<path class="st8" d="M-102,104h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
+				C-101,104.2-101.4,104-102,104z"/>
+			<path class="st8" d="M-102,108h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
+				C-101,108.2-101.4,108-102,108z"/>
+			<path class="st8" d="M-102,112h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,112.2-101.4,112-102,112z"/>
+			<path class="st8" d="M-102,116h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,116.2-101.4,116-102,116z"/>
+			<path class="st8" d="M-102,120h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,120.2-101.4,120-102,120z"/>
+			<path class="st8" d="M-102,124h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,124.2-101.4,124-102,124z"/>
+			<path class="st8" d="M-102,128h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,128.2-101.4,128-102,128z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_2">
+	<g>
+		<rect x="4.8" y="5.5" class="st2" width="93" height="5"/>
+		<path class="st3" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>
+	</g>
+	<polygon class="st3" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14 	"/>
+	<polygon class="st3" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14 	"/>
+	<line class="st9" x1="2" y1="14.5" x2="262" y2="14.5"/>
+	<line class="st9" x1="2" y1="32.8" x2="262" y2="32.8"/>
+	<g>
+		<circle class="st10" cx="8.9" cy="22.6" r="3.6"/>
+		<line class="st10" x1="11.6" y1="25" x2="15" y2="28.5"/>
+	</g>
+	<rect x="20.9" y="19" class="st3" width="57.6" height="9.5"/>
+	<rect x="4.3" y="37" class="st3" width="69.2" height="32.7"/>
+	<rect x="4.3" y="72.5" class="st3" width="90.1" height="56.8"/>
+	<rect x="97" y="72.5" class="st11" width="106.5" height="56.8"/>
+	<rect x="206.3" y="72.5" class="st3" width="52.4" height="56.8"/>
+	<rect x="4.3" y="132.2" class="st3" width="36.5" height="25.3"/>
+	<rect x="43.7" y="132.2" class="st3" width="62.3" height="25.3"/>
+	<rect x="109.3" y="132.2" class="st3" width="18.1" height="25.3"/>
+	<rect x="169.1" y="132.2" class="st3" width="18.1" height="25.3"/>
+	<rect x="189.8" y="132.2" class="st3" width="18.1" height="25.3"/>
+	<rect x="210.6" y="132.2" class="st3" width="48.1" height="25.3"/>
+	<rect x="130" y="132.2" class="st3" width="36" height="25.3"/>
+	<rect x="115.2" y="37" class="st3" width="36.5" height="32.7"/>
+	<rect x="76.1" y="37" class="st3" width="36.5" height="32.7"/>
+	<rect x="154.6" y="37" class="st3" width="56" height="32.7"/>
+	<rect x="213.3" y="37" class="st3" width="45.4" height="32.7"/>
+	<path class="st2" d="M102.4,115.4l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8h-80.3L102.4,115.4z"/>
+</g>
+</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/search-rtl.png b/resources/src/mediawiki/bookletlayout/option4/search-rtl.png
new file mode 100644
index 0000000000..3305928cde
Binary files /dev/null and b/resources/src/mediawiki/bookletlayout/option4/search-rtl.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/search-rtl.svg b/resources/src/mediawiki/bookletlayout/option4/search-rtl.svg
new file mode 100644
index 0000000000..408f9e694e
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/search-rtl.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#E5E5E5;}
+	.st2{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:#D02227;stroke-miterlimit:10;}
+	.st4{fill:#D02227;}
+</style>
+<g>
+	<rect x="166.2" y="5.5" class="st0" width="93" height="5"/>
+	<path class="st1" d="M258.8,6v4h-92V6H258.8 M259.8,5h-94v6h94V5L259.8,5z"/>
+</g>
+<polygon class="st1" points="86.3,8 87.6,8 154.4,8 155.8,8 158,14 152.2,14 89.8,14 84,14 "/>
+<polygon class="st1" points="7.5,8 8.8,8 75.7,8 77,8 79.3,14 73.4,14 11.1,14 5.2,14 "/>
+<line class="st2" x1="262" y1="14.5" x2="2" y2="14.5"/>
+<line class="st2" x1="262" y1="32.8" x2="2" y2="32.8"/>
+<g>
+	<circle class="st3" cx="255.1" cy="22.6" r="3.6"/>
+	<line class="st3" x1="252.4" y1="25" x2="249" y2="28.5"/>
+</g>
+<rect x="185.5" y="19" class="st1" width="57.6" height="9.5"/>
+<rect x="190.5" y="37" class="st1" width="69.2" height="32.7"/>
+<rect x="169.7" y="72.5" class="st1" width="90.1" height="56.8"/>
+<rect x="60.4" y="72.5" class="st4" width="106.5" height="56.8"/>
+<rect x="5.2" y="72.5" class="st1" width="52.4" height="56.8"/>
+<rect x="223.3" y="132.2" class="st1" width="36.5" height="25.3"/>
+<rect x="158" y="132.2" class="st1" width="62.3" height="25.3"/>
+<rect x="136.6" y="132.2" class="st1" width="18.1" height="25.3"/>
+<rect x="76.8" y="132.2" class="st1" width="18.1" height="25.3"/>
+<rect x="56.1" y="132.2" class="st1" width="18.1" height="25.3"/>
+<rect x="5.2" y="132.2" class="st1" width="48.1" height="25.3"/>
+<rect x="97.9" y="132.2" class="st1" width="36" height="25.3"/>
+<rect x="112.3" y="37" class="st1" width="36.5" height="32.7"/>
+<rect x="151.4" y="37" class="st1" width="36.5" height="32.7"/>
+<rect x="53.4" y="37" class="st1" width="56" height="32.7"/>
+<rect x="5.2" y="37" class="st1" width="45.4" height="32.7"/>
+<path class="st0" d="M161.7,124.3H81.4l31.8-31.8l26.1,26.1l12.8-12.8l9.5,9.5L161.7,124.3z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/search.png b/resources/src/mediawiki/bookletlayout/option4/search.png
deleted file mode 100644
index 26d6beb965..0000000000
Binary files a/resources/src/mediawiki/bookletlayout/option4/search.png and /dev/null differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/search.svg b/resources/src/mediawiki/bookletlayout/option4/search.svg
deleted file mode 100644
index 7bcf826362..0000000000
--- a/resources/src/mediawiki/bookletlayout/option4/search.svg
+++ /dev/null
@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{display:inline;}
-	.st2{fill:#FFFFFF;}
-	.st3{fill:#E5E5E5;}
-	.st4{opacity:0.5;fill:#E5E5E5;enable-background:new    ;}
-	.st5{fill:#E5E5E5;stroke:#E5E5E5;}
-	.st6{fill:#9B9B9B;}
-	.st7{fill:#4470B6;}
-	.st8{fill:#D0D1D1;}
-	.st9{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
-	.st10{fill:none;stroke:#D02227;stroke-miterlimit:10;}
-	.st11{fill:#D02227;}
-</style>
-<g id="Layer_1" class="st0">
-	<g class="st1">
-		<path class="st2" d="M24.8,151.4l-11.5,10l-12.9-9.6V0.5h263v151.7l-9,6.7V42.5h-39v112.6l-4.4-3.7l-7.6,5.3V42.5h-155v110.8
-			l-9.8,8L24.8,151.4z"/>
-		<path class="st3" d="M263,1v151l-8,6V42h-40v112l-3.3-2.8l-0.6-0.5l-0.6,0.4l-6.5,4.6V42H48v111.1l-9.3,7.7l-13.3-9.6l-0.6-0.5
-			l-0.6,0.5l-10.9,9.5L1,151.5V1L263,1L263,1z M264,0H0v152l13.4,10l11.5-10l13.9,10l10.2-8.4V43h154v114.7l8.1-5.7l4.9,4.2V43h38
-			v116.9l10-7.4V0L264,0z M203,43H49v110.6l2.1-1.6l12.6,10l13.8-10l14.2,10l13-10l13,10l13.8-10l12.1,10l13.4-10l14.2,10l13-10
-			l13,10l5.8-4.3L203,43L203,43z"/>
-		<path class="st4" d="M254,43h-38v113.2l7.6,5.8l13.8-10l13.9,10l2.7-2.1V43z"/>
-		<path class="st5" d="M2,14.5h260"/>
-		<path class="st3" d="M232.5,5h26v6h-26V5z M208.5,5h22v6h-22V5z M142,6v4H50V6H142z M143,5H49v6h94V5z M184.5,5h22v6h-22V5z
-			 M161.5,5h13v6h-13V5z M176.5,5h6v6h-6V5z M153.5,5h6v6h-6V5z M9,5h32v6H9V5z M52,7h2v2h-2V7z M11,36c0-7.7,6.3-14,14-14
-			s14,6.3,14,14s-6.3,14-14,14S11,43.7,11,36z M38,107V72H13v35H38z M38,59v-5H13v5H38z"/>
-	</g>
-	<g class="st1">
-		<path class="st6" d="M123.8,68H85.6v7.8h38.1L123.8,68L123.8,68z M180.5,103v-8.8h-50.8v8.8H180.5z M90.8,80.6H69.9v8.6h20.8V80.6
-			z M189.3,88.4v-7.8h-37.7v7.8H189.3z M100.7,94.1H75v7.8h25.7V94.1z M175.2,68H129v7.8h46.2V68z"/>
-		<path class="st7" d="M94.7,80.6v9.2h51.6v-9.2L94.7,80.6z"/>
-	</g>
-	<g class="st1">
-		<path class="st2" d="M94,94h75v44H94V94z"/>
-		<path class="st7" d="M169,94h-31v44h31V94z M150.8,118.1l5.9,9.7l3.2-3l4.8,6.1l-21.1,0l6.2-12.8H150.8z"/>
-		<g transform="scale(-1 1)">
-			<path class="st8" d="M-102,100h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
-				C-101,100.2-101.4,100-102,100z"/>
-			<path class="st8" d="M-102,104h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
-				C-101,104.2-101.4,104-102,104z"/>
-			<path class="st8" d="M-102,108h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
-				C-101,108.2-101.4,108-102,108z"/>
-			<path class="st8" d="M-102,112h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
-				C-101,112.2-101.4,112-102,112z"/>
-			<path class="st8" d="M-102,116h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
-				C-101,116.2-101.4,116-102,116z"/>
-			<path class="st8" d="M-102,120h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
-				C-101,120.2-101.4,120-102,120z"/>
-			<path class="st8" d="M-102,124h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
-				C-101,124.2-101.4,124-102,124z"/>
-			<path class="st8" d="M-102,128h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
-				C-101,128.2-101.4,128-102,128z"/>
-		</g>
-	</g>
-</g>
-<g id="Layer_2">
-	<g>
-		<rect x="4.8" y="5.5" class="st2" width="93" height="5"/>
-		<path class="st3" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>
-	</g>
-	<polygon class="st3" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14 	"/>
-	<polygon class="st3" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14 	"/>
-	<line class="st9" x1="2" y1="14.5" x2="262" y2="14.5"/>
-	<line class="st9" x1="2" y1="32.8" x2="262" y2="32.8"/>
-	<g>
-		<circle class="st10" cx="8.9" cy="22.6" r="3.6"/>
-		<line class="st10" x1="11.6" y1="25" x2="15" y2="28.5"/>
-	</g>
-	<rect x="20.9" y="19" class="st3" width="57.6" height="9.5"/>
-	<rect x="4.3" y="37" class="st3" width="69.2" height="32.7"/>
-	<rect x="4.3" y="72.5" class="st3" width="90.1" height="56.8"/>
-	<rect x="97" y="72.5" class="st11" width="106.5" height="56.8"/>
-	<rect x="206.3" y="72.5" class="st3" width="52.4" height="56.8"/>
-	<rect x="4.3" y="132.2" class="st3" width="36.5" height="25.3"/>
-	<rect x="43.7" y="132.2" class="st3" width="62.3" height="25.3"/>
-	<rect x="109.3" y="132.2" class="st3" width="18.1" height="25.3"/>
-	<rect x="169.1" y="132.2" class="st3" width="18.1" height="25.3"/>
-	<rect x="189.8" y="132.2" class="st3" width="18.1" height="25.3"/>
-	<rect x="210.6" y="132.2" class="st3" width="48.1" height="25.3"/>
-	<rect x="130" y="132.2" class="st3" width="36" height="25.3"/>
-	<rect x="115.2" y="37" class="st3" width="36.5" height="32.7"/>
-	<rect x="76.1" y="37" class="st3" width="36.5" height="32.7"/>
-	<rect x="154.6" y="37" class="st3" width="56" height="32.7"/>
-	<rect x="213.3" y="37" class="st3" width="45.4" height="32.7"/>
-	<path class="st2" d="M102.4,115.4l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8h-80.3L102.4,115.4z"/>
-</g>
-</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/website-ltr.png b/resources/src/mediawiki/bookletlayout/option4/website-ltr.png
new file mode 100644
index 0000000000..7e007514ad
Binary files /dev/null and b/resources/src/mediawiki/bookletlayout/option4/website-ltr.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/website-ltr.svg b/resources/src/mediawiki/bookletlayout/option4/website-ltr.svg
new file mode 100644
index 0000000000..c6bf6fef18
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/website-ltr.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#E5E5E5;}
+	.st2{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st3{fill:#D02227;}
+	.st4{fill:#9B9A9A;}
+</style>
+<g>
+	<rect x="4.8" y="5.5" class="st0" width="93" height="5"/>
+	<path class="st1" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>
+</g>
+<polygon class="st1" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14 "/>
+<polygon class="st1" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14 "/>
+<line class="st2" x1="2" y1="14.5" x2="262" y2="14.5"/>
+<rect x="44" y="48.4" class="st3" width="106.5" height="56.8"/>
+<path class="st0" d="M49.3,91.2l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8H49.3L49.3,91.2z"/>
+<circle class="st1" cx="55" cy="32.3" r="11.9"/>
+<g>
+	<rect x="70.7" y="27.4" class="st4" width="76.2" height="7"/>
+	<rect x="70.7" y="35.5" class="st4" width="22.3" height="1.7"/>
+	<rect x="95" y="35.5" class="st4" width="28.2" height="1.7"/>
+</g>
+<rect x="44" y="107.8" class="st1" width="23.3" height="23.3"/>
+<rect x="70.7" y="107.8" class="st1" width="79.8" height="1.8"/>
+<rect x="70.7" y="114" class="st1" width="79.8" height="1.8"/>
+<rect x="70.7" y="120.2" class="st1" width="79.8" height="1.8"/>
+<rect x="70.7" y="126.4" class="st1" width="79.8" height="1.8"/>
+<rect x="44" y="134.4" class="st1" width="106.5" height="1.8"/>
+<rect x="44" y="140.6" class="st1" width="106.5" height="1.8"/>
+<rect x="44" y="146.8" class="st1" width="106.5" height="1.8"/>
+<rect x="44" y="153" class="st1" width="106.5" height="1.8"/>
+<g>
+	<rect x="155.7" y="37.2" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="43.4" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="49.6" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="55.8" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="27.4" class="st1" width="57.3" height="7"/>
+</g>
+<g>
+	<rect x="155.7" y="78.2" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="84.4" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="90.6" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="96.8" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="68.4" class="st1" width="57.3" height="7"/>
+</g>
+<g>
+	<rect x="155.7" y="116.7" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="122.9" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="129.1" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="135.3" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="106.9" class="st1" width="57.3" height="7"/>
+</g>
+</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/website-rtl.png b/resources/src/mediawiki/bookletlayout/option4/website-rtl.png
new file mode 100644
index 0000000000..83ba6d3f3e
Binary files /dev/null and b/resources/src/mediawiki/bookletlayout/option4/website-rtl.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/website-rtl.svg b/resources/src/mediawiki/bookletlayout/option4/website-rtl.svg
new file mode 100644
index 0000000000..080045ab10
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/website-rtl.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#E5E5E5;}
+	.st2{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st3{fill:#D02227;}
+	.st4{fill:#9B9A9A;}
+</style>
+<g>
+	<rect x="166.2" y="5.5" class="st0" width="93" height="5"/>
+	<path class="st1" d="M258.8,6v4h-92V6H258.8 M259.8,5h-94v6h94V5L259.8,5z"/>
+</g>
+<polygon class="st1" points="86.3,8 87.6,8 154.4,8 155.8,8 158,14 152.2,14 89.8,14 84,14 "/>
+<polygon class="st1" points="7.5,8 8.8,8 75.7,8 77,8 79.3,14 73.4,14 11.1,14 5.2,14 "/>
+<line class="st2" x1="262" y1="14.5" x2="2" y2="14.5"/>
+<rect x="113.5" y="48.4" class="st3" width="106.5" height="56.8"/>
+<path class="st0" d="M214.7,100.2h-80.3l31.8-31.8l26.1,26.1l12.8-12.8l9.5,9.5L214.7,100.2z"/>
+<circle class="st1" cx="209" cy="32.3" r="11.9"/>
+<g>
+	<rect x="117" y="27.4" class="st4" width="76.2" height="7"/>
+	<rect x="171" y="35.5" class="st4" width="22.3" height="1.7"/>
+	<rect x="140.8" y="35.5" class="st4" width="28.2" height="1.7"/>
+</g>
+<rect x="196.7" y="107.8" class="st1" width="23.3" height="23.3"/>
+<rect x="113.5" y="107.8" class="st1" width="79.8" height="1.8"/>
+<rect x="113.5" y="114" class="st1" width="79.8" height="1.8"/>
+<rect x="113.5" y="120.2" class="st1" width="79.8" height="1.8"/>
+<rect x="113.5" y="126.4" class="st1" width="79.8" height="1.8"/>
+<rect x="113.5" y="134.4" class="st1" width="106.5" height="1.8"/>
+<rect x="113.5" y="140.6" class="st1" width="106.5" height="1.8"/>
+<rect x="113.5" y="146.8" class="st1" width="106.5" height="1.8"/>
+<rect x="113.5" y="153" class="st1" width="106.5" height="1.8"/>
+<g>
+	<rect x="51" y="37.2" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="43.4" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="49.6" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="55.8" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="27.4" class="st1" width="57.3" height="7"/>
+</g>
+<g>
+	<rect x="51" y="78.2" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="84.4" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="90.6" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="96.8" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="68.4" class="st1" width="57.3" height="7"/>
+</g>
+<g>
+	<rect x="51" y="116.7" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="122.9" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="129.1" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="135.3" class="st1" width="57.3" height="1.8"/>
+	<rect x="51" y="106.9" class="st1" width="57.3" height="7"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/website.png b/resources/src/mediawiki/bookletlayout/option4/website.png
deleted file mode 100644
index 7e007514ad..0000000000
Binary files a/resources/src/mediawiki/bookletlayout/option4/website.png and /dev/null differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/website.svg b/resources/src/mediawiki/bookletlayout/option4/website.svg
deleted file mode 100644
index c6bf6fef18..0000000000
--- a/resources/src/mediawiki/bookletlayout/option4/website.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#E5E5E5;}
-	.st2{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
-	.st3{fill:#D02227;}
-	.st4{fill:#9B9A9A;}
-</style>
-<g>
-	<rect x="4.8" y="5.5" class="st0" width="93" height="5"/>
-	<path class="st1" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>
-</g>
-<polygon class="st1" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14 "/>
-<polygon class="st1" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14 "/>
-<line class="st2" x1="2" y1="14.5" x2="262" y2="14.5"/>
-<rect x="44" y="48.4" class="st3" width="106.5" height="56.8"/>
-<path class="st0" d="M49.3,91.2l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8H49.3L49.3,91.2z"/>
-<circle class="st1" cx="55" cy="32.3" r="11.9"/>
-<g>
-	<rect x="70.7" y="27.4" class="st4" width="76.2" height="7"/>
-	<rect x="70.7" y="35.5" class="st4" width="22.3" height="1.7"/>
-	<rect x="95" y="35.5" class="st4" width="28.2" height="1.7"/>
-</g>
-<rect x="44" y="107.8" class="st1" width="23.3" height="23.3"/>
-<rect x="70.7" y="107.8" class="st1" width="79.8" height="1.8"/>
-<rect x="70.7" y="114" class="st1" width="79.8" height="1.8"/>
-<rect x="70.7" y="120.2" class="st1" width="79.8" height="1.8"/>
-<rect x="70.7" y="126.4" class="st1" width="79.8" height="1.8"/>
-<rect x="44" y="134.4" class="st1" width="106.5" height="1.8"/>
-<rect x="44" y="140.6" class="st1" width="106.5" height="1.8"/>
-<rect x="44" y="146.8" class="st1" width="106.5" height="1.8"/>
-<rect x="44" y="153" class="st1" width="106.5" height="1.8"/>
-<g>
-	<rect x="155.7" y="37.2" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="43.4" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="49.6" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="55.8" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="27.4" class="st1" width="57.3" height="7"/>
-</g>
-<g>
-	<rect x="155.7" y="78.2" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="84.4" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="90.6" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="96.8" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="68.4" class="st1" width="57.3" height="7"/>
-</g>
-<g>
-	<rect x="155.7" y="116.7" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="122.9" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="129.1" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="135.3" class="st1" width="57.3" height="1.8"/>
-	<rect x="155.7" y="106.9" class="st1" width="57.3" height="7"/>
-</g>
-</svg>
diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
index 04573a24ca..28c81f2380 100644
--- a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
+++ b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
@@ -126,14 +126,14 @@
 
 .mw-foreignStructuredUpload-bookletLayout-guide-image-website {
 	/* @embed */
-	.background-image-svg('bookletlayout/option4/website.svg','bookletlayout/option4/website.png');
+	.background-image-svg('bookletlayout/option4/website-ltr.svg','bookletlayout/option4/website-ltr.png');
 	left: 0;
 	bottom: 50px;
 }
 
 .mw-foreignStructuredUpload-bookletLayout-guide-image-search {
 	/* @embed */
-	.background-image-svg('bookletlayout/option4/search.svg','bookletlayout/option4/search.png');
+	.background-image-svg('bookletlayout/option4/search-ltr.svg','bookletlayout/option4/search-ltr.png');
 	left: 80px;
 	bottom: 0;
 }