cssfootnotesobsidiantext-direction

Set Text Direction in Footnotes in Obsidian

I am using Obsidian. I write sources from both English and Hebrew sources and I reference them in my footnotes. The problem is that the footnotes that begin with an English word begin on the left side of the page and the footnotes that begin with a Hebrew word begin on the right side of the page, which looks a bit stupid. I want all of my footnotes to begin from the left side (as I mostly write in English). This is what it looks like now:

enter image description here

Another problem is that when I write a line in that begins in Hebrew but also has English mixed in, the English is on the left side and the Hebrew is on the right, like this:

enter image description here

On this line, the Hebrew is the first word. The problem is that I want to be able to read the line from left to right (as most of my stuff is in English) and so I want the Hebrew to appear on the left of the line (as the first word, which it is).

In short, I want my notes to look like this:

enter image description here

This is actually the way my notes look when I am in editing mode. However, this doesn't carry over to reading mode. I had the same problem in editing mode originally and I changed it by adding the following css:

.HyperMD-footnote, .cm-hmd-footnote {direction: ltr;}

I tried to do something similar to fix the reading mode and so I added the following:

p {direction: ltr;}
li {direction: ltr;}

This did not work and I have no idea why not.

Solution

  • Second edit:

    I added a trim function, for I believe that has to be added to the code for it to work:

    document.addEventListener("DOMContentLoaded", function() {
  var list = document.getElementById("trimMe");
  if (list) {
    var listItems = list.getElementsByTagName("li");
    for (var i = 0; i < listItems.length; i++) {
      var listItem = listItems[i];
      listItem.textContent = listItem.textContent.trim();
    }
  } else {
    console.error("Element with id 'trimMe' not found.");
  }
});
    .pre {
  white-space: pre;
}

.pre2 ol li {
  display: block;
}

.left-align li {
  text-align: left;
  direction: ltr;
}
    <!--first solution-->
<h2>Fist solution:</h2>
<div class="pre">
  1 English English English 
  עכרית עכרית עכרית 2 
  3 English English English 
  עברית עכרית עכרית 4
  5 English English English 
  עברית 6 English English English
</div>
<!--second solution-->
<br/>
<h2>Second solution:</h2>
<ol class="pre2" id="trimMe">
  <li> English English English </li>
  <li>עכרית עכרית עכרית</li>
  <li>English English English</li>
  <li>עברית עכרית עכרית</li>
  <li>English English English</li>
  <li>עברית English English English</li>
</ol>

<!-- third solution -->

<h2>Third solution:</h2>

    <ol class="left-align">
      <li>   English English English   </li>
      <li>עכרית עכרית עכרית</li>
      <li>English English English</li>
      <li>עברית עכרית עכרית</li>
      <li>English English English</li>
      <li>עברית English English English</li>
    </ol>

    A surely working solution can be found in the link provided by OP, that looks like this:

    .markdown-preview-view .footnotes,
.markdown-preview-view .footnotes ol,
.markdown-preview-view .footnotes li,
.markdown-preview-view .footnotes li p {
    text-align: left !important;
    direction: ltr !important;
    unicode-bidi: embed !important;
}


.markdown-preview-view .footnotes ol,
.markdown-preview-view .footnotes li {
    text-align: left !important;
    direction: ltr !important;
}