diff --git a/assets/css/style.css b/assets/css/style.css
index 2930d73..2c1988d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,10 +1,12 @@
 .d-l10n-translate-template {
-    display: none;
+    color: gainsboro;
 }
 
 .d-l10n-translated {
     text-decoration: underline dotted;
-    cursor: pointer;
+}
+
+.d-l10n-translated-reference {
 }
 
 .d-l10n-translated-entity-name {
@@ -27,11 +29,11 @@
     font-style: italic;
 }
 
-.d-l10n-translated-original:before {
+.d-l10n-translated-non-cjk:before {
     content: ' '
 }
 
-.d-l10n-translated-original:after {
+.d-l10n-translated-non-cjk:after {
     content: ' '
 }
 
@@ -57,7 +59,6 @@
 
 .d-l10n-control-box-item {
     display: inline-flex;
-    margin-right: 1rem;
     flex-flow: row;
     align-items: center;
 }
@@ -66,3 +67,13 @@
     display: block;
     margin-right: 0.5rem;
 }
+
+.d-l10n-control-box-vertical-divider {
+    border-left: 1px solid gray;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.d-l10n-translated-error {
+    color: red;
+}
diff --git a/assets/js/work.js b/assets/js/work.js
index 6c25689..3e36795 100644
--- a/assets/js/work.js
+++ b/assets/js/work.js
@@ -68,7 +68,7 @@ function setupControls() {
 }
 
 function processColorBoxes() {
-    const allColorBoxes = document.querySelectorAll(".d-l10n-color");
+    const allColorBoxes = document.querySelectorAll(".d-l10n-color")
 
     const knownColors = {}
 
@@ -77,22 +77,22 @@ function processColorBoxes() {
         const key = colorBox.innerHTML
         const value = colorBox.getAttribute('data-color')
         if (value == null || value.length < 1) {
-            return;
+            return
         }
 
         knownColors[key] = value
-    });
+    })
 
     // second pass: add a little box with the color
     allColorBoxes.forEach((colorBox) => {
         const key = colorBox.innerHTML
         const value = knownColors[key]
         if (value == null || value.length < 1) {
-            return;
+            return
         }
 
         colorBox.innerHTML = `<span class="d-l10n-color-box" style="background-color: ${value}" title="${value}"></span> ${key}`
-    });
+    })
 }
 
 function getPreferredTranslation() {
@@ -100,7 +100,7 @@ function getPreferredTranslation() {
         return localStorage.getItem("d-l10n-preferred-translation") || 'writer'
     }
 
-    return 'writer';
+    return 'writer'
 }
 
 function changePreferredTranslation(mode) {
@@ -116,16 +116,16 @@ function changePreferredTranslation(mode) {
 
 function getPreferredAnnotation() {
     if (localStorage) {
-        return localStorage.getItem("d-l10n-preferred-annotation") || 'none'
+        return localStorage.getItem("d-l10n-preferred-annotation") || 'hide'
     }
 
-    return 'none';
+    return 'hide'
 }
 
 function changePreferredAnnotation(mode) {
     // can be 'none', 'parenthesis', 'ruby'
-    if (mode !== 'none' && mode !== 'parenthesis' && mode !== 'ruby') {
-        mode = 'none'
+    if (mode !== 'hide' && mode !== 'parenthesis' && mode !== 'ruby') {
+        mode = 'hide'
     }
 
     if (localStorage) {
@@ -133,8 +133,29 @@ function changePreferredAnnotation(mode) {
     }
 }
 
+function processInlineAnnotation(box, processedString) {
+    const original = box.getAttribute('data-original')
+
+    return `${processedString} <span class="d-l10n-translated-inline-annotation">(${original})</span>&#32;`
+}
+
+function processRubyAnnotation(box, processedString) {
+    const original = box.getAttribute('data-original')
+
+    return `<ruby>${processedString}<rp>(</rp><rt>${original}</rt><rp>)</rp></ruby>`
+}
+
 function processTranslationBoxes() {
-    const boxes = document.querySelectorAll(".d-l10n-translate-template");
+    const boxes = document.querySelectorAll(".d-l10n-translate-template")
+    if (boxes.length < 1) {
+        // no translation needed, hide the controls
+        const controlBox = document.querySelector('.d-l10n-control-box')
+        if (controlBox) {
+            controlBox.style.display = 'none'
+        }
+
+        return
+    }
 
     const knownTranslations = {}
 
@@ -152,7 +173,7 @@ function processTranslationBoxes() {
         const isUntranslatable = box.getAttribute('data-untranslatable') === 'true'
 
         if (originalValue == null || originalValue.length < 1) {
-            return;
+            return
         }
 
         knownTranslations[key] = {
@@ -165,9 +186,10 @@ function processTranslationBoxes() {
             isManuscript: isManuscript,
             isUntranslatable: isUntranslatable
         }
-    });
+    })
 
     const currentPreferredTranslation = getPreferredTranslation()
+    const currentPreferredAnnotation = getPreferredAnnotation()
 
     // remove already generated boxes
     const generatedBoxes = document.querySelectorAll(".d-l10n-generated")
@@ -179,13 +201,15 @@ function processTranslationBoxes() {
     boxes.forEach((box) => {
         const key = box.innerHTML
         const translation = knownTranslations[key]
+        const isRefernece = box.getAttribute('data-ref') != null
         if (translation == null) {
-            return;
+            box.insertAdjacentHTML('afterend', `<span class="d-l10n-translated-error">Missing translation for: ${key}</span>`)
+            return
         }
 
         if (translation.isUntranslatable) {
-            box.innerHTML = `<em>${translation.original}</em>`
-            return;
+            box.insertAdjacentHTML('afterend', `<span class="d-l10n-translated-untranslatable">${translation.original}</span>`)
+            return
         }
 
         let preferredTranslation
@@ -202,7 +226,7 @@ function processTranslationBoxes() {
             if (isCjkContext(preferredTranslation)) {
                 preferredTranslation = `<span class="d-l10n-translated-entity-name-cjk">${preferredTranslation}</span>`
             } else {
-                preferredTranslation = `<span class="d-l10n-translated-entity-name">${preferredTranslation}</span>`
+                preferredTranslation = `<span class="d-l10n-translated-entity-name d-l10n-translated-non-cjk">${preferredTranslation}</span>`
             }
         }
 
@@ -210,7 +234,7 @@ function processTranslationBoxes() {
             if (isCjkContext(preferredTranslation)) {
                 preferredTranslation = `<span class="d-l10n-translated-manuscript-name-cjk">${preferredTranslation}</span>`
             } else {
-                preferredTranslation = `<span class="d-l10n-translated-manuscript-name">${preferredTranslation}</span>`
+                preferredTranslation = `<i class="d-l10n-translated-manuscript-name d-l10n-translated-non-cjk">${preferredTranslation}</i>`
             }
         }
 
@@ -218,11 +242,21 @@ function processTranslationBoxes() {
             preferredTranslation = `<ruby>${preferredTranslation}<rt>${translation.ruby}</rt></ruby>`
         }
 
-        if (currentPreferredTranslation === 'original') {
-            box.insertAdjacentHTML('afterend', `<span class="d-l10n-generated d-l10n-translated-original">${translation.original}</span>`)
+        if (isRefernece || currentPreferredTranslation === 'original') {
+            box.insertAdjacentHTML('afterend', `<span class="d-l10n-generated d-l10n-translated-reference">${preferredTranslation}</span>`)
         } else {
+            if (currentPreferredAnnotation === 'parenthesis') {
+                preferredTranslation = processInlineAnnotation(box, preferredTranslation)
+            }
+
+            if (currentPreferredAnnotation === 'ruby') {
+                preferredTranslation = processRubyAnnotation(box, preferredTranslation)
+            }
+
             box.insertAdjacentHTML('afterend', `<span class="d-l10n-generated d-l10n-translated" title="${translation.original}">${preferredTranslation}</span>`)
         }
+
+        box.style.display = 'none'
     })
 }
 
@@ -230,4 +264,4 @@ window.addEventListener("load", () => {
     setupControls()
     processColorBoxes()
     processTranslationBoxes()
-});
+})
diff --git a/shortcode.php b/shortcode.php
index bfb87f7..b752eaf 100644
--- a/shortcode.php
+++ b/shortcode.php
@@ -143,51 +143,54 @@ function d_l10n_color_shortcode($attr = array(), $content = null, $tag = ''): ?s
     return '<span class="d-l10n-color" data-color="' . $color . '">' . $content . '</span>';
 }
 
-function d_l10n_add_translation_controls($content) {
+function d_l10n_add_translation_controls($content): string
+{
     $controlHtml = <<<HTML
         <div class="d-l10n-control-box">
         <div class="d-l10n-control-box-item">
-            <label for="d-l10n-translation-mode">翻译模式</label>
+            <label for="d-l10n-translation-mode" class="d-l10n-control-box-item-label">翻译模式</label>
             <select id="d-l10n-translation-mode">
             <option value="writer">使用作者翻译</option>
             <option value="canonical">使用共识性翻译</option>
             <option value="original">显示原文</option>
             </select>
         </div>
+        <span class="d-l10n-control-box-vertical-divider"></span>
         <div class="d-l10n-control-box-item">
-            <label for="d-l10n-annotation-mode">注释模式</label>
+            <label for="d-l10n-annotation-mode" class="d-l10n-control-box-item-label">注释模式</label>
             <select id="d-l10n-annotation-mode">
             <option value="hide">不显示</option>
-            <option value="appending">括号内显示原文</option>
+            <option value="parenthesis">括号内显示原文</option>
             <option value="ruby">注音形式显示原文</option>
             </select>
         </div>
         </div>
-    HTML
+    HTML;
 
     $controlHtmlEn = <<<HTML
         <div class="d-l10n-control-box">
         <div class="d-l10n-control-box-item">
-            <label for="d-l10n-translation-mode">Translation Mode</label>
+            <label for="d-l10n-translation-mode" class="d-l10n-control-box-item-label">Translation Mode</label>
             <select id="d-l10n-translation-mode">
             <option value="writer">Use Writer's Translation</option>
             <option value="canonical">Use Canonical Translation</option>
             <option value="original">Show Original</option>
             </select>
         </div>
+        <span class="d-l10n-control-box-vertical-divider"></span>
         <div class="d-l10n-control-box-item">
-            <label for="d-l10n-annotation-mode">Annotation Mode</label>
+            <label for="d-l10n-annotation-mode" class="d-l10n-control-box-item-label">Annotation Mode</label>
             <select id="d-l10n-annotation-mode">
             <option value="hide">Hide</option>
-            <option value="appending">Append Original in Parentheses</option>
+            <option value="parenthesis">Append Original in Parentheses</option>
             <option value="ruby">Show Original in Ruby</option>
             </select>
         </div>
         </div>
-    HTML
+    HTML;
 
     $lang = get_bloginfo('language');
-    if (strpos($lang, 'zh') !== false) {
+    if (str_contains($lang, 'zh')) {
         $content = $controlHtml . $content;
     } else {
         $content = $controlHtmlEn . $content;