直接加空格方式效果不理想，改用js和css配合来加空格

public/_includes/_banner.jade

@@ -1,6 +1,6 @@
 if banner
   .banner
-    p.text-body !{banner}
+    p.text-body.translated-cn !{banner}
 else if intro
   .banner
-    p.text-body !{intro}
+    p.text-body.translated-cn !{intro}

public/_includes/_scripts-include.jade

@@ -20,7 +20,7 @@ script(src="/resources/js/vendor/angular-material.min.js")
 
 
 <!-- Angular.io Site JS -->
-script(src="/resources/js/translate.js")
+script(src="/translate/cn/translate.js")
 script(src="/resources/js/site.js")
 script(src="/resources/js/controllers/app-controller.js")
 script(src="/resources/js/controllers/resources-controller.js")

public/docs/ts/latest/guide/animations.jade

@@ -513,7 +513,7 @@ figure
   measures from 0 to 1. The final timeline of the animation will based on the combination
   of keyframe offsets, duration, delay, and easing.
 
-  注意，这个偏移量并*不是*用绝对数字定义的时间段，而是在 0 到 1 之间的相对值(百分比)。动画的最终时间线会基于关键帧的偏移量、持续时间、延迟和缓动函数计算出来。
+  注意，这个偏移量并*不是*用绝对数字定义的时间段，而是在0到1之间的相对值（百分比）。动画的最终时间线会基于关键帧的偏移量、持续时间、延迟和缓动函数计算出来。
 
   Defining offsets for keyframes is optional. If we omit them, offsets with even
   spacing are automatically assigned. For example, three keyframes without predefined

public/resources/css/_translate.scss

@@ -16,6 +16,10 @@ td, th {
     font-style: normal;
     font-weight: bold;
   }
