📚 Lärdom: Svenska tecken och UTF-8 encoding

En praktisk erfarenhet från Bjerreds Saltsjöbad-projektet

Dokumenterat: 2026-02-04

💡 Om denna sida:

Under utvecklingen av README-filen för Bjerreds Saltsjöbad inpasseringsprojekt stötte vi på ett klassiskt UTF-8 encoding-problem med svenska tecken (å, ä, ö). Detta dokument beskriver problemet, våra försök att lösa det, och den slutgiltiga lösningen - tack vare Git!

📄 Tillbaka till README 🏠 Till huvudpresentationen

❌ Problemet

Symptom

Svenska tecken (å, ä, ö) visades inte korrekt i README.md-filen. Beroende på var filen öppnades såg vi olika problem:

  • I Cursor (lokalt): Först såg det bra ut, sedan förvärrades det
  • På webbservern: Svenska tecken ersattes med konstiga tecken

❌ Före (Felaktig encoding)

Saltsjöbad
Användning
Förklara
övergång

Tecken visades som: ö, ä, å

Skärmdump som visar felaktiga svenska tecken i README.md

📸 Så här såg det ut - svenska tecken visades helt fel!

Ord som "är", "för", "över" blev oläsbara med konstiga tecken som är, för, över.

✅ Efter (Korrekt encoding)

Saltsjöbad
Användning
Förklara
övergång

Tecken visas korrekt: ö, ä, å

Skärmdump som visar korrekta svenska tecken i README.md

📸 Efter Git-återställning - perfekt! Alla svenska tecken fungerar!

Tack vare Git kunde vi återställa till den fungerande versionen på 30 sekunder.

Varför händer detta?

Detta är ett klassiskt character encoding-problem:

🔧 Våra försök att lösa problemet

Vi provade flera olika lösningar för att fixa encoding-problemet:

Försök 1: Skriva om filen med Write-verktyget

Write tool → README.md (försök att tvinga UTF-8)

Resultat: ❌ Fungerade inte - samma problem kvarstod

Försök 2: UTF-8 med BOM (Byte Order Mark)

[System.IO.File]::WriteAllText("README.md", $content, [System.Text.UTF8Encoding]::new($true))

Resultat: ❌ Försämrade situationen - fungerade sämre både lokalt och på webben

Varför? BOM kan orsaka problem i vissa system och webbläsare

Försök 3: UTF-8 utan BOM + .htaccess

# PowerShell för UTF-8 utan BOM
$utf8NoBom = New-Object System.Text.UTF8Encoding $false
[System.IO.File]::WriteAllText("README.md", $content, $utf8NoBom)

# Plus .htaccess för webbserver
AddDefaultCharset UTF-8

Resultat: ❌ Fungerade fortfarande inte bra i Cursor

📸 Visuell dokumentation - Före och Efter

För att verkligen förstå problemets omfattning och hur väl lösningen fungerade, här är skärmdumpar från Cursor-editorn:

❌ Före: Encoding-problemet

Skärmdump från Cursor som visar README.md med felaktiga svenska tecken

Problemet i Cursor: Svenska tecken ersattes med konstiga teckenkombinationer

Vad ser vi här?

  • ö istället för ö (som i "för", "över", "Saltsjöbad")
  • ä istället för ä (som i "är", "väl", "får")
  • Ã¥ istället för å (som i "går", "på", "från")
  • Text blev svårläst och oprofessionell

Orsak: Filen sparades med en encoding (troligen UTF-8 med BOM eller fel konvertering) som inte tolkades korrekt av editorn.

✅ Efter: Problemet löst med Git

Skärmdump från Cursor som visar README.md med korrekta svenska tecken

Lösningen: Efter git checkout - alla svenska tecken fungerar perfekt!

Vad ser vi här?

  • ✅ Alla ö, ä, å visas korrekt
  • ✅ Text är läsbar och professionell
  • ✅ Ingen märklig teckenkonvertering
  • ✅ README fungerar både i Cursor och på webben

