Translate obsidian publish website texts

Made this CSS hack to translate all english text in french in my published website since the feature isn’t there yet.

Related feature request : Localization of published web sites - Feature requests - Obsidian Forum

Translated :

  • “Links to this page” to the bottom of the notes
  • “Interactive graph” as title for the graph widget
  • “On this page” to the right column if there are headings
  • “Search page or heading…” as placeholder for the search bar
  • “Not found - This page does not exist” as text for the 404 page

Not translated :

  • “Powered by Obsidian Publish” at the bottom right corner : I couldn’t translate it while keeping the link.
  • “Powered by Obsidian” at the bottom right corner of the graph : The text is inside a canvas, I can’t translate it…
  • “Searching…” and “No results found.” : While searching things in the search bar : these texts have the same css class “.suggestion-empty” so I can’t translate them separately.

Drawbacks :

  • The translation of the search bar appear if you leave some text inside and click outside.
    If you don’t want that you can just remove the placeholder.
  • Translated texts can’t be selected

CSS to translate everything in french :

/* Hide "Powered by Obsidian" */

.site-footer a {
  display: none;
}

/* Translate "Links to this page" to "Liens vers cette page" */

.mod-footer .published-section-header > .published-section-header-icon {
  display: none;
}

.mod-footer .published-section-header > span {
  visibility: hidden;
  display: block;
  height: calc(var(--line-height-normal) * var(--component-title-size));
  height: 1lh;
}

.mod-footer .published-section-header > span:after {
  content: "Liens vers cette page";
  visibility: visible;
  display: block;
  position: relative;
  bottom: calc(var(--line-height-normal) * var(--component-title-size));
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* Translate "Interactive graph" to "Graphique intéractif" */

.graph-view-outer .published-section-header > .published-section-header-icon {
  display: none;
}

.graph-view-outer .published-section-header > span {
  visibility: hidden;
  display: block;
  height: calc(var(--line-height-normal) * var(--component-title-size));
  height: 1lh;
}

.graph-view-outer .published-section-header > span:after {
  content: "Graphique intéractif";
  visibility: visible;
  display: block;
  position: relative;
  bottom: calc(var(--line-height-normal) * var(--component-title-size));
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* Translate "On this page" to "Sur cette page" */

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > .published-section-header-icon {
  display: none;
}

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > span {
  visibility: hidden;
  display: block;
  height: calc(var(--line-height-normal) * var(--component-title-size));
  height: 1lh;
}

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > span:after {
  content: "Sur cette page";
  visibility: visible;
  display: block;
  position: relative;
  bottom: calc(var(--line-height-normal) * var(--component-title-size));
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* Translate "Search page or heading..." to "Rechercher une page ou un titre..." */

.search-bar::placeholder {
  color: transparent !important;
}

.search-bar {
  /* https://stackoverflow.com/a/59066059 */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='250px'><text x='30' y='19.5' fill='%23ababab' font-size='14'>Rechercher une page ou un titre...</text></svg>") !important;
  background-repeat: no-repeat !important;
}

.search-bar:focus {
  background-image: none !important;
}

/* Remove "Search page or heading..." */

.search-bar::placeholder {
  color: transparent !important;
}

.search-bar {
  background-image: none !important;
}

/* Translate "Not found - This page does not exist" to "Page introuvable - La page que vous avez demandée est introuvable" */

.not-found-title {
  visibility: hidden;
}

.not-found-title:after {
  content: "Page introuvable";
  visibility: visible;
  display: block;
}

.not-found-description {
  visibility: hidden;
}

.not-found-description:after {
  content: "La page que vous avez demandée est introuvable";
  visibility: visible;
  display: block;
}
2 Likes