I'm making an image to ascii art converter, which outputs an HTML file to allow formatting and easy zooming. The problem, however, is that when zoomed out in Chrome, the ascii image's height decreases less than its width and the image becomes distorted (too wide). I've tried playing with the line-height property to no avail. In Edge and IE there's no issue - zooming successfully keeps the aspect ratio.
Here's an example of the converter's HTML output with a low resolution, but the problem is accentuated the higher the resolution. Any help would be appreciated!
<!DOCTYPE html>
<html>
<body style="
COLOR:#000000;
TEXT-ALIGN:center;
FONT-SIZE:1px;
">
<p style="
white-space:pre;
FONT-FAMILY:Courier New;
FONT-SIZE:1.171875rem;
LETTER-SPACING:0.15em;
LINE-HEIGHT:0.400000em;
">
`MMMMMMMMMMMMMMM#BQBMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMME%SMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMc~~~1MMMMMMMMMMMMMMMMMMMMMMMMMMM#K$#G)//IQMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMM&.`./5MMMMMMMMMMMMMMGJ?DMMMMMMB9{~~~(D+)//:A#MMMMMMMMMMMM` <br>
`MMMMMMMMMMMA)(.~~:#MMMMMMMMMMMMM%...+MMQdJ'~~~~~~~/+/'//'+KMMMMMMMMMMM` <br>
`MMMMMMMMMM3~/./+CHMMMMMMMMMMMMMM$~...:+~...~.~~~~~~/:5C:!'(HMMMMMMMMMM` <br>
`MMMMMMMMM4.7.`.~KMMMMMMMMMMMMMMH!.``........~~~~~~~~L!C547'?MMMMMMMMMM` <br>
`MMMMMMMMB``{```/"MMMMMMMMMMM"7~````.7.+........~~~~~!&c25/''%MMMMMMMMM` <br>
`MMMMMMMM!``'``.(BMMMMMMMMMMM:`````~':/L./'....~//~~~~4!&7//'(H#MMMMMMM` <br>
`MMMMMMQ:``````/CMMMMMMMMMMMMC`````.2``J.1~....~.~~~~~/5{////':'EMMMMMM` <br>
`MMMMMM2``````.)BMMMMMMMMMMMMD``.)``~``c.~:....~..~~~~~/////'//(!QMMMMM` <br>
`MMMMMC```````~CMMMMMMMMMMMMMQ.~$Q:```/.``/.......~~~~~/////~'')+"MMMMM` <br>
`MMMM$````````/GQMMMMMM#EQMMMM#%&!{````````.....~..~~~/~~/////'(+{BMMMM` <br>
`MMMM~````'````.'#MMME?LL$M#HSC+~~`````..........~.~~~.~~///'/''):LMMMM` <br>
`MMM"````.+`````~%MMM5&CC9SU&3J````````````......~~..~~~~/////+7(+:BMMM` <br>
`MMM/`).'+.`````/$MMMEJCCCCCCCJ````````````........~.~~~~/////C$+++5MMM` <br>
`MMK`.c:'/```/~/!##d313CCCCCCCC`````````````.``....~~~~~~~////12I)+7#MM` <br>
`MM:````+```/I$599L&&CCCCCCCCCC.``````````````......~~~~~~//(//9&)+:$MM` <br>
`MQ.```````.+CCCC&CCCCCCCCCCCCC/``````````````....~//.~~~~//+7/+4(+:2MM` <br>
`M%.```````~7CCCC&CCCCCCCCCCCCC7```````````./~2..~~...~~~~~//J?1U(+:{BM` <br>
`M!````````~1CCC33CCCCCCCC2:/~``````````.+c.{`+..~....~~~~~///2DI(){{KM` <br>
`M~````````~1CCCJJCCCCC7~` `````.`````/S~`L'/`+`.~..../~~~~/////''((:&M` <br>
`#`````````.//~....{CC2 `````.``````~4`.9~`(`..~../~/~~~/////(''+:1M` <br>
`K``````````````` `(CCC' `````.```````/3`)5~/`...///.~/~~///'')))(:{#` <br>
`&``.```````````` /&CCC: `````````````{c/~S.`.......~/~~~////':)):7R` <br>
`1``7/``````````` .CJ!~ `..`.`````````J(`/``.......~~~~~/////+)):!G` <br>
`+`./)~````````` ````````````````.````.......~~~//~///')+):7%` <br>
`'`.+!I````````` .``````````````````.........~~//~////'')!c79` <br>
`~`./.``.``````` `'/+C~ .````````````````...`..~...~//~~~////''!cI79` <br>
`/`.:&.````````` ?. .D. .```````````````.````..~.~~~.~/~/////'(c2I75` <br>
`/``+./````````` ." J7 ```.``.`````````.````..~~...~~~////'/'(??274` <br>
`/``14.``````````~S 7! ``.````.````````..```.......~~~/~/////({I?7U` <br>
`(`...````````````$. J. ```````````````````.``.......~~~///~/'/+???7%` <br>
`1````````````````~J. //./`````````.````````.```....'/~~~~~~///'/+{22{D` <br>
`J````````````````//?`+%&/`````````.``````..````..~?9.~~~~~////'')+cc7H` <br>
`S````````````````?I+``````````````.......````~:7..(G~~~~~~//'('():{{7B` <br>
`E`````````````````````````````````.``````````~4{..{%(~~~~~////'(+:{{1M` <br>
`M.````````````````````````````````.``````````.7C.//C!~~~~////'()+:!7CM` <br>
`M+````````.```````````````````````.``````````./$.{.!&~~~~////'()+:!{%M` <br>
`ML`)+`````.```````````````````````.`````````...G+'.'%/~~~//'/')++{{7EM` <br>
`MB`~`/````.`````````````.`````````.````...``...4J..+J'~~////)'++:7!IMM` <br>
`MM/~c/.```.`````````````.``````````.``.```.`...?L/.~~~~~////++)+:7!"MM` <br>
`MM4`~~?/``.````````````````````````...````.`..~+~.~~~/~////'()+:{52#MM` <br>
`MMQ.~+!.```.`````````.````````````````````.`.....~~.~/////''()+:&LCMMM` <br>
`MMM?.~/)````....`````7/`:++.``````````.........~..~~~//////()):7%UAMMM` <br>
`MMM#...(````````.````+7/c`3'`````````.````.......~~~~'////()++:JJLMMMM` <br>
`MMMM?``..```````````/+!~{)3~````````.```......~.~~~~~~///'()++{73HMMMM` <br>
`MMMMQ~.`````.````````7+I~!&.````````.``........~.~~~////'(+:+:7JSMMMMM` <br>
`MMMMM%..````.```````~!:.`I1c.```````..........~..~~////'')++:{7&BMMMMM` <br>
`MMMMMM{.````.````````(+/~c~?+~``````~..........~~CU%?/''(++::7!DMMMMMM` <br>
`MMMMMM#~````.````````/~~`+/.`````............~~~~4S%L'')++:{{!&MMMMMMM` <br>
`MMMMMMMR..`...````````````````...``..~......~~~~///7C'()7{:{72QMMMMMMM` <br>
`MMMMMMMM$...`......`````````..`......./...~~~~~////22()++:{7cBMMMMMMMM` <br>
`MMMMMMMMMU//....```````.```............~~.~~~~////'3!)++:{{!EMMMMMMMMM` <br>
`MMMMMMMMMM9/:..~.......................~~~~~/////''4+++:::!RMMMMMMMMMM` <br>
`MMMMMMMMMMM"/'..~...................~~~~~~~/////''(++++:{1#MMMMMMMMMMM` <br>
`MMMMMMMMMMMMd:+~.~................~..~~~~//////'''(+++:72BMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMBcc/........)7:'/.~~~~~~~~/'////''(()++::{LQMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMQ9/~~~~~.~~~/:~~//~~///''//)//'''()+7?1?KMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMME:~///~~~~)(~~~/!~///////'/''()+:7J!4#MMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMG+~~//~~(:)c:{9(///////''()++?IICEMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMG7/////'{(/)'/////''(++::+:73RMMMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMMMB5+'//////'/('''(():+++I%#MMMMMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMMMMMMB$C!(/'''2?J:))+c5d#MMMMMMMMMMMMMMMMMMMMMMMMM` <br>
`MMMMMMMMMMMMMMMMMMMMMMMMMMMMMQBHG$%%$KR#MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM` <br>
</p>
</body>
</html>
Related
So Ive created a table to divide the html text into 2 languages English/Spanish, but for some reason which I can not understand, the text is starting just below for the second column... Like this:
Maybe I am missing an atribute? Or some justification?
<table width="863">
<tr>
<td width="428">
<p>
<strong>AVISO DE PRIVACIDAD</strong>
</p>
<p>
<strong>ESTUDIANES Y PADRES DE FAMILIA</strong>
</p>
<p> <strong>Identidad y domicilio del Responsable:</strong>
</p>
<p>TEXT TEXT TEXT.</p>
<p> <strong>TEXT TEXT:</strong>
</p>
<p>TEXT TEXT TEXT</p>
<p>....</p>
</td>
<td width="435">
<p>
<strong>PRIVACY NOTICE</strong>
</p>
<p>
<strong>STUDENTS AND PARENTS</strong>
</p>
<p> <strong>Identity and address of the Responsible Party:</strong>
</p>
<p>TEXT TEXT TEXT TEXT</p>
<p> <strong>Categories of the data treated by the School:</strong>
</p>
<p>TEXT TEXT TEXT</p>
<p> a) <u>TEXT TEXT
</td>
</tr>
</table>
Your code is absolutely fine as there is no margin or padding. It could be because of
the editor you are using
some css file which is messing with body/table/p/... tags
Thanks for your answers! I just found a "forced" solution. Just added valign="top" into the td as an atribute.
I have my mobile only website. I am testing on my Iphone 6. The problem is with my title h1 tag no showing when you load. It reappears after you resize the screen and scroll past it. Can anyone help? Please and Thanks. Code:
https://github.com/SEGACD32XMODEL1/Websiteland/blob/master/mobile.html
Site:
https://segacd32xmodel1.github.io/Websiteland/mobile.html
<span id="animationSandbox" style="display: block;">
<div id="grad1" id="topnav" class="myTopnav" class="site__title mega" style="text-align:center;margin:auto;color:#888888;font-size:6vh;font-weight:bold;font-family:oreos;line-height:0.5;overflow-wrap:anywhere;text-align:center;" height="150vh">
<h1 class="site__title mega" style="overflow-wrap: break-word;text-align:center;padding-top:0px;line-height:16vh"> Websiteland <br>
<div>
Cornhub
<br>
Federal Crimes
<br>
GamesAndMore
<br>
KahootSpam
<br>
Reload
<br>
Roasted Beef 420
<br>
School
<br>
Time
<br>
Uno Special Cards
<br>
Websites
</div>
</h1>
</div>
I have this piece of code and I need to make 2 separate results :
https://jsfiddle.net/29Lxsq1m/
1. Make the left and right divs(l0,r0) adjust to image height
2. Align the image to the center
I have tried to achieve the 2nd scenario with various but nothing seems to work excuse if these are dumb q's but I have been trying to make this 5 hours now and my mental can't handle this anymore I am also open to a way of solving my problem not using Flexbox
.container {
width:100%;
height:1000px;
display:flex;
}
.l0 {
width: 249px;
flex: 0 0 249px;
height:100%;
overflow:auto;
}
.c0 {
width:100%;
height:100%;
}
.r0 {
width: 249px;
flex: 0 0 249px;
height:100%;
overflow:auto;
color:white;
}
img {
max-width:100%;
}
#mid {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="l0">
<center>
text....
</center>
</div>
<div class="c0">
<img src="gifS.png" id="mid"> /* 1920x1080 img */
</div>
<div class="r0">
text....
</div>
</div>
The max-width: 100% on the img element causes the image to stop scaling at 100% size. Also, when the container shrinks, the image changes its width to fit the container, thereby reducing its height.
To solve this, set the width and height of the image so that it is always the same size as the container, and adjust the display method of the image by applying the object-fit property as appropriate.
#mid {
width: 100%; /* add */
height: 100%; /* add */
object-fit: cover; /* add */
}
#font-face {
font-family: Open-sans;
src: url(OpenSans-Light.ttf);
}
body {
font-family: Open-sans;
background-color: grey;
background-repeat: repeat-y;
background-size: 100%;
}
.container {
width: 100%;
height: 1000px;
display: flex;
}
.l0 {
width: 249px;
flex: 0 0 249px;
height: 100%;
overflow: auto;
}
.c0 {
width: 100%;
height: 100%;
}
.r0 {
width: 249px;
flex: 0 0 249px;
height: 100%;
overflow: auto;
color: white;
}
img {
max-width: 100%;
}
#mid {
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* add */
height: 100%; /* add */
object-fit: cover; /* add */
}
<div class="container">
<div class="l0">
<center>
Όποιος θεός κι αν είναι <br> έδωσε δώρο μητέρα γη<br>
<br> το τιμάς το δώρο τούτο <br> αν άξιος πάνω της περιπατείς <br>
<br> αν όλους εδώ μας θέλησε,<br> πνοή ζωής μας έδωσε,<br>
<br> αναπνοή, ολόκληρη μισή<br>
<br> ύδωρ και γη μελέτησε,<br> τη φύση παράδειγμα και δώρο, <br>
<br> ένα τραγούδι άφησε,<br> μια μελωδία ολόγυρα, <br>
<br> τα λόγια η φύση τραγουδά, <br> τα τραγουδά εις άπειρο, <br>
<br> είναι γραμμένα εδώ, <br> είναι το δείγμα ολόγυρα, <br>
<br> και σαν μην έφτανε αυτό,<br> έδωσε κι άλλο δώρο<br>
<br> μια σκέψη, πλασμένη <br> από αγάπη, ολόκληρη μισή <br>
<br> αν υπάρχουν, καλύτερα από τούτα<br> πες μου αν μπορείς,<br>
<br><br> θυμήσου μόνο,<br>
<br> πνοή ζωής έπήρες δώρο,<br> αγάπη, ολόκληρη μισή.<br>
<br> και εμείς ;<br>
<br> μην είμαστε <br> Αδέλφια, πατέρες, μητέρες,<br> παιδιά όλοι, των ίδιων <br> εμείς ;<br>
<br> οικογένεια μια, να λέγαμε <br> μια στέγη, μαζί <br>
<br> ένα να είμαστε <br> παιδιού μικρού, ψυχή <br>
<br> ο κόσμος παράδεισος ένας, <br> όμορφος από ότι έχουμε φανταστεί<br>
<br> μη λόγο να βάλουμε <br> όρκο να πάρουμε, <br>
<br> εμείς ;<br>
<br> μοναχά καλό να υπάρχει <br> να ζηλεύουν τα όνειρα κάθε στιγμή<br>
<br> μπουκέτα λουλούδια <br> μες τη καρδιά μας <br> ερωτευμένοι κάθε στιγμή <br>
<br> μη λόγο να πράτταμε <br> σκέψη και αγάπη να βάζαμε, <br>
<br> εμείς ;<br>
<br> όρκο θα πάρουμε μητέρα γη<br>
<br>
</center>
</div>
<div class="c0">
<img src="https://via.placeholder.com/500x1000/ffffff/888888/500x1000.png" id="mid">
</div>
<div class="r0">
<center>
He who has a Why to live can bear almost any how.<br>
</center>
scriver: -Friedrich Wilhelm Nietzsche<br>
<center>
<br> *
<br>
<br> He who can properly define and divide <br> is to be considered a god
<br>
</center>
scriver: Plato
<center>
<br> *
<br>
<br> Before cure someone, <br> (mentally or physically) ask him if <br> he is willing to let go all those things <br> that make him sick <br>
</center>
-Hippocrates <br>
<center>
<br> *
<br>
<br> A work of art is the unique <br> result of a unique temperament. <br> Its beauty comes from the fact that <br> the author is what he is. <br> It has nothing to do with the fact <br> that other people want what they want.<br>
</center>
-Oscar Wilde<br>
<center>
<br> Happy is the man that findeth wisdom, <br> and the man that getteth understanding.<br>
<br>
</center>
scriver: -Proverbs <br>
<center>
<br>
<br> Ask yourself what is really important <br> and then have the courage <br> to build your life around your answer.<br>
<br>
</center>
scriver: unknown <br>
<center>
<br>
<br> Know thyself.<br>
<br>
</center>
scriver: Socrates<br>
<center>
<br>
<br> Integrity is doing the right thing <br> even when no one is watching. <br>
<br>
</center>
scriver: C.S. Lewis<br>
<center>
<br>
<br> If a movement is to have an impact, <br> it must belong to those who join it, <br> not only those who lead it. <br>
</center>
scriver: -Simon Sinek<br>
<center>
<br>
<br> It is the individual who is not interested <br> in his fellow ,men, <br> who has the greatest difficulties in life and <br> provides the greatest injury to others. <br> It is from among such individuals <br> that all humans failures spring.<br>
<br>
</center>
scriver: Alfred Adler<br>
<center>
<br>
<br> The more diverse the plant foods we eat <br> the more diverse our gut microbiome becomes <br> and the more abundant our health is.<br>
<br>
</center>
scriver: Dr. Will Cole<br>
<center>
<br>
<br> He who can properly define <br> and divide is to be considered a god<br>
<br>
</center>
scriver: Plato <br>
<center>
<br>
<br> The moment you change your perception, <br> is the moment you rewrite the chemistry of your body.<br>
<br>
<br> Love is a gift to be used every day,<br> Not be smothered and hidden away. <br> Love is not a thing to be stored <br> in the chest where you gather your keepsakes, <br> And treasure your best. <br> Love is a gift to be used every day.<br>
<br>
</center>
scriver: Norah Perkins<br>
<center>
<br>
<br> Before you cure someone, <br> ask him if he is willing to let go <br> all those things that make him sick.<br>
<br>
</center>
scriver: - Hippocrates <br>
<br>
</div>
</div>
I want to make a website in urdu, I have googled it and found some unicode method, Now what my question is that how these unicodes are working or how can I extract these codes from the urdu sentences.
Following is the code snippet which is used to display the urdu in the website.
<HTML>
<HEAD>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<TITLE>Ghazal</TITLE>
<STYLE TYPE="text/css"><!--
H1 {
color: #007c78;
font-family: "Urdu Nastaliq Unicode";
font-size: 60px; }
#urdu {
font-family: "Urdu Nastaliq Unicode";
font-size: 32px; }
}
--></STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<bdo dir=rtl>
<center>
<table border=0>
<tr><td align=right>
<h1 align=right>
ﻏﹷﺰﹶﻝ <br>
</h1>
<span id=urdu>
<P>
ﺷﺎﻡﹺ ﻏﹷﻢ ﻛﮯ
ﺍﺳﹻﻴﺮ ﮨﹷﻴﮟ
ﮨﹷﻢ ﻟﻮﮒ <br>
ﺳﹹﺒﺢﹺ ﻧﹷﻮ
ﻛﮯ ﺳﹷﻔﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺑﹹﺠﮫ ﭼﹹﲀ
ﮨﹷﮯ ﭼﹷﺮﺍﻍ
ﮔﻮ ﺩﹺﻝ ﰷ <br>
ﭘﮭﹻﺮ ﺑﮭﹻﯽ
ﺭﻭﺷﹷﻦ
ﺿﹷﻤﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﻳﺎﺱﻮ ﻏﹷﻢ
ﻛﹻﯽ ﮨﹷﮯ ﮔﹷﺮ
ﻛﻮﺋﹻﯽ
ﻗﹻﻴﻤﹷﺖ <br>
ﭘﮭﹻﺮ ﺗﻮ ﺳﹷﺐ
ﺳﮯ ﺍﻣﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺍﻳﻚ ﻣﹷﻮﮨﯘﻡ
ﺳﺎ
ﺗﹷﺼﹷﻮﹽﹸﺭ
ﮨﹷﻴﮟ <br>
ﺍﻳﻚ
ﻣﹷﺪﹽﮬﹷﻢ
ﻟﹷﻜﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﻗﺎﺗﹻﻠﻮﮞ ﻛﮯ
ﻧﹷﮕﹷﺮ ﻣﻴﮟ
ﺍﺋﮯ ﻳﺎﺭﻭ <br>
ﺍﮨﻞﹺ ﺩﹺﻝ ﻛﮯ
ﻣﹹﺸﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺍﻳﻚ ﻧﹷﻈﹷﺮ
ﻛﹻﯽ ﮨﹷﻤﻴﮟ
ﺑﮭﹻﯽ ﺩﮮ ﺩﻭ
ﺑﮭﹻﻴﻚ <br>
ﺭﺍﻩ ﭼﹷﻠﺘﮯ
ﻓﹷﻘﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﭘﮭﹻﺮ
ﻣﹻﻠﻴﮕﺎ ﻧﹷﻪ
ﺳﺎﺩﻩ ﺩﹺﻝ
ﮨﹷﻢ ﺳﺎ <br>
ﻓﹻﯽ ﺯﹶﻣﺎﻧﻪ
ﻧﹷﺰﹺﻳﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺧﯘﺩ ﮨﹷﻤﻴﮟ
ﺑﮭﹻﯽ ﮨﹷﮯ
ﺁﺳﺮﺍ ﺩﹶﺭﰷﺭ
<br>
ﻣﹷﺖ ﻛﹷﮩﻮ
ﺩﹶﺳﺘﮕﹻﻴﺮ
ﮨﹷﻴﮟ ﮨﹷﻢ
ﻟﻮﮒ <br>
<P>
ﺯﹶﻓﹷﺮ ﺍﻣﹷﺮ
<br>
</span>
</td></tr>
</table>
</body>
</html>
An image is also attached below showing the html page of this code.
I have found this way from (U - Trans)
the characters you are seeing are not Unicode, they are HTML Entities representing Unicode characters.
Your code doesn't need to have those characters to display the Urdu. All you need, is the charset meta tag that you have in the <head> section
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
if you are using a modern text editor , like Brackets.io or Sublime, you can directly enter the urdu text in your code, provided that you are saving your html files with UTF-8 Encoding.
You can use "Urdu Nigar Unicode" software to write Urdu and copy the text then paste on your favorite web / html editor. Save it and voila you will have an Urdu Web Page.
I need to set space for each line <br> tag is taking huge.
<font color="white">
ani <br> </br>
hna <br> </br>
Raj <br> </br>
Parya <br> </br>
Sith <br> </br>
Sududa <br> </br>
</font>
Why don't you use <p> tags for each line instead of double <br>s? Or use an <ul>? You'll have more control over the layout.
But if you must use <br> use line-height and only one <br> for each line.
It seems to me that you are trying to close each <br> tag, this isn't possible and instead you are creating two line breaks. Remove one of these and you'll get normal line breaks:
http://jsfiddle.net/LMXNY/
http://jsfiddle.net/QFHPh/
<html>
<head>
<style>
p {
line-height: 1.5em;
}
</style>
</head>
<body>
<p>
this is <br />
a test<br />
of good text spacing
</p>
</body>
</html>
<pre style="color:white">
ani
hna
Raj
Parya
Sith
Sududa
</pre>
By golly, if it looks like a list and acts like a list, it may in fact be a list! Change the bottom margin for the list item to change the spacing between items.
<style type="text/css">
ul {
color: white;
}
li {
margin-bottom: 6px;
}
</style>
<ul>
<li>ani</li>
<li>hna</li>
<li>Raj</li>
<li>Parya</li>
<li>Sith</li>
<li>Sududa</li>
</ul>
You could use line-height property in your CSS.
First thing,
you don't use
<br> </br>
It is only:
<br />
Then on your problem, use the following
<p style="line-height: 20px;">ani
</p><p style="line-height: 20px;">hna
</p><p style="line-height: 20px;">Raj
</p><p style="line-height: 20px;">Parya
</p><p style="line-height: 20px;">Sith
</p><p style="line-height: 20px;">Sududa
</p>
Increase/decrease the number in line-height ('20'px), to increase/decrease the space between the lines respectively.