kjvstudy.org/kjvstudy_org/templates/interlinear_landing.html

{% extends "base.html" %}

{% block title %}Interlinear Bible Study - KJV Bible{% endblock %}

{% block description %}Study the KJV Bible word-by-word in Hebrew and Greek with transliteration, Strong's numbers, parsing, and definitions.{% endblock %}

{% block head %}
<style>
/* Sample word cards — match the homepage interlinear samples */
.interlinear-example {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.sample-word {
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-dark);
    border-radius: 6px;
}

.sample-original {
    display: block;
    font-size: 2.2rem;
    color: var(--text-strong);
    margin-bottom: 0.35rem;
}

.sample-original.hebrew {
    font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    direction: rtl;
}

.sample-original.greek {
    font-family: "SBL Greek", "Gentium Plus", "Times New Roman", serif;
}

.sample-english {
    display: block;
    font-size: 0.85rem;
    color: var(--accent-strong);
    font-weight: 600;
}

.sample-strongs {
    display: block;
    font-size: 0.7rem;
    color: var(--bronze);
    letter-spacing: 0.05em;
    margin-top: 0.15rem;
}

.sample-link {
    font-size: 0.9rem;
}
</style>
{% endblock %}

{% block content %}
<h1>Interlinear Bible Study</h1>
<p class="subtitle">Explore Scripture word-by-word in the original languages</p>

<div>
    <h2>What is Interlinear Study?</h2>
    <p>Interlinear Bible study allows you to examine Scripture in its original Hebrew (Old Testament) and Greek (New Testament) languages, word-by-word. Each word shows:</p>
    <ul>
        <li><strong>Original Text</strong> — The Hebrew or Greek word as written in ancient manuscripts</li>
        <li><strong>Transliteration</strong> — How the word is pronounced in English letters</li>
        <li><strong>Strong's Number</strong> — A reference number linking to detailed lexical information</li>
        <li><strong>English Translation</strong> — How the word was translated in the KJV</li>
        <li><strong>Parsing</strong> — Grammatical information (verb tense, noun case, etc.)</li>
        <li><strong>Definition</strong> — The word's meaning and usage</li>
    </ul>
</div>

<div>
    <h2>How to Use</h2>
    <p>Simply navigate to any verse page on this site. If interlinear data is available for that verse, you'll see a <strong>"Word-by-Word Analysis"</strong> section that you can expand to explore each word in detail.</p>
    <p>Click on any Strong's number to view comprehensive lexical information at BibleHub.</p>
</div>

<div>
    <h2>Example: Genesis 1:1 (Hebrew)</h2>
    <div class="interlinear-example">
        <div class="sample-word">
            <span class="sample-original hebrew">בְּרֵאשִׁית</span>
            <span class="sample-english">In the beginning</span>
            <span class="sample-strongs">H7225</span>
        </div>
        <div class="sample-word">
            <span class="sample-original hebrew">בָּרָא</span>
            <span class="sample-english">created</span>
            <span class="sample-strongs">H1254</span>
        </div>
        <div class="sample-word">
            <span class="sample-original hebrew">אֱלֹהִים</span>
            <span class="sample-english">God</span>
            <span class="sample-strongs">H430</span>
        </div>
        <div class="sample-word">
            <span class="sample-original hebrew">אֵת</span>
            <span class="sample-english">[untranslated]</span>
            <span class="sample-strongs">H853</span>
        </div>
        <div class="sample-word">
            <span class="sample-original hebrew">הַשָּׁמַיִם</span>
            <span class="sample-english">the heavens</span>
            <span class="sample-strongs">H8064</span>
        </div>
        <div class="sample-word">
            <span class="sample-original hebrew">וְאֵת</span>
            <span class="sample-english">and</span>
            <span class="sample-strongs">H853</span>
        </div>
        <div class="sample-word">
            <span class="sample-original hebrew">הָאָרֶץ</span>
            <span class="sample-english">the earth</span>
            <span class="sample-strongs">H776</span>
        </div>
    </div>
    <p class="sample-link"><a href="/book/Genesis/chapter/1/verse/1#interlinear">View full analysis →</a></p>
