Persoonlijke instellingen

Testpagina tekstuitlijning: verschil tussen versies

Uit BeneluxSpoor.net - Encyclopedie
Ga naar: navigatie, zoeken
k (Nieuwe pagina aangemaakt met '__NOTOC__ Teksten die niet goed onder elkaar komen te staan, zijn beter uit te lijnen door gebruik te maken van een 'hairspace' (numeriek #8202) en/of een 'thinspace' …')
 
k
 
(8 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
__NOTOC__
+
{{Koptekst
Teksten die niet goed onder elkaar komen te staan, zijn beter uit te lijnen door gebruik te maken van een 'hairspace' (numeriek #8202) en/of een 'thinspace' (numeriek #8201).
+
|Vorige= Overzicht Externe links
 +
|Volgende= Overzicht Externe links
 +
|VorigeMenu= EDIT
 +
|Auteur= Redactie
 +
}}
 +
Gewone tekst begint links.
  
Deze Wiki-code plaatst een smallere extra spatie tussen de tekst en de gewone spatie (ga naar '' 'Bewerken' '' om de code te zien).
+
Tekst tekst tekst tekst<br />
 +
Tekst tekst tekst tekst<br />
 +
Tekst tekst tekst tekst
  
Normale spatie : Tekst tekst<br />
 
Extra hairspace: Tekst &#8202; tekst<br />
 
Extra thinspace: Tekst &#8201; tekst
 
  
 
+
{| style= "width: 850px; height: 110px" border="0" <!-- door border op "1" te zetten worden lijnen getoond -->
Verder bestaan er nog een 'en space' (numeriek #8194) en een 'em space' (numeriek #8195);
+
|- 
 
+
| &#8226; || [[Elektronica basis]] || Basisinformatie over elektronica
Normale spatie : Tekst tekst<br />
+
|-
Extra en space : Tekst &#8194; tekst<br />
+
| &#8226; || style="width: 170px;" | [[Elektronica analoog]] || Schakelingen voor de analoge modelbaan
Extra em space: Tekst &#8195; tekst
+
|-
 
+
| &#8226; ||[[Elektronica digitaal]]                         || Schakelingen voor de digitale modelbaan
 
+
|-
===Probleem met de uitlijning:===
+
| &#8226; ||[[Meten is Weten]]                               || style="width: 1020px;" | Informatie over diverse metingen en het gebruik van meetapparatuur
<br />
 
In dit menu is de uitlijning van de tweede kolom niet goed:
 
 
 
 
 
Hier vind u alle artikelen over elektronica: <!-- hier staat de tweede kolom niet goed uitgelijnd -->
 
 
 
 
 
{|style= "width="65%" class="wikitable"
 
|-
 
:*[[Elektronica basis]] Basisinformatie over elektronica
 
  |-
 
:*[[Elektronica analoog]] Schakelingen voor de analoge modelbaan
 
  |-
 
:*[[Elektronica digitaal]] Schakelingen voor de digitale modelbaan
 
  |-
 
:*[[Meten is Weten]] Informatie over diverse metingen en het gebruik van meetapparatuur
 
 
|}
 
|}
----
+
Hier is numeriek teken #8226 gebruikt.
 +
<!-- op het www kwam ik de tip tegen om de width van de kolom in te stellen
 +
in de kolom met de langste tekst, de rest past zich dan automatisch aan. -->
  
  
Hieronder een aantal voorbeelden, hoe het uitlijnprobleem op te lossen is;
+
Na bovenstaande menu staat de tekst weer gewoon links.
  
===Voorbeeld 1:===
+
Tekst tekst tekst tekst<br />
<br />
+
Tekst tekst tekst tekst<br />
We kunnen dat verbeteren door extra spaties toe te voegen:
+
Tekst tekst tekst tekst
  
  
Hier vind u alle artikelen over elektronica: <!-- hier wordt te veel gebruik gemaakt van nbsp's. Dit verdient niet de schoonheidsprijs.-->
+
Door het toevoegen van een ":" verspringt het menu.
  
  
{|style= "width="65%" class="wikitable"
+
:{| style= "width: 850px; height: 110px" border="0" <!-- door border op "1" te zetten worden lijnen getoond -->
 
|-  
 
|-  
:*[[Elektronica basis]] &nbsp;&nbsp;&nbsp;&nbsp; Basisinformatie over elektronica
+
| valign="top"| <ul style= "list-style-type: square;"><li></li></ul> || valign="bottom"| [[Elektronica basis]]                           || valign="bottom"| Basisinformatie over elektronica
  |-
+
|-
:*[[Elektronica analoog]] Schakelingen voor de analoge modelbaan
+
| valign="top"| <ul style= "list-style-type: square;"><li></li></ul> || style="width: 170px;" valign="bottom"| [[Elektronica analoog]] ||valign="bottom"| Schakelingen voor de analoge modelbaan
  |-
+
|-
:*[[Elektronica digitaal]] &nbsp; Schakelingen voor de digitale modelbaan
+
| valign="top"| <ul style= "list-style-type: square;"><li></li></ul> || valign="bottom"| [[Elektronica digitaal]]                       || valign="bottom"| Schakelingen voor de digitale modelbaan
  |-
+
|-
:*[[Meten is Weten]] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Informatie over diverse metingen en het gebruik van meetapparatuur
+
| valign="top"| <ul style= "list-style-type: square;"><li></li></ul> || valign="bottom"| [[Meten is Weten]]                             || style="width: 1020px;" valign="bottom"| Informatie over diverse metingen en het gebruik van meetapparatuur
 
|}
 
|}
Het ziet er al netter uit, maar het is nog  niet optimaal. De tweede kolom zig-zagt aan de voorzijde.
 
----
 
  
 +
Hier is HTML-code gebruikt.
  
===Voorbeeld 2:===
 
<br />
 
We kunnen het nog verder verbeteren door op de juiste plaats een 'thinspace' of een 'hairspace' tussen te voegen,<br />
 
&oacute;f door een thinspace &eacute;n een hairspace tussen te voegen.
 
  
 +
Na bovenstaande menu behoort de tekst weer gewoon links te staan.
  
Hier vind u alle artikelen over elektronica: <!-- hier wordt ook nog te veel gebruik gemaakt van nbsp's. Dit verdient nog steeds niet de schoonheidsprijs.-->
+
Tekst tekst tekst tekst<br />
 +
Tekst tekst tekst tekst<br />
 +
Tekst tekst tekst tekst
  
 
+
Staat de tekst niet helemaal goed, probeer dan door net onder de tekst een
{|style= "width="65%" class="wikitable"
+
<pre><br clear="all"></pre>
|-
+
te plaatsen of het probleem opgelost is.
:*[[Elektronica basis]] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Basisinformatie over elektronica
 
  |-
 
:*[[Elektronica analoog]] &#8201; Schakelingen voor de analoge modelbaan
 
  |-
 
:*[[Elektronica digitaal]] &#8201; &#8202; Schakelingen voor de digitale modelbaan
 
  |-
 
:*[[Meten is Weten]] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8201;&#8201; Informatie over diverse metingen en het gebruik van meetapparatuur
 
|}
 
 
----
 
----
  
  
===Voorbeeld 3===
+
Informatie:
<br />
 
 
 
Het blijkt met nog minder code te kunnen, door het gebruik maken van combinaties van 'en space', 'em space', 'hairspace' en 'thinspace':
 
 
 
 
 
Hier vind u alle artikelen over elektronica: <!-- hier is, met zo weinig mogelijk code, de tweede kolom netjes uitgelijnd -->
 
  
 
+
http://www.w3schools.com/html/html_entities.asp<br />
{|style= "width="65%" class="wikitable"
+
http://www.htmlhelp.com/reference/html40/entities<br />
|-
+
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references<br />
:*[[Elektronica basis]] &nbsp;&nbsp;&#8195; Basisinformatie over elektronica
+
http://www.unicode.org/charts<br />
  |-
+
http://www.alanwood.net/unicode/index.html<br />
:*[[Elektronica analoog]] &#8201;&#8202; Schakelingen voor de analoge modelbaan
+
http://www.elizabethcastro.com/html/extras/entities.html<br />
  |-
+
http://www.handleidinghtml.nl/html/lijsten/lijsten05.html<br />
:*[[Elektronica digitaal]] &nbsp;&#8201;&#8201; Schakelingen voor de digitale modelbaan
 
  |-
 
:*[[Meten is Weten]] &#8201;&#8195;&#8195; Informatie over diverse metingen en het gebruik van meetapparatuur
 
|}
 
 
----
 
----
  
Aanvulling:
 
 
Er blijken na enig speurwerk, nog een aantal bredere spaties te zijn. Numeriek: #2000 t/m #2009.
 
  
Tekst &#x2006; tekst<br />
+
De voettekst, een eventuele bronvermelding en de categoriebalk moeten ook helemaal links staan.
Tekst &#x2009; tekst<br />
+
Staat de bronvermelding en de voettekst niet helemaal goed, probeer dan door net boven de bronvermelding/voettekst een
Tekst &#x2008; tekst<br />
+
<pre><br clear="all"></pre>
Tekst &#x2005; tekst<br />
+
te plaatsen of het probleem opgelost is.
Tekst &#x2004; tekst<br />
 
Tekst &#x2002; tekst<br />
 
Tekst &#x2000; tekst<br />
 
Tekst &#x2007; tekst<br />
 
Tekst &#x2001; tekst<br />
 
Tekst &#x2003; tekst<br />
 
  
  
Hier is meer info te vinden;<br />
+
{{Voettekst
http://en.wikipedia.org/wiki/Hair_space#Hair_spaces_around_dashes<br />
+
|Vorige= EDIT
http://www.cs.tut.fi/~jkorpela/chars/spaces.html<br />
+
|Volgende= EDIT
http://www.cs.tut.fi/~jkorpela/www/justify.html
+
}}
  
[[EDIT]]
+
[[Categorie: Redactie|T]]

Huidige versie van 10 jan 2016 om 11:33

Hoofdpagina  Categorie-index  Index  Menu
Vorige | Volgende

Onder redactie van: BeneluxSpoor.net / Auteur: Redactie


Gewone tekst begint links.

Tekst tekst tekst tekst
Tekst tekst tekst tekst
Tekst tekst tekst tekst


Elektronica basis Basisinformatie over elektronica
Elektronica analoog Schakelingen voor de analoge modelbaan
Elektronica digitaal Schakelingen voor de digitale modelbaan
Meten is Weten Informatie over diverse metingen en het gebruik van meetapparatuur

Hier is numeriek teken #8226 gebruikt.


Na bovenstaande menu staat de tekst weer gewoon links.

Tekst tekst tekst tekst
Tekst tekst tekst tekst
Tekst tekst tekst tekst


Door het toevoegen van een ":" verspringt het menu.


Elektronica basis Basisinformatie over elektronica
Elektronica analoog Schakelingen voor de analoge modelbaan
Elektronica digitaal Schakelingen voor de digitale modelbaan
Meten is Weten Informatie over diverse metingen en het gebruik van meetapparatuur

Hier is HTML-code gebruikt.


Na bovenstaande menu behoort de tekst weer gewoon links te staan.

Tekst tekst tekst tekst
Tekst tekst tekst tekst
Tekst tekst tekst tekst

Staat de tekst niet helemaal goed, probeer dan door net onder de tekst een

<br clear="all">

te plaatsen of het probleem opgelost is.



Informatie:

http://www.w3schools.com/html/html_entities.asp
http://www.htmlhelp.com/reference/html40/entities
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
http://www.unicode.org/charts
http://www.alanwood.net/unicode/index.html
http://www.elizabethcastro.com/html/extras/entities.html
http://www.handleidinghtml.nl/html/lijsten/lijsten05.html



De voettekst, een eventuele bronvermelding en de categoriebalk moeten ook helemaal links staan. Staat de bronvermelding en de voettekst niet helemaal goed, probeer dan door net boven de bronvermelding/voettekst een

<br clear="all">

te plaatsen of het probleem opgelost is.




Hoofdpagina  Categorie-index  Index
Vorige | Volgende
Contact met de redactie: Contact met de redactie