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;
}