</div>

<div>
    <h2>Example: John 1:1 (Greek)</h2>
    <div class="interlinear-example">
        <div class="sample-word">
            <span class="sample-original greek">Ἐν</span>
            <span class="sample-english">In</span>
            <span class="sample-strongs">G1722</span>
        </div>
        <div class="sample-word">
            <span class="sample-original greek">ἀρχῇ</span>
            <span class="sample-english">the beginning</span>
            <span class="sample-strongs">G746</span>
        </div>
        <div class="sample-word">
            <span class="sample-original greek">ἦν</span>
            <span class="sample-english">was</span>
            <span class="sample-strongs">G1510</span>
        </div>
        <div class="sample-word">
            <span class="sample-original greek">ὁ</span>
            <span class="sample-english">the</span>
            <span class="sample-strongs">G3588</span>
        </div>
        <div class="sample-word">
            <span class="sample-original greek">λόγος</span>
            <span class="sample-english">Word</span>
            <span class="sample-strongs">G3056</span>
        </div>
    </div>
    <p class="sample-link"><a href="/book/John/chapter/1/verse/1#interlinear">View full analysis →</a></p>
</div>

<div>
    <h2>Featured Verses</h2>
    <p>Explore these well-known passages with word-by-word analysis:</p>
    <ul>
        {% for verse in featured_verses %}
        <li>
            <a href="{{ verse.url }}"><strong>{{ verse.reference }}</strong></a> — {{ verse.note }}
        </li>
        {% endfor %}
    </ul>
</div>

<div>
    <h2>Why Study Interlinearly?</h2>
    <ul>
        <li><strong>Deeper Understanding</strong> — Discover nuances lost in translation</li>
        <li><strong>Word Studies</strong> — Trace how specific Greek or Hebrew words are used throughout Scripture</li>
        <li><strong>Context</strong> — Understand the grammatical structure of passages</li>
        <li><strong>Original Meaning</strong> — Get closer to what the original authors wrote</li>
    </ul>
</div>

<nav>
    <p><a href="/">← Home</a></p>
</nav>

<script>
// Keyboard navigation for links
var navItems = Array.from(document.querySelectorAll('a[href], p, li'));
var selectedIndex = -1;

function selectItem(index) {
    if (selectedIndex >= 0 && selectedIndex < navItems.length) {
        navItems[selectedIndex].classList.remove('selected');
    }
    selectedIndex = Math.max(0, Math.min(index, navItems.length - 1));
    navItems[selectedIndex].classList.add('selected');
    navItems[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
}

document.addEventListener('keydown', function(e) {
    // Don't handle if user is typing in an input
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (KJVNav.sidebarActive) return;

    if (e.key === 'ArrowLeft') {
        e.preventDefault();
        history.back();
    } else if (e.key === 'ArrowDown' || e.key === 'j') {
        e.preventDefault();
        selectItem(selectedIndex < 0 ? 0 : selectedIndex + 1);
    } else if (e.key === 'ArrowUp' || e.key === 'k') {
        e.preventDefault();
        selectItem(selectedIndex - 1);
    } else if (e.key === 'Enter' && selectedIndex >= 0) {
        e.preventDefault();
        var item = navItems[selectedIndex];
        if (item.href) {
            window.location.href = item.href;
        } else if (item.querySelector('a')) {
            window.location.href = item.querySelector('a').href;
        }
    } else if (e.key === 'Escape') {
        if (selectedIndex >= 0) {
            navItems[selectedIndex].classList.remove('selected');
            selectedIndex = -1;
        }
    }
});
</script>
<style>
.selected {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    background: var(--accent-softer) !important;
}
</style>
{% endblock %}