Lösning: Istället för att fortsätta "fixa" problemet, använde vi Git för att återställa filen till en tidigare fungerande version (commit 81768b0). Detta tog 30 sekunder och fungerade perfekt!

💡 Viktigt minne:

Dessa bilder påminner oss om att ibland är den bästa "fixningen" att gå tillbaka till något som fungerade. Git gav oss den möjligheten utan att förlora något arbete. Den nya koden var fortfarande kvar i Git-historiken om vi skulle behöva den senare.

✅ Lösningen: Git till undsättning!

🎉 Vad vi gjorde:

  1. Kollade Git-historiken för att hitta när filen fungerade
  2. Identifierade fungerande commit (81768b0 - ca 38 minuter tidigare)
  3. Återställde filen med Git checkout
  4. Lyckades! Svenska tecken fungerar nu perfekt

Kommandot som löste det:

git log --oneline --all # Lista alla commits
git checkout 81768b0 -- README.md # Återställ filen till fungerande version
git commit -m "Återställ till fungerande version"

🌐 Viktig komponent: .htaccess-filen för webbservern

En viktig del av lösningen för att svenska tecken ska visas korrekt på webbservern är .htaccess-filen. Även om Git löste problemet lokalt i Cursor, behöver vi också säkerställa att filerna visas korrekt när de laddas upp på webben.

Vad är .htaccess?

.htaccess (Hypertext Access) är en konfigurationsfil för Apache-webbservern. Den ger dig möjlighet att ändra webbserverns beteende på katalognivå utan att behöva ändra huvudkonfigurationen.

Varför börjar den med en punkt? På Unix/Linux-system betyder en punkt i början att filen är dold. Det är en konvention för konfigurationsfiler.

Vad gör .htaccess i vårt projekt?

I Bjerreds Saltsjöbad-projektet säkerställer .htaccess-filen att webbservern skickar rätt UTF-8 encoding-headers till besökarnas webbläsare. Detta är kritiskt för att svenska tecken ska visas korrekt på webbplatsen.

Innehåll i vår .htaccess-fil:

# .htaccess för Bjerreds Saltsjöbad - Inpasseringsprojekt
# Säkerställer korrekt UTF-8 encoding för alla filer

# Lägg till UTF-8 charset till alla textfiler
AddDefaultCharset UTF-8

# Specifik hantering för Markdown-filer
<FilesMatch "\.md$">
    ForceType 'text/plain; charset=UTF-8'
    Header set Content-Type "text/plain; charset=UTF-8"
</FilesMatch>

# Specifik hantering för HTML-filer
<FilesMatch "\.(html|htm)$">
    ForceType 'text/html; charset=UTF-8'
</FilesMatch>

# Specifik hantering för JavaScript-filer
<FilesMatch "\.js$">
    ForceType 'application/javascript; charset=UTF-8'
</FilesMatch>

# Specifik hantering för CSS-filer
<FilesMatch "\.css$">
    ForceType 'text/css; charset=UTF-8'
</FilesMatch>

Förklaring rad för rad:

  1. AddDefaultCharset UTF-8

    Talar om för Apache att alla textfiler ska skickas med UTF-8 charset som standard. Detta är grundinställningen.

  2. FilesMatch-sektioner

    Specifika regler för olika filtyper (.md, .html, .js, .css). ForceType tvingar webbservern att använda rätt MIME-typ och charset oavsett vad den tror att filen är.

  3. Header set Content-Type

    För Markdown-filer sätter vi explicit HTTP-headern så att webbläsaren vet att filen ska tolkas som UTF-8.

Varför är detta så viktigt?

Utan .htaccess kan webbservern:

  • ❌ Gissa fel encoding (t.ex. ISO-8859-1 eller Windows-1252)
  • ❌ Skicka filer utan charset-information
  • ❌ Låta webbläsaren gissa (vilket ofta går fel med svenska tecken)

Med .htaccess:

  • ✅ Garanterar att alla filer skickas som UTF-8
  • ✅ Webbläsaren vet exakt hur tecken ska tolkas
  • ✅ Svenska tecken (å, ä, ö) fungerar perfekt för alla besökare