+  code, [lang=english] {
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+  }
 }
 
 .about-cn-translation {

public/resources/js/translate.js

@@ -1,104 +0,0 @@
-// TODO: refactor me!
-var sourceVisible = localStorage.getItem('source-visible') === 'true';
-
-(function ($) {
-  var nodes = document.querySelectorAll('p, li, h1, h2, h3, h4, h5, h6, header, a, button, small');
-  _.each(nodes, function (node) {
-    var $node = $(node);
-
-    if (isLink(node) || isButton(node)) {
-      $node.on('click', function (event) {
-        event.stopPropagation();
-      });
-
-      if (/^http?s:\/\//.test($node.attr('href')) && !$node.attr('target')) {
-        $node.attr('target', '_blank');
-      }
-    }
-
-    var prevNode = node.previousElementSibling;
-    var $prevNode = $(prevNode);
-
-    if (!prevNode) {
-      return;
-    }
-
-    if (isTranslationResult(node, prevNode)) {
-      if ($prevNode.hasClass('nav-list-item')) {
-        return;
-      }
-      if (isPureEnglish($node.text()) && $node.text() !== $prevNode.text()) {
-        return;
-      }
-
-      if (isPureEnglish($prevNode.text())) {
-        $node.attr('id', prevNode.id);
-        $node.addClass('translated');
-        $node.addClass('translated-cn');
-        $prevNode.removeAttr('id');
-        $prevNode.addClass('original-english');
-        if (!sourceVisible) {
-          $prevNode.addClass('hidden');
-        }
-        if (!isLink(node) && !isButton(node)) {
-          $node.on('click', function () {
-            $prevNode.toggleClass('hidden');
-          });
-          $prevNode.on('click', function () {
-            $prevNode.addClass('hidden');
-          });
-        }
-        $node.after($prevNode);
-      }
-    }
-  });
-
-  function isLink(node) {
-    return node.tagName.toUpperCase() === 'A';
-  }
-
-  function isButton(node) {
-    return node.tagName.toUpperCase() === 'BUTTON';
-  }
-
-  function isPureEnglish(text) {
-    // accept — , quotes, ® and façade too.
-    return /^[\1-\255—’“”ç®…]*$/.test(text);
-  }
-
-  function attributesToString(node) {
-    return _.chain(node.attributes)
-      .map(function (value) {
-        if (value.name === 'id') {
-          return '';
-        } else {
-          return value.name + '=' + value.value;
-        }
-      })
-      .sortBy()
-      .value()
-      .join(';');
-  }
-
-  function isClonedNode(node1, node2) {
-    return node1.tagName === node2.tagName &&
-      attributesToString(node1) === attributesToString(node2);
-  }
-
-  function indexOfSameType(node) {
-    var i = 0;
-    var aNode = node.parentNode.firstChild;
-    while (aNode !== node) {
-      ++i;
-      if (aNode.tagName !== node.tagName) {
-        i = 0;
-      }
-      aNode = aNode.nextElementSibling;
-    }
-    return i;
-  }
-
-  function isTranslationResult(node, prevNode) {
-    return indexOfSameType(node) % 2 === 1 && isClonedNode(node, prevNode) && isPureEnglish(prevNode.innerText);
-  }
-})(angular.element);

public/translate/cn/about.jade

@@ -50,7 +50,6 @@
         
     - Joeylin
     - 张旋
-    - Hantsy
     - 还有一些做好事不留名的雷锋
         
     想让你的名字也出现在这里吗？请提供[反馈、纠错](https://github.com/angular/angular-cn/issues)。

public/translate/cn/translate.js

@@ -0,0 +1,118 @@
+// TODO: refactor me!
+var sourceVisible = localStorage.getItem('source-visible') === 'true';
+
+(function ($) {
+  addOriginalToggler();
+  addSpacingBetweenCnAndEn();
+
+  function addOriginalToggler() {
+    var nodes = document.querySelectorAll('p, li, h1, h2, h3, h4, h5, h6, header, a, button, small');
+    _.each(nodes, function (node) {
+      var $node = $(node);
+
+      if (isLink(node) || isButton(node)) {
+        $node.on('click', function (event) {
+          event.stopPropagation();
+        });
+
+        if (/^http?s:\/\//.test($node.attr('href')) && !$node.attr('target')) {
+          $node.attr('target', '_blank');
+        }
+      }
+
+      var prevNode = node.previousElementSibling;
+      var $prevNode = $(prevNode);
+
+      if (!prevNode) {
+        return;
+      }
+
+      if (isTranslationResult(node, prevNode)) {
+        if ($prevNode.hasClass('nav-list-item')) {
+          return;
+        }
+        if (isPureEnglish($node.text()) && $node.text() !== $prevNode.text()) {
+          return;
+        }
+
+        if (isPureEnglish($prevNode.text())) {
+          $node.attr('id', prevNode.id);
+          $node.addClass('translated');
+          $node.addClass('translated-cn');
+          $prevNode.removeAttr('id');
+          $prevNode.addClass('original-english');
+          if (!sourceVisible) {
+            $prevNode.addClass('hidden');
+          }
+          if (!isLink(node) && !isButton(node)) {
+            $node.on('click', function () {
+              $prevNode.toggleClass('hidden');
+            });
+            $prevNode.on('click', function () {
+              $prevNode.addClass('hidden');
+            });
+          }
+          $node.after($prevNode);
+        }
+      }
+    });
+  }
+
+  function addSpacingBetweenCnAndEn($node) {
+    var nodes = document.querySelectorAll('.translated-cn');
+    _.each(nodes, function (node) {
+      var text = node.innerHTML;
+      text = text.replace(/([\x20-\xff]+)/g, '<span lang="english">$1</span>');
+      node.innerHTML = text;
+    });
+  }
+
+  function isLink(node) {
+    return node.tagName.toUpperCase() === 'A';
+  }
+
+  function isButton(node) {
+    return node.tagName.toUpperCase() === 'BUTTON';
+  }
+
+  function isPureEnglish(text) {
+    // accept &mdash; , quotes, ® and façade too.
+    return /^[\1-\255—’“”ç®…]*$/.test(text);
+  }
+
+  function attributesToString(node) {
+    return _.chain(node.attributes)
+      .map(function (value) {
+        if (value.name === 'id') {
+          return '';
+        } else {
+          return value.name + '=' + value.value;
+        }
+      })
+      .sortBy()
+      .value()
+      .join(';');
+  }
+
+  function isClonedNode(node1, node2) {
+    return node1.tagName === node2.tagName &&
+      attributesToString(node1) === attributesToString(node2);
+  }
+
+  function indexOfSameType(node) {
+    var i = 0;
+    var aNode = node.parentNode.firstChild;
+    while (aNode !== node) {
+      ++i;
+      if (aNode.tagName !== node.tagName) {
+        i = 0;
+      }
+      aNode = aNode.nextElementSibling;
+    }
+    return i;
+  }
+
+  function isTranslationResult(node, prevNode) {
+    return indexOfSameType(node) % 2 === 1 && isClonedNode(node, prevNode) && isPureEnglish(prevNode.innerText);
+  }
+})(angular.element);