Атрибут align тега <object> — вирівнювання об'єкта в тексті

HTML

<h4 class="cap">1. Обтікання: <code>left</code> і <code>right</code></h4>
<p class="txt"><object align="left" type="image/svg+xml" width="80" height="56"
    data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2256%22%3E%3Crect%20width%3D%2280%22%20height%3D%2256%22%20fill%3D%22%232f6fd0%22%2F%3E%3C%2Fsvg%3E"></object>
    Текст обтікає об'єкт справа, бо атрибут перетворився на float зі значенням left.
    Це той самий ефект, що дає властивість float у таблиці стилів, тільки записаний
    у розмітці й безсилий проти будь-якого правила css.</p>

<p class="txt"><object align="right" type="image/svg+xml" width="80" height="56"
    data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2256%22%3E%3Crect%20width%3D%2280%22%20height%3D%2256%22%20fill%3D%22%233a9a4f%22%2F%3E%3C%2Fsvg%3E"></object>
    А тут об'єкт відплив праворуч, і текст обтікає його зліва. Значення right
    робить рівно те саме, що float: right.</p>

<h4 class="cap">2. Вирівнювання в рядку: <code>middle</code>, <code>top</code>, хибне значення</h4>
<p class="txt tall">рядок <object align="middle" type="image/svg+xml" width="40" height="28"
    data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2228%22%3E%3Crect%20width%3D%2240%22%20height%3D%2228%22%20fill%3D%22%23d1a04a%22%2F%3E%3C%2Fsvg%3E"></object>
    middle &nbsp;·&nbsp; рядок <object align="top" type="image/svg+xml" width="40" height="28"
    data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2228%22%3E%3Crect%20width%3D%2240%22%20height%3D%2228%22%20fill%3D%22%233a9a4f%22%2F%3E%3C%2Fsvg%3E"></object>
    top &nbsp;·&nbsp; рядок <object align="chucknorris" type="image/svg+xml" width="40" height="28"
    data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2228%22%3E%3Crect%20width%3D%2240%22%20height%3D%2228%22%20fill%3D%22%23d64545%22%2F%3E%3C%2Fsvg%3E"></object>
    хибне значення — стоїть по базовій лінії, як без атрибута</p>

<h4 class="cap">3. Одне правило css прибирає атрибут</h4>
<p class="txt beaten"><object align="left" type="image/svg+xml" width="80" height="56"
    data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2256%22%3E%3Crect%20width%3D%2280%22%20height%3D%2256%22%20fill%3D%22%23b23a3a%22%2F%3E%3C%2Fsvg%3E"></object>
    Тут теж написано align="left", але в стилях є рядок
    <code>.beaten object { float: none }</code> — без !important. Обтікання зникло:
    презентаційна підказка з розмітки програє авторському правилу завжди.</p>

CSS

.txt {
    max-width: 560px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    line-height: 1.6;
}

.txt object {
    margin: 4px 10px;
}

/* високий рядок, щоб різниця між top, middle і базовою лінією була видна */
.txt.tall {
    line-height: 3.4;
}

/* достатньо одного рядка — і атрибут більше нічого не важить */
.beaten object {
    float: none;
}

.beaten {
    border-color: #d64545;
    background: #fdeeee;
}

.cap {
    margin: 22px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

HTML

<h3>Приклад використання атрибуту <code>align</code></h3>
<p>Вибери потрібне значення для <code>align</code>:

<select id="form">
   <option value="left" name="value">left</option>
  <option value="top" name="value">top</option>
   <option value="right" name="value">right</option>
   <option value="middle" name="value">middle</option>
   <option value="bottom" name="value">bottom</option>
</select>
  </p>
<nav id='text'>Текст розташовано за замовчуванням</nav>
<hr><br><br>
<object width="300" height="300" id="table"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>

JS

var wrapper = document.getElementById('table');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'left': 'Вирівнювання по лівому краю.',
  'top': 'Вирівнювання елемента по верхній межі..',
  'right': 'Вирівнювання по правому краю.',
  'middle': 'Вирівнювання елемента по центру.',
  'bottom': 'Вирівнювання по нижній межі.' };

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      wrapper.align = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

<h3>Приклад використання атрибуту <code>align</code></h3>
<object width="300" height="300" align="right"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>