Merge pull request #222 from Badgerati/ruby

Add ruby pronunciation support on text
Badgerati · Nov 21, 2021 · ab636c2 · ab636c2
2 parents 01fcbec + acc2b94
commit ab636c2
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 0 deletions.
diff --git a/docs/Tutorials/Elements/Text.md b/docs/Tutorials/Elements/Text.md
@@ -17,3 +17,13 @@ New-PodeWebCard -Content @(
 Which looks like below:
 
 ![text](../../../images/text.png)
+
+## Pronunciation
+
+You can add small pronunciation text above displayed text by using `-Pronunciation`:
+
+```powershell
+New-PodeWebText -Value '漢' -Pronunciation 'ㄏㄢˋ'
+```
+
+(Note: for the above to render properly, use PowerShell 6+)
diff --git a/examples/full.ps1 b/examples/full.ps1
@@ -68,6 +68,10 @@ Start-PodeServer -StatusPageExceptions Show {
             New-PodeWebText -Value 'example' -Style Italics
             New-PodeWebText -Value ' paragraphs' -Style Bold
         )
+        New-PodeWebParagraph -Elements @(
+            New-PodeWebText -Value 'Pronuncation example: '
+            New-PodeWebText -Value '漢' -Pronunciation 'ㄏㄢˋ'
+        )
         New-PodeWebParagraph -Elements @(
             New-PodeWebText -Value "Look, here's a "
             New-PodeWebLink -Source 'https://github.com/badgerati/pode' -Value 'link' -NewTab

diff --git a/src/Public/Elements.ps1 b/src/Public/Elements.ps1
@@ -1045,6 +1045,10 @@ function New-PodeWebText
         [hashtable]
         $CssStyle,
 
+        [Parameter()]
+        [string]
+        $Pronunciation,
+
         [Parameter(ParameterSetName='Paragraph')]
         [switch]
         $InParagraph
@@ -1056,6 +1060,7 @@ function New-PodeWebText
         Parent = $ElementData
         ID = (Get-PodeWebElementId -Tag Txt -Id $Id -RandomToken)
         Value = [System.Net.WebUtility]::HtmlEncode($Value)
+        Pronunciation = [System.Net.WebUtility]::HtmlEncode($Pronunciation)
         Style = $Style
         InParagraph = $InParagraph.IsPresent
         Alignment = $Alignment.ToLowerInvariant()

diff --git a/src/Templates/Public/styles/default.css b/src/Templates/Public/styles/default.css
@@ -21,6 +21,11 @@ button#menu-toggle {
     width: 50px;
 }
 
+ruby rt {
+    font-size: 53%;
+    font-style: normal;
+}
+
 .footer.powered-by {
     border-width: 1px;
     border-style: solid;

diff --git a/src/Templates/Views/elements/text.pode b/src/Templates/Views/elements/text.pode
@@ -31,6 +31,10 @@ $(
         }
     }
 
+    if (![string]::IsNullOrWhiteSpace($data.Pronunciation)) {
+        $value = "<ruby>$($value) <rt>$($data.Pronunciation)</rt></ruby>"
+    }
+
     if ($data.InParagraph) {
         $value = "<p class='text-$($data.Alignment)'>$($value)</p>"
     }