diff --git a/.travis.yml b/.travis.yml
index 8ce2151b0..4d4d0801e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,6 +9,10 @@ rvm:
   - 2.3.0
   - ruby-head
 
+addons:
+  apt_packages:
+    - libgmp3-dev
+
 branches:
   only:
     - master
diff --git a/doc/sample.css b/doc/sample.css
index dcfd4e376..2c709e8ac 100644
--- a/doc/sample.css
+++ b/doc/sample.css
@@ -106,3 +106,26 @@ p.noindent {
 p.flushright {
     text-align: right;
 }
+
+
+/**
+ * from EBPAJ EPUB 3 File Creation Guide sample style
+ *
+ * cf. http://ebpaj.jp/counsel/guide
+ */
+
+/* image width definition(pacentage)  */
+.width-010per { width:  10%; }
+.width-020per { width:  20%; }
+.width-025per { width:  25%; }
+.width-030per { width:  30%; }
+.width-033per { width:  33%; }
+.width-040per { width:  40%; }
+.width-050per { width:  50%; }
+.width-060per { width:  60%; }
+.width-067per { width:  67%; }
+.width-070per { width:  70%; }
+.width-075per { width:  75%; }
+.width-080per { width:  80%; }
+.width-090per { width:  90%; }
+.width-100per { width: 100%; }
diff --git a/lib/review/htmlbuilder.rb b/lib/review/htmlbuilder.rb
index ef4c949ca..ffd83513c 100644
--- a/lib/review/htmlbuilder.rb
+++ b/lib/review/htmlbuilder.rb
@@ -599,15 +599,24 @@ def texequation(lines)
 
     def handle_metric(str)
       if str =~ /\Ascale=([\d.]+)\Z/
-        return "width=\"#{($1.to_f * 100).round}%\""
+        return {'class' => sprintf("width-%03dper", ($1.to_f * 100).round)}
       else
         k, v = str.split('=', 2)
-        return %Q|#{k}=\"#{v.sub(/\A["']/, '').sub(/["']\Z/, '')}\"|
+        return {k => v.sub(/\A["']/, '').sub(/["']\Z/, '')}
       end
     end
 
     def result_metric(array)
-      " #{array.join(' ')}"
+      attrs = {}
+      array.each do |item|
+        k = item.keys[0]
+        if attrs[k]
+          attrs[k] << item[k]
+        else
+          attrs[k] = [item[k]]
+        end
+      end
+      " "+attrs.map{|k, v| %Q|#{k}="#{v.join(' ')}"| }.join(' ')
     end
 
     def image_image(id, caption, metric)
diff --git a/test/sample-book/src/style.css b/test/sample-book/src/style.css
index e80c7f459..75c67c1bd 100644
--- a/test/sample-book/src/style.css
+++ b/test/sample-book/src/style.css
@@ -248,4 +248,26 @@ strong{
 }
 em {
     font-style: italic;
-}
\ No newline at end of file
+}
+
+/**
+ * from EBPAJ EPUB 3 File Creation Guide sample style
+ *
+ * cf. http://ebpaj.jp/counsel/guide
+ */
+
+/* image width definition(pacentage)  */
+.width-010per { width:  10%; }
+.width-020per { width:  20%; }
+.width-025per { width:  25%; }
+.width-030per { width:  30%; }
+.width-033per { width:  33%; }
+.width-040per { width:  40%; }
+.width-050per { width:  50%; }
+.width-060per { width:  60%; }
+.width-067per { width:  67%; }
+.width-070per { width:  70%; }
+.width-075per { width:  75%; }
+.width-080per { width:  80%; }
+.width-090per { width:  90%; }
+.width-100per { width: 100%; }
diff --git a/test/test_htmlbuilder.rb b/test/test_htmlbuilder.rb
index ddcae160c..6cf2a22b7 100644
--- a/test/test_htmlbuilder.rb
+++ b/test/test_htmlbuilder.rb
@@ -359,7 +359,7 @@ def @chapter.image(id)
     end
 
     actual = compile_block("//image[sampleimg][sample photo][scale=1.2]{\n//}\n")
-    assert_equal %Q|<div id="sampleimg" class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" width="120%" />\n<p class="caption">\n図1.1: sample photo\n</p>\n</div>\n|, actual
+    assert_equal %Q|<div id="sampleimg" class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" class="width-120per" />\n<p class="caption">\n図1.1: sample photo\n</p>\n</div>\n|, actual
   end
 
   def test_image_with_metric2
@@ -370,7 +370,7 @@ def @chapter.image(id)
     end
 
     actual = compile_block("//image[sampleimg][sample photo][scale=1.2,html::class=sample,latex::ignore=params]{\n//}\n")
-    assert_equal %Q|<div id="sampleimg" class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" width="120%" class="sample" />\n<p class="caption">\n図1.1: sample photo\n</p>\n</div>\n|, actual
+    assert_equal %Q|<div id="sampleimg" class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" class="width-120per sample" />\n<p class="caption">\n図1.1: sample photo\n</p>\n</div>\n|, actual
   end
 
   def test_image_with_tricky_id
@@ -414,7 +414,7 @@ def @chapter.image(id)
     end
 
     actual = compile_block("//indepimage[sampleimg][sample photo][scale=1.2]\n")
-    assert_equal %Q|<div class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" width="120%" />\n<p class="caption">\n図: sample photo\n</p>\n</div>\n|, actual
+    assert_equal %Q|<div class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" class="width-120per" />\n<p class="caption">\n図: sample photo\n</p>\n</div>\n|, actual
   end
 
   def test_indepimage_with_metric2
@@ -425,7 +425,7 @@ def @chapter.image(id)
     end
 
     actual = compile_block("//indepimage[sampleimg][sample photo][scale=1.2, html::class=\"sample\",latex::ignore=params]\n")
-    assert_equal %Q|<div class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" width="120%" class="sample" />\n<p class="caption">\n図: sample photo\n</p>\n</div>\n|, actual
+    assert_equal %Q|<div class="image">\n<img src="images/chap1-sampleimg.png" alt="sample photo" class="width-120per sample" />\n<p class="caption">\n図: sample photo\n</p>\n</div>\n|, actual
   end
 
   def test_indepimage_without_caption_but_with_metric
@@ -436,7 +436,7 @@ def @chapter.image(id)
     end
 
     actual = compile_block("//indepimage[sampleimg][][scale=1.2]\n")
-    assert_equal %Q|<div class="image">\n<img src="images/chap1-sampleimg.png" alt="" width="120%" />\n</div>\n|, actual
+    assert_equal %Q|<div class="image">\n<img src="images/chap1-sampleimg.png" alt="" class="width-120per" />\n</div>\n|, actual
   end
 
   def test_dlist