Как вставить руны орт рал тал

Что представляют собой руны Орт, Рал и Тал

• Орт (ᛟ, Oth) – руна «надежды», «родины», «защиты». В древнескандинавском языке она обозначала звук o.
• Рал (ᚱ, Raido) – руна «путешествия», «передвижения», «коммуникации». Означает звук r.
• Тал (ᛏ, Tiwaz) – руна «суда», «правосудия», «воинского духа». Соответствует звуку t.

Все три знака относятся к футарку – старейшему набору рунических символов, используемому в англосаксонском (нортумбийском) письме.

Где взять графику руны

1. Unicode‑символы. В Юникоде руны находяться в блоке U+16A0..U+16FF. Их коды:
   • Орт – U+16DF (ᛟ)
   • Рал – U+16B1 (ᚱ)
   • Тал – U+16CF (ᛏ)
2. Шрифты, поддерживающие руны. Самый популярный — Junicode. Другие варианты: FreeSerif, Uncial Antiqua, Futhark.
3. Изображения (SVG/PNG). Если нужен особый стиль, можно скачать готовый SVG‑файл и вставить его как <img> или background-image.

<span class="rune">ᛟ</span> <!-- Орт -->
<span class="rune">ᚱ</span> <!-- Рал -->
<span class="rune">ᛏ</span> <!-- Тал -->

В результате вы получите:

ᛟ — Орт,
ᚱ — Рал,
ᛏ — Тал.

Подключение шрифта

Чтобы руны отображались корректно на всех устройствах, подключите шрифт, поддерживающий их:

<link href="https://fonts.googleapis.com/css2?family=Junicode&display=swap" rel="stylesheet">
<style>
 .rune {font-family: 'Junicode', serif;}
</style>

Вставка руны как изображения

Если вам нужен стилизованный вариант (например, покрытый дымом или золотой орнамент), используйте SVG.

<img src="runes/ort.svg" alt="Орт" class="rune-img">
<img src="runes/ral.svg" alt="Рал" class="rune-img">
<img src="runes/tal.svg" alt="Тал" class="rune-img">

Для лучшей адаптивности задайте размеры через CSS:

.rune-img {width: 48px; height: auto; vertical-align: middle;}

Применение руны в CSS (псевдо‑элементы)

Можно добавить руны в стили через content:

.button::before {
 content: "DF"; /* Орт */
 font-family: 'Junicode', serif;
 margin-right: 0.5em;
}

Пример готовой кнопки:

<button class="rune-btn">Запуск</button>

<style>
.rune-btn {
 font-family: 'Junicode', serif;
 padding: 8px 12px;
 background: #222;
 color: #fff;
 border: none;
 cursor: pointer;
}
.rune-btn::before {
 content: "B1"; /* Рал */
 margin-right: 6px;
}
</style>

Динамическая вставка руны через JavaScript

Если вам нужно добавить руны в ответ на действие пользователя, используйте JS:

function addRune(containerId, rune) {
 const map = {
 'ort': 'ᛟ',
 'ral': 'ᚱ',
 'tal': 'ᛏ'
 };
 const el = document.getElementById(containerId);}

// Пример использования:
addRune('output', 'ort'); // вставит Орт
addRune('output', 'ral'); // вставит Рал
addRune('output', 'tal'); // вставит Тал

<div id="output"></div>
<button onclick="addRune('output','ort')">Добавить Орт</button>
<button onclick="addRune('output','ral')">Добавить Рал</button>
<button onclick="addRune('output','tal')">Добавить Тал</button>

Советы по совместимости и доступности

• Всегда указывайте alt‑текст для изображений, например alt="Орт".
• Для пользователей экранных считывателей рекомендуется добавить aria-label:

  <span class="rune" aria-label="Орт">ᛟ</span>
  

• Проверяйте отображение в разных браузерах (Chrome, Firefox, Safari). Некоторые старые версии могут не поддерживать Unicode‑блок U+16A0..U+16FF. В этом случае используйте изображения.
• Если планируете печатать материал, убедитесь, что выбранный шрифт поддерживает руны в печатных версиях (например, Junicode имеет лицензии для коммерческого использования).

Пример готовой страницы

<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Руническая галерея</title>
<link href=»https://fonts.googleapis.com/css2?family=Junicode&display=swap» rel=»stylesheet»>
<style>
body {font-family: Arial, sans-serif; padding: 20px;}
;rune {font-size: 3rem; font-family: ‘Junicode’, serif; margin: 10px;}
</style>
</head>
<body>
<h1>Галерея рун Орт, Рал, Тал</h1>
<p>Нажмите кнопку, чтобы добавить руны:</p>
<div id=»gallery»></div>
<button onclick=»addRune(‘gallery’,’ort’)»>Орт</button>
<button onclick=»addRune(‘gallery’,’ral’)»>Рал</button>
<button onclick=»addRune(‘gallery’,’tal’)»>Тал</button>

<script>
function addRune(containerId, rune) {
const map = {‘ort’:’ᛟ’,’ral’:’ᚱ’,’tal’:’ᛏ’};
const el = document.getElementById(containerId);
const span = document.createElement(‘span’);
span.className = ‘rune’; span.setAttribute(‘aria-label’, rune.toUpperCase);
el.appendChild(span);
}
</script>
</body>

Вставка рунических символов Орт, Рал и Тал в веб‑страницы не представляет сложности, если вы знаете их Unicode‑коды и подключаете подходящий шрифт. Выбор между чистым текстом, изображениями или CSS‑псевдоэлементами зависит от ваших целей: простота, стилизация или интерактивность.

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

Статья составлена на основе открытых источников и личного опыта работы с рунической типографикой. Дата публикации: .