HTML надстрочный и подстрочный выпуск - PullRequest
Новая
       62

HTML надстрочный и подстрочный выпуск

3 голосов
/ 02 июля 2019

Добавление верхнего и нижнего индексов для данного текста не работает должным образом.Однако он работает точно так, как ожидалось до текста.

Химические элементы используют верхние и нижние индексы до и после атомного символа, чтобы указать массовое число, атомный номер, заряд и количество атомов.Точное описание дано на приложенном изображении.Код, который я использую, приведен ниже. 

<!DOCTYPE html>
<html>
	<style>
		  .right-align {
			display: inline-block;
			margin-bottom: -0.3em;
			vertical-align: -0.4em;
			line-height: 1.0em;
			font-size: 80%;
			text-align: right;
		  }

		  .left-align {
			display: inline-block;
			margin-bottom: -0.3em;
			vertical-align: 0.8em;
			line-height: 1.0em;
			font-size: 80%;
			text-align: left;
		  }

		  .super-sub {
			font-size: inherit;
			line-height: inherit;
			vertical-align: baseline;
		  }
	</style>


	<body>
		<span style="white-space: wrap !important;">
			<span class="right-align">
				<sup class="super-sub">238</sup>
				<br/>
				<sub class="super-sub">92</sub>
			</span>U<span class="left-align">
				<sup class="super-sub">3-</sup>
				<br/>
				<sub class="super-sub">1</sub>
			</span>
		</span>
	</body>
</html>

Нет сообщения об ошибке.Первое изображение показывает, как результат должен быть отформатирован.Второе изображение, как изображение на самом деле отформатировано (номер 1 толкает 3 -).

Expected result must follow the format given in this image

In the actual image the atom count 1 pushes the charge 3- up

Ответы [ 2 ]

2 голосов
/ 02 июля 2019

Вы можете заключить букву U в другой промежуток и затем настроить выравнивание по вертикали выравнивания по левому краю.Я увеличил размер шрифта для лучшей читаемости, а также изменил классы выравнивания слева и справа. 

<!DOCTYPE html>
<html>
<html>
<style>
  .left-align {
    display: inline-block;
    margin-bottom: -0.3em;
    vertical-align: -0.4em;
    line-height: 1.0em;
    font-size: 150%;
    text-align: right;
  }
  
  .right-align {
    display: inline-block;
    margin-bottom: -0.3em;
    vertical-align: -0.4em;
    line-height: 1.0em;
    font-size: 150%;
    text-align: left;
  }
  
  .center-align {
    font-size: 150%;
    margin: 0.2em;
  }
  
  .super-sub {
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
  }
</style>

</html>

<body>
  <span style="white-space: wrap !important;">
            <span class="left-align">
                <sup class="super-sub">238</sup><br/>
                <sub class="super-sub">92</sub>
            </span><span class="center-align">U</span><span class="right-align">
                <sup class="super-sub">3-</sup><br/>
                <sub class="super-sub">1</sub>
            </span>
  </span>

</html>
1 голос
/ 02 июля 2019

Возможно, вы захотите упростить вещи, используя flex: 

body {
  font-size: 48px
}

.element {
  display: inline-flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-end;
  height: 1.5em;
  line-height: 1.3
}

.element > * {
  font-variant: normal;
  font-size: .75em;
  line-height: 1;
}

.element>*:nth-child(3),
.element>*:nth-child(4) {
  align-self: flex-start
}
<span class="element">
  <sup>238</sup>
  <sub>92</sub>
  U
  <sup>3-</sup>
  <sub>1</sub>
</span>
...