nnn: wcswidth returns the different values between macOS and Linux

2023/08/09/nnn-wcswith-different-macos-linux.md

@@ -0,0 +1,23 @@
+---
+title: "nnn: wcswidth returns different values for same Unicode code point between macOS and Linux"
+date: 2023-08-09
+description:
+categories:
+- Development Environment
+tags:
+- nnn
+- wcswidth
+- macOS
+---
+When attempting to [integrate `nnn` with Helix](/2023/08/02/file-tree-workaround-for-helix.md), I encountered [an interesting issue](https://github.com/jarun/nnn/issues/1692) that resulted in duplicate first characters in the filename:
+
+![nnn duplicate first character in the filename on macOS](/2023/08/09/nnn-duplicate-first-char-macOS.png)
+
+What's interesting is that this issue doesn't occur on Linux:
+
+![nnn on Linux](/2023/08/09/nnn-linux.png)
+
+I've spent several days troubleshooting this problem but haven't been able to identify the root cause.
+The only solution I could come up with is [a workaround](https://github.com/jarun/nnn/pull/1711), and I must admit, I'm still not entirely satisfied with it.
+
+If you also use `nnn` and know of a better way to fix this issue without requiring a refresh, please don't hesitate to let me know. Thank you!

ui/static/css/basic.css

@@ -1,102 +1,111 @@
-article > * {
-    min-width: 0;
+article>* {
+  min-width: 0;
 }
 
-article > p, ul, ol {
-    --x-height-multiplier: 0.375;
-    --baseline-multiplier: 0.17;
-    letter-spacing: .01rem;
-    line-height: 1.58;
-    color: rgba(0,0,0,.84);
-    text-rendering: optimizeLegibility;
+article>p,
+ul,
+ol {
+  --x-height-multiplier: 0.375;
+  --baseline-multiplier: 0.17;
+  letter-spacing: .01rem;
+  line-height: 1.58;
+  color: rgba(0, 0, 0, .84);
+  text-rendering: optimizeLegibility;
 }
 
-article > .aside {
-    margin: 30px 20px;
-    color: #666;
-    font-size: 0.8em;
+article>.aside {
+  margin: 30px 20px;
+  color: #666;
+  font-size: 0.8em;
 }
 
-p > img {
-    width: 100%;
+p>img {
+  max-width: 100%;
 }
 
-a > img {
-    max-width: 90%;
+@media (max-width: 768px) {
+  img {
+    width: auto;
+    /* Set width to auto when the screen width is less than or equal to 768px */
+  }
 }
 
-img + em {
-    display: block;
-    text-align: center;
+a>img {
+  max-width: 90%;
+}
+
+img+em {
+  display: block;
+  text-align: center;
 }
 
 .line-numbers a {
-    text-decoration: none;
-    color: #000;
-    padding-right: 1em;
+  text-decoration: none;
+  color: #000;
+  padding-right: 1em;
 }
 
 code {
-    background: #eee;
-    padding: 2px 5px;
+  background: #eee;
+  padding: 2px 5px;
 }
 
 pre {
-    background: #eee;
-    padding: 10px 15px;
-    overflow: auto;
+  background: #eee;
+  padding: 10px 15px;
+  overflow: auto;
 }
 
-pre > code {
-    padding: 0;
+pre>code {
+  padding: 0;
 }
 
 figure {
-    margin: 0;
+  margin: 0;
 }
 
 figure figcaption {
-    color: #666;
-    font-style: italic;
-    font-size: 0.8em;
+  color: #666;
+  font-style: italic;
+  font-size: 0.8em;
 }
 
 header .title {
-    font-size: 1.5em;
+  font-size: 1.5em;
 }
 
 .quanface {
-    display: block;
-    border-radius: 75px;
-    margin: 5px auto;
+  display: block;
+  border-radius: 75px;
+  margin: 5px auto;
 }
 
 header .navi ul {
-    padding: 0;
+  padding: 0;
 }
 
 header .navi ul li {
-    display: inline;
-    margin: 0;
-    padding: 0 0.4em;
+  display: inline;
+  margin: 0;
+  padding: 0 0.4em;
 }
 
 footer .elsewhere ul {
-    padding: 0;
+  padding: 0;
 }
 
 footer .elsewhere ul li {
-    display: inline;
-    margin: 0;
-    padding: 0;
+  display: inline;
+  margin: 0;
+  padding: 0;
 }
 
 footer .navi ul {
-    padding: 0;
+  padding: 0;
 }
 
 footer .navi ul li {
-    display: inline;
-    margin: 0;
-    padding: 0 0.4em;
+  display: inline;
+  margin: 0;
+  padding: 0 0.4em;
 }