Om du vill att enstaka radbrytningar i källtexten ska visas som mellanslag och tomrader ska inleda stycken behöver du skapa styckestrukturen innan du låter texten radbrytas som vanligt. På en Mac kan du testa detta på en lokal webbsida i webbläsaren. CSS kan inte ensam skilja mellan dessa fall.

Den här guiden är för dig som förbereder engelsk prosa för en enkel webbsida eller Markdown-förhandsvisning. Målet är att bevara läsbara rader i källtexten och samtidigt skapa löpande stycken som radbryts på nytt när webbläsarfönstrets bredd ändras.

Varför en CSS-inställning för blanksteg inte löser båda kraven

Tänk dig följande syntetiska källtext. Varje stycke består av två källrader, och en tom rad skiljer styckena åt:

Panel A presenterar layouten
och beskriver det första avsnittet.

Panel B presenterar ett annat avsnitt
och beskriver det återstående utrymmet.

Resultatet ska vara två stycken. Inom varje stycke omvandlas radbrytningen i källtexten till ett mellanslag. Sedan väljer webbläsaren var raderna ska brytas utifrån det tillgängliga utrymmet.

Med white-space: normal kollapsar radbrytningar i källtexten tillsammans med andra blanksteg som kan kollapsas. Det gäller även flera radbrytningar i följd: en tom källrad skapar inget stycke. Med white-space: pre-line bevaras radbrytningstecknen som radbrytningar, även de enstaka radbrytningar som du ville slå ihop. MDN beskriver beteendet i sin referens för egenskapen white-space.

Inställning på ett textblock Enstaka radbrytning i källtexten Tom källrad Passar för den här uppgiften?
white-space: normal Kollapsar tillsammans med blanksteg Kollapsar också Först efter att styckena har skapats
white-space: pre-line Bevarar en radbrytning Bevarar radbrytningar Nej
white-space: pre-wrap Bevarar en radbrytning Bevarar radbrytningar Nej
Separata styckeelement med white-space: normal Flyter inom varje stycke Representeras av en styckegräns Ja

W3C beskriver blankstegshantering som en visningsåtgärd som lämnar underliggande dokumentdata oförändrade. Reglerna för segmentbrytningar beror också på den omgivande texten. Att ersätta en radbrytning med ett mellanslag passar för den engelska prosan här, men är inte en universell omvandling för all text. Se CSS Text Module Level 3.

Den praktiska lösningen har därför två steg: identifiera styckena i källtexten och låt sedan webbläsaren formatera texten. WHATWG:s HTML-standard definierar elementet p som ett element som representerar ett stycke. Avståndet som visas runt det kan styras separat med formatmallar. Se elementet p.

Välj arbetsflödet som passar din källtext

Använd följande beslutsstöd innan du ändrar något. Det skiljer tolkningen av källtexten från utseendet, så att du undviker att åtgärda fel del.

Vad du har Vad du ska göra
Vanlig text som bara innehåller prosa Dela vid tomrader, slå ihop enstaka radbrytningar inom varje stycke och skapa styckeelement
Markdown med rubriker, listor eller kodblock Använd en Markdown-parser och kontrollera hur den hanterar mjuka radbrytningar
Befintlig HTML med separata styckeelement Kontrollera styckenas inställningar för blanksteg och avstånd
En sida med uttryckliga radbrytningselement Korrigera källtexten eller renderingskonfigurationen om radbrytningarna inte är avsiktliga
En sida som du bara kan visa Använd ett tillgängligt arbetsflöde för källtext eller export. Exemplen här förutsätter att du kan styra dokumentet

Ersätt inte alla radbrytningar med mellanslag innan du har identifierat styckena: då försvinner avgränsarna som behövs för att skilja dem åt. Ersätt inte heller styckestrukturen med upprepade br-element. WHATWG definierar br som en radbrytning och anger att det inte får användas för att skilja tematiska grupper åt inom ett stycke. Se elementet br.

Skapa ett lokalt exempel att arbeta med i TextEdit