Hur implementerar man .htaccess?

  1. Skapa filen lokalt:

    Skapa en fil som heter .htaccess (observera punkten!) i projektets rotkatalog

  2. Lägg till innehållet:

    Kopiera innehållet ovan till filen

  3. Versionhantera i Git:
    git add .htaccess
    git commit -m "Lägg till .htaccess för UTF-8 encoding"
  4. Ladda upp till webbservern:

    Via FTP, SFTP, eller vilken metod du använder för att publicera webbplatsen

  5. Testa:

    Besök sidan i en webbläsare och kontrollera att svenska tecken visas korrekt

⚠️ Viktigt att veta:

  • .htaccess fungerar bara med Apache-servrar (de flesta webbhotell använder Apache)
  • Filnamnet måste vara exakt: .htaccess (med punkt, små bokstäver, ingen filändelse)
  • Placering: Lägg filen i samma katalog som index.html (eller högre upp i katalogträdet)
  • Synlighet: Filen kan vara dold i vissa FTP-klienter - se till att visa dolda filer
  • Rättigheter: Filen behöver vanligtvis rättigheterna 644 (läs/skriv för ägare, läs för grupp och övriga)

📚 Viktiga lärdomar

1. Git är ditt säkerhetsnät 🛡️

Istället för att fortsätta försöka "fixa" något som blir sämre och sämre, använd Git för att gå tillbaka till en fungerande version. Detta sparar tid och frustration!

2. "Om det inte är trasigt, fixa det inte" 🔨

Den ursprungliga filen fungerade utmärkt i Cursor (där vi arbetar mest). Att försöka optimera för webbservern gjorde det sämre överallt. Ibland är den befintliga lösningen redan bra nog.

3. UTF-8 encoding är komplicerat 😅

Olika system hanterar UTF-8 olika:

  • BOM vs ingen BOM: Windows gillar ofta BOM, Unix/web gillar oftast utan BOM
  • Editorer: Olika editorer sparar filer olika (Cursor, VS Code, Notepad++, etc.)
  • Webbservrar: Kan behöva explicit konfiguration (.htaccess, meta-taggar)

4. Testa i rätt miljö 🎯

Vi arbetade mest lokalt i Cursor, så det var viktigast att det fungerade där. Om huvudanvändningen är på webben, prioritera webbserverns behov istället.

5. Dokumentera lärdomar 📝

Denna sida du läser nu! Genom att dokumentera vad som hände kan vi (och andra) lära av misstagen nästa gång.

🛠️ Praktiska tips för framtiden

För att undvika encoding-problem:

  1. Använd alltid UTF-8: Se till att alla verktyg och editorer är inställda på UTF-8
  2. Lägg till meta-tagg i HTML:
    <meta charset="UTF-8">
  3. Kontrollera editor-inställningar: I Cursor/VS Code, kolla encoding i nedre högra hörnet
  4. Committa ofta i Git: Små, frekventa commits gör det lätt att återställa
  5. Testa direkt efter ändringar: Vänta inte med att upptäcka problem

Om problem uppstår:

  1. Försök inte för många "fixar": Varje försök kan göra det värre
  2. Använd Git för att gå tillbaka: Det är därför du har versionshantering!
  3. Kommandot du behöver:
    git log --oneline # Hitta fungerande commit
    git checkout [commit-hash] -- [fil] # Återställ filen

🔗 Relaterade resurser

Externa länkar:

🎓 Slutsats

Denna upplevelse påminner oss om två viktiga saker:

  1. Git är ovärderligt: Versionshantering handlar inte bara om samarbete - det är också ditt säkerhetsnät när saker går snett
  2. Ibland är "ångra" bättre än "fixa": Acceptera att ibenom är den bästa lösningen att gå tillbaka till något som fungerade

Tack vare Git kunde vi lösa problemet på 30 sekunder! 🚀

📄 Tillbaka till README 🏠 Till huvudpresentationen 📚 Git-guide