how to do multi-lingual website the right way with no bloat?

i'm currently using plain html+css and some js for spoiler buttons. i have a page where i would like to have two versions available.

Use two html pages and use just one CSS

>>40951 That would involve opening a new page, is it possible to have just two buttons and the page content changes when you press one of them? We can use another html file but I want it to look like everything happens on one page, that makes sense to me. what do you think?

>>40952 You can use a frame for that purpose but please don't. Just make two pages. Literally why do you want "a single page" if you're changing the whole content anyway? What do you hope to achieve?

>>40953 i feel like the content should be one page because you just change language, you don't change the page (the content) of course two pages approach is okay too. just thinking about other ways

>>40950 >JS for spoiler Why not just CSS with a hover attribute? >multilingual Just have different subdomains like example.org and de.example.org then a set of links at the bottom to take you to the current page with a different languge.

>>40954 So it's the URL you want to keep the same between the two versions, if I understand correctly. Presumably, you want your site to automatically give the correct language when you visit a new page. If so, have a link or button that sets a cookie with the desired language, and have your server serve the correct page based on that cookie. I don't agree with that approach though, as I probably would want to link to a specific version of your site. Using a subdomain like >>40955 said or a top-level path segment (example.org/en/ or example.org/de/) would be better in just about every way I can think of.

>plain html+css and some js do you have the ability to use a server side programming language, or are you using some static site host? If you can use server side programming, you can use the accept-language header to determine the user's preferred language and serve them the correct page without any user interaction. As >>40957 mentions, you should still also provide a way for the user to select their preferred language and remember it with a cookie, since some users may wish to explore both versions of the site. They are also correct in that redirecting to a different page is usually preferable to rewriting the content on a single page. If you do not have the ability to do anything server-side, you can use javascript to read the Navigator.languages property and redirect to the appropriate page based on it. Still, allow users the ability to further set their preference and remember it using local storage. if you are dead set against using a separate page for whatever reason, there are template frameworks/libraries that allow you to specify translations. Writing one yourself is also very easy. If you're doing that server-side, it's not so terrible, but keep in mind that if you're applying the templates client-side, it breaks your site for non-js users. And If you go that route, make it configurable through the url via get parameters so that users can bookmark or link the version of the page they prefer.

Thanks for describing all the options guys. I'll go with just pages approach, it's better for sure. I just imagined it like in the games, you change the language and text changes immediately, no loading (of another page). What do you recommend from static site generators? currently everything is just html, but I would like to have a simple way to include my markdown files in the website. I don't want any heavy frameworks, and I'm not building a site from scratch, I already have something.

>>40962 >text changes immediately, no loading (of another page) another file *is* loaded when you change that, however the file is on your computer already so theres no need to go to an external webpage and its a relatively simple operation to render the additional text. if you want the webpage to be pre-loaded onto your machine, this is possible however such pre-caching is typically done by web browsers and cant be controlled by the site serving the page. that being said, you can use resource hints like link rel=preload in the HTML tags to *suggest* to web browsers that something should be loaded first. there are other, more complex prefetch/preload tools available but they are a bit newer of a product and not widely used or verified.

Yeah, you know, I just realized that my pages load so fast that it doesn't matter at all. Thanks guys for describing all the options, plain two pages way truly is the best one. What can you recommend as SSG, or some kind of converter? I'm writing HTML manually but I'm becoming tired of it, is there a way to easily convert Markdown into articles with my style, options, etc? I don't want to set up a site from scratch with SSG, I already have one.

>>40962 Can you share your site? (And perhaps put it in the lainchan webring thread?) It's hard to recommend a site generator without having some idea of the type of content you're serving. >don't want any heavy frameworks, and I'm not building a site from scratch, I already have something. bashblog is a small one, ~1k lines of bash and easily tweakable, but is geared towards blogs. you could also write your own generator. it won't be too hard. if you need markdown you can use one of the many markdown to html converters, or you could also use something simpler like gemtext or your own markup language.

>>40952 I actually think it SHOULD be a different page with different URL, so when the person comes back to their browser later and opens it from history it is in the language they want

>>40976 standard solution is a url resolver that builds to url / en / specific-page.html url / fr / specific-page.html ... It should look outward like a static html page so indexing and bookmarking work. Internally it can be a single page that is accessed by the server with /lang/ as an argument.

>>40952 simple to do but it involves using Javascript. I dont remember nomencluture, its <script on the button calling JS method, inside it document.getByHtmlTag(...).innerHTML = staticDictionaryOfLanguages[languageChosen]

>>40966 If you're familiar with python just use the jinja templating engine, otherwise search for "html templating engine" in whatever your preferred language is and I'm sure you'll find one.