Följande kompletta webbsida kräver TextEdit och en webbläsare med JavaScript aktiverat. Den har ett redigerbart källtextfält och en separat förhandsvisning. Den använder inga externa bibliotek.

  1. Öppna TextEdit och välj Arkiv > Nytt och sedan Format > Gör om till oformaterad text.
  2. Klistra in hela exemplet nedan.
  3. Välj Arkiv > Spara och döp filen till paragraph-demo.html.
  4. Om du får frågan om filändelsen väljer du Använd .html.
  5. Öppna den sparade filen i Safari eller en annan webbläsare på datorn.

Apple beskriver stegen för att skapa oformaterad text och välja filändelse i Arbeta med HTML-dokument i TextEdit på Mac. När du öppnar filen igen för redigering väljer du inställningen Visa HTML-filer som HTML-kod i stället för formaterad text under TextEdit > Inställningar > Öppna och spara.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph flow demo</title>
  <style>
    body {
      max-width: 46rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font: 1rem/1.6 system-ui, sans-serif;
    }
    label { display: block; }
    textarea {
      box-sizing: border-box;
      width: 100%;
      min-height: 12rem;
      font: 1rem/1.5 monospace;
    }
    #preview p {
      white-space: normal;
      margin: 0;
    }
    #preview p + p { margin-top: 1em; }
  </style>
</head>
<body>
  <h1>Paragraph flow demo</h1>
  <label for="source">Source text</label>
  <textarea id="source">Panel A introduces the layout
and describes the first section.

Panel B introduces another section
and describes the remaining space.</textarea>
  <h2>Preview</h2>
  <div id="preview"></div>
  <script>
    function toParagraphs(source) {
      return source.replace(/\r\n?/g, '\n')
        .split(/\n[ \t]*\n(?:[ \t]*\n)*/)
        .map(block => block
          .replace(/^[ \t\n]+|[ \t\n]+$/g, '')
          .replace(/[ \t]*\n[ \t]*/g, ' '))
        .filter(text => text.length > 0);
    }

    const source = document.getElementById('source');
    const preview = document.getElementById('preview');

    function render() {
      const paragraphs = toParagraphs(source.value).map(text => {
        const paragraph = document.createElement('p');
        paragraph.textContent = text;
        return paragraph;
      });
      preview.replaceChildren(...paragraphs);
    }

    source.addEventListener('input', render);
    render();
  </script>
</body>
</html>

Omvandlaren normaliserar först radslut i CR- och CRLF-format till LF. Sedan delar den texten där en rad är tom eller bara innehåller vanliga mellanslag och tabbar. I varje resulterande block ersätter den kvarvarande radbrytningar, tillsammans med närliggande mellanslag eller tabbar, med ett vanligt mellanslag.

Det här är uttryckliga regler för exemplet, inte en allmän dokumentparser. Flera tomma rader ger en enda styckegräns. Inledande och avslutande vanliga blanksteg tas bort. En tom inmatning ger inga stycken. Källtexten är fortfarande synlig i inmatningsfältet, så att du kan jämföra den med resultatet.

Texten i varje utdatastycke anges med textContent. MDN beskriver att tilldelning till den här egenskapen ersätter en nods underordnade noder med en textnod. Här används den endast på nyskapade, tomma stycken. Se Node: egenskapen textContent.

Omvandlingsfunktionen klarade sex deterministiska kontroller i Node.js: vanlig styckeinmatning, CRLF-inmatning, CR-inmatning, inmatning med enbart tomrum, upprepade tomrader och bevarande av ett fast mellanslag. Webbläsarrendering kördes inte under förberedelserna. Använd de visuella kontrollerna nedan för att verifiera resultatet på din Mac.

Kontrollera styckegränser och radbrytning var för sig

Börja med det angivna exemplet. Förhandsvisningen ska innehålla Panel A presenterar layouten och beskriver det första avsnittet. som ett stycke, följt av motsvarande stycke om Panel B. I ett smalt webbläsarfönster kan varje stycke sträcka sig över flera synliga rader.

Gör sedan följande kontrollerade ändringar:

  1. Ersätt den enstaka radbrytningen efter layout med ett mellanslag. Styckestrukturen i förhandsvisningen ska vara oförändrad.
  2. Återställ radbrytningen och ta bort den tomma raden mellan de två blocken. Förhandsvisningen ska nu visa ett enda stycke.
  3. Lägg till en tom rad som bara innehåller mellanslag eller tabbar mellan blocken. Förhandsvisningen ska återgå till två stycken.
  4. Lägg till flera tomma rader där. Avståndet ska fortfarande motsvara ett enda styckeavstånd.
  5. Ändra storlek på webbläsarfönstret. Styckegränsen ska ligga kvar medan raderna inom varje stycke bryts om.

Den här sekvensen skiljer källtextens gränser från webbläsarens radbrytning. I exemplet kommer styckeavståndet från marginalregeln mellan intilliggande stycken. Om du ändrar marginalen ändras det synliga mellanrummet utan att påverka hur källtexten tolkas.

Om du använder white-space: normal utan den här omvandlaren betyder det visuella hopslaget inte att radbrytningen har tagits bort ur källtexten. MDN förklarar att blanksteg i vanlig text fortfarande finns kvar i DOM:en även när CSS kollapsar dem vid visningen. Se Hantera blanksteg.

Använd Markdown-parsning för Markdown-dokument

Markdown har redan den styckekonvention som behövs här. CommonMark definierar ett stycke som en följd av icke-tomma rader som inte utgör en annan blocktyp. Tomma rader skiljer stycken åt. En vanlig radbrytning inom ett stycke är en mjuk radbrytning, som en renderare kan återge som en radbrytning eller ett mellanslag. Se stycken i CommonMark och mjuka radbrytningar.

Klistra in det syntetiska exemplet i källvyn i din Markdown-redigerare och granska förhandsvisningen. Om varje enstaka radbrytning ger en synlig radbrytning kontrollerar du redigerarens dokumenterade renderingsalternativ. Utgå inte från att alla Markdown-program har samma inställning.

Om projektet använder biblioteket markdown-it har det dokumenterade alternativet breaks värdet false som standard. Om du anger true omvandlas radbrytningar i stycken till br-element. Om alternativet behålls som false får du löpande stycken, förutsatt att CSS för utdata också kollapsar blanksteg. Se MarkdownItOptions.

Uttryckliga hårda radbrytningar i Markdown kräver fortfarande uppmärksamhet. Enligt CommonMark kan två eller fler avslutande mellanslag eller ett avslutande omvänt snedstreck skapa en hård radbrytning. Ta bara bort dessa markörer där de inte är avsiktliga. Reglerna beskrivs under hårda radbrytningar.

Kör inte omvandlaren för vanlig text över ett helt Markdown-dokument. Den känner inte igen rubriker, listor, inramade kodblock eller indrag. Låt en Markdown-parser bevara de strukturerna och använd inställningar för blanksteg på de resulterande styckena med löpande text.

Bevara gränser för webbläsaren och textformningen

Låt varje textstycke i löpande prosa vara sammanhängande när det är praktiskt möjligt. Exemplet skapar en textnod per stycke och låter webbläsaren sköta radbrytning och teckenlayout. Det mäter inte ord eller lägger till separata element runt varje tecken.

Den gränsen spelar roll för typografin. W3C anger omständigheter där textformningen måste fortsätta över gränser mellan inline-element och omständigheter där den måste avbrytas, bland annat vid vissa ändringar av avstånd och justering. Undvik onödiga inline-element som bara läggs till för att styra radpositioner. Se formning över elementgränser.

Använd bara omvandlaren när varje enstaka radbrytning i källtexten är en redaktionell radbrytning. Om en radbrytning avsiktligt skiljer etiketter åt eller ligger mitt i ett ord ändras innehållet när du slår ihop raderna med mellanslag. I exemplet räknas också en rad med ett fast mellanslag som innehåll och inte som en tom avgränsare. MDN skiljer fasta mellanslag från vanliga blanksteg i dokumenttexten som kan kollapsas i Hantera blanksteg.

För engelsk prosa skapar du först styckegränser och låter sedan webbläsaren radbryta texten som vanligt inom styckena. Det lokala exemplet gör regeln enkel att granska: källtexten behåller sina redigerbara rader, förhandsvisningen innehåller riktiga stycken och en storleksändring påverkar bara de synliga radbrytningarna.

Källor