I have a problem with the display of HTML code within my iOS app using WKWebView. Specially, the problem is line spacing.
With iOS 12-13 the following code produces text (flowing around an image and footer) with the top of the image aligned with the top of the flowing paragraph. This display has been stable through the development and release. It is consistent with both simulators and physical devices.
With iOS 14 (Beta 1 and noe Beta 2) the code produces the first line of the paragraph text overlapping the image top (although slightly below the top edge) and then flowing the rest of paragraph around the image.
It looks terrible and, of course, makes the first line almost impossible to read.
Perhaps this is a small bug but it breaks expected results and tarnishes the look and feel of the text in the eyes of the user.
This is the case both using the Simulator and on an iPhone Xs.
<----------------------------------------------------->
Here is the css file:
#rp {
float: right;
margin: 0 0 0 15px;
}
#lp {
float: left;
margin: 0 15 0 0px;
}
...and the HTML in question:
<table style="width:80%; margin: 0px auto;">
<tr>
<td>
<p>
The first stored program computer is typically attributed to the Babbage Analytical Engine that was programmed via punched cards. Certainly, a case can be made that Jacquard's loom fits as a programmable device but it doesn't fit a definition of computer. Similarly Pascal's calculator fits close to our concept of a computing device but isn't exactly programmable.
<p>
While programmable, mechanical computers, manufacturing devices and calculators fit in the evolution of the modern computer they each share a fundamental flaw... it's really hard to change the machine to explore new results. There must be a better approach.
<p>
A solution for this problem resulted from the discovery of electricity. This magical property quickly found its way into the computer world as a marriage between mechanical structures and simple wires to carry current that controlled how the machine would operate. This was much more practical than steam that powered both Bababage's Difference Engine and his Analytic Engine.
<p>
<div style="text-align: right;" id="rp"/>
<figure>
<img src="punchcard.png" width="400" >
<figcaption>80-column Hollerith Punch Card
</figcaption>
</figure>
</div></p>
<p>
The machines were able to manipulate media to carry out roles and functions much faster than humans. One thing these machines had in common was the medium used -- punched cards, with a nod to Jacquard and eventually people like Powers (leading to the Univac and Sperry powerhouses) and Hollerith (subsequently leading to the IBM dynasty).</p>
<p>
An interesting phenomena occurred, however. Punched cards became the medium for carrying data and the wires became to the medium for programming.</p>
<p>
<div style="text-align: right;" id="lp"/>
<figure>
<img src="punchcardPgm.png" width="400" >
<figcaption>Punch Card Program Deck
</figcaption>
</figure>
</div></p>
<p>
The machines processed punched cards at high speed, by human standards at least, by "reading" the tiny holes in cards, processing the information and punching holes in other cards or printing on paper with typewriter and more advanced techniques. The holes were "sensed" as they passed over reading stations. Small metal brushes create a small electrical circuit to be completed when the brushes pass over a hole. </p>
<p>
<----------------------------------------------------->
With iOS 12-13 the following code produces text (flowing around an image and footer) with the top of the image aligned with the top of the flowing paragraph. This display has been stable through the development and release. It is consistent with both simulators and physical devices.
With iOS 14 (Beta 1 and noe Beta 2) the code produces the first line of the paragraph text overlapping the image top (although slightly below the top edge) and then flowing the rest of paragraph around the image.
It looks terrible and, of course, makes the first line almost impossible to read.
Perhaps this is a small bug but it breaks expected results and tarnishes the look and feel of the text in the eyes of the user.
This is the case both using the Simulator and on an iPhone Xs.
<----------------------------------------------------->
Here is the css file:
#rp {
float: right;
margin: 0 0 0 15px;
}
#lp {
float: left;
margin: 0 15 0 0px;
}
...and the HTML in question:
<table style="width:80%; margin: 0px auto;">
<tr>
<td>
<p>
The first stored program computer is typically attributed to the Babbage Analytical Engine that was programmed via punched cards. Certainly, a case can be made that Jacquard's loom fits as a programmable device but it doesn't fit a definition of computer. Similarly Pascal's calculator fits close to our concept of a computing device but isn't exactly programmable.
<p>
While programmable, mechanical computers, manufacturing devices and calculators fit in the evolution of the modern computer they each share a fundamental flaw... it's really hard to change the machine to explore new results. There must be a better approach.
<p>
A solution for this problem resulted from the discovery of electricity. This magical property quickly found its way into the computer world as a marriage between mechanical structures and simple wires to carry current that controlled how the machine would operate. This was much more practical than steam that powered both Bababage's Difference Engine and his Analytic Engine.
<p>
<div style="text-align: right;" id="rp"/>
<figure>
<img src="punchcard.png" width="400" >
<figcaption>80-column Hollerith Punch Card
</figcaption>
</figure>
</div></p>
<p>
The machines were able to manipulate media to carry out roles and functions much faster than humans. One thing these machines had in common was the medium used -- punched cards, with a nod to Jacquard and eventually people like Powers (leading to the Univac and Sperry powerhouses) and Hollerith (subsequently leading to the IBM dynasty).</p>
<p>
An interesting phenomena occurred, however. Punched cards became the medium for carrying data and the wires became to the medium for programming.</p>
<p>
<div style="text-align: right;" id="lp"/>
<figure>
<img src="punchcardPgm.png" width="400" >
<figcaption>Punch Card Program Deck
</figcaption>
</figure>
</div></p>
<p>
The machines processed punched cards at high speed, by human standards at least, by "reading" the tiny holes in cards, processing the information and punching holes in other cards or printing on paper with typewriter and more advanced techniques. The holes were "sensed" as they passed over reading stations. Small metal brushes create a small electrical circuit to be completed when the brushes pass over a hole. </p>
<p>
<----------------------------------------------------->
