كتابة كتاب قابل للقلب باستخدام مناطق CSS وعمليات التحويل الثلاثية الأبعاد

Ilmari Heikkinen

لقد حان اليوم. لقد سئمت أخيرًا من الاطّلاع على نصوص طويلة وأصبحت تبحث عن تنسيق جديد. أنيقة يجب أن يكون الجهاز صغيرًا. عنصر يأخذ الصورة الطويلة ويقطعها إلى مستطيلات صغيرة أنيقة ويربطها معًا وأطلق على هذا الاختراع اسم "الكتاب".

بفضل إمكانات مناطق CSS (CanIUse، انتقِل إلى chrome://flags وفعِّل مناطق CSS) وعمليات التحويل الثلاثية الأبعاد في CSS، أصبحت تكنولوجيا الكتب المتطوّرة متاحة أخيرًا على المتصفحات الحديثة. ما عليك سوى كتابة بضعة أسطر من JavaScript والعديد من أسطر CSS.

لنبدأ بتحديد بنية الكتاب. يتألّف الكتاب من صفحات، وتتألّف الصفحات من وجهَين. تحتوي الجوانب على محتوى الكتاب:

<div class="book">
    <div> <!-- first page -->
    <div> <!-- front cover -->
        # My Fancy Book
    </div>
    <div> <!-- backside of cover -->
        # By Me I. Myself
        ## 2012 Bogus HTML Publishing Ltd
    </div>
    </div>
    <!-- content pages -->
    <div>
    <!-- front side of page -->
    <div class="book-pages"></div>
    <!-- back side of page -->
    <div class="book-pages"></div>
    </div>
    <div>
    <div class="book-pages"></div>
    <div class="book-pages"></div>
    </div>
    <div>
    <div class="book-pages"></div>
    <div class="book-pages"></div>
    </div>
</div>

سنستخدم مناطق CSS لنقل نص الكتاب إلى صفحاته. ولكننا نحتاج أولاً إلى نص الكتاب.

<span id="book-content">
    blah blah blah ...
</span>

الآن بعد أن كتبنا كتابنا، لنحدِّد ملف CSS الخاص بالمسار. أستخدِم الحرف + كعنصر نائب بادئة المورّد، واستبدِله بـ -webkit- لمتصفّحات WebKit و-moz- لمتصفّح Firefox وما إلى ذلك:

#book-content {
    +flow-into: book-text-flow;
}
.book-pages {
    +flow-from: book-text-flow;
}

سيتم الآن نقل المحتوى من عنصر span‏ #book-content إلى عناصر div‏ .book-pages بدلاً من ذلك. هذا الكتاب سيئ إلى حدٍ ما. للحصول على كتاب أكثر ملاءمةً للقراءة، علينا بدء مهمة. ستقودنا رحلتنا عبر جسر قوس قزح الخاص بعمليات تحويل CSS إلى مملكة JavaScript التي تعمل كالساعة. في قاعات أسياد الجن الميكانيكيين، سنطلق سحرًا ملحميًا للانتقال ونحصل على المفاتيح الثلاث الأسطورية التي تتحكّم في واجهة العالم العلوي.

يقدّم لنا حارس جسر قوس قزح نصائح حول أدوات الاختيار الأنيقة للعناصر الهيكلية كي نتمكّن من تحويل بنية الكتاب بتنسيق HTML إلى شكل يشبه الكتاب أكثر:

html {
    width: 100%;
    height: 100%;
}
body {
    /* The entire body is clickable area. Let the visitor know that. */
    cursor: pointer;
    width: 100%;
    height: 100%;
    /* Set the perspective transform for the page so that our book looks 3D. */
    +perspective: 800px;
    /* Use 3D for body, the book itself and the page containers. */
    +transform-style: preserve-3d;
}
.book {
    +transform-style: preserve-3d;
    position: absolute;
}
/* Page containers, contain the two sides of the page as children. */
.book > div {
    +transform-style: preserve-3d;
    position: absolute;
}
/* Both sides of a page. These are flat inside the page container, so no preserve-3d. */
.book > div > div {
    /* Fake some lighting with a gradient. */
    background: +linear-gradient(-45deg, #ffffff 0%, #e5e5e5 100%);
    width: 600px;
    height: 400px;
    overflow: hidden;
    /* Pad the page text a bit. */
    padding: 30px;
    padding-bottom: 80px;
}
/* Front of a page */
.book > div > div:first-child {
    /* The front side of a page should be slightly above the back of the page. */
    +transform: translate3d(0px, 0px, 0.02px);
    /* Add some extra padding for the gutter. */
    padding-left: 40px;
    /* Stylish border in the gutter for visual effect. */
    border-left: 2px solid #000;
}
/* Back of a page */
.book > div > div:last-child {
    /* The back side of a page is flipped. */
    +transform: rotateY(180deg);
    padding-right: 40px;
    border-right: 2px solid #000;
}
/* Front cover of the book */
.book > div:first-child > div:first-child {
    /* The covers have a different color. */
    background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
    /* Put a border around the cover to make it cover the pages. */
    border: 2px solid #000;
    /* And center the cover. */
    margin-left: -1px;
    margin-top: -1px;
}
/* Back cover of the book */
.book > div:last-child > div:last-child {
    background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
    border: 2px solid #000;
    margin-left: -1px;
    margin-top: -1px;
}

من خلال إنشاء نمط على شكل ورقة إلى حدّ ما لصفحات HTML، نصل إلى بوابات مملكة JavaScript التي تتضمن تريليونات الإعدادات. لكي نتمكن من المرور من البوابة، علينا تحويل الكتاب المسطح إلى مجلد مناسب. لإضافة بعض الحجم إلى الكتاب، تم إزاحة كل صفحة قليلاً على محور z.

(function() {
var books = document.querySelectorAll('.book');
for (var i = 0; i < books.length; i++) {
    var book = books[i];
    var pages = book.childNodes;
    for (var j = 0; j < pages.length; j++) {
    if (pages[j].tagName == "DIV") {
        setTransform(pages[j], 'translate3d(0px, 0px, ' + (-j) + 'px)');
    }
    }
}
})();

إنّ إلقاء تعويذة الانتقال لإبهار أسياد الجن ليس أصعب التعويذات. ومع ذلك، تجعل النتائج صفحات كتابنا تتحرّك بشكل سلس.

.book > div {
    +transition: 1s ease-in-out;
}

أخيرًا، لكي تصبح الصفحات قابلة للتحويل، علينا ربط الأحداث نفسها بقضيتنا.

(function(){
    // Get all the pages.
    var pages = document.querySelectorAll('.book > div');
    var currentPage = 0;
    // Go to previous page when clicking on left side of window.
    // Go to the next page when clicking on the right side.
    window.onclick = function(ev) {
        if (ev.clientX < window.innerWidth/2) {
        previousPage();
        } else {
        nextPage();
        }
        ev.preventDefault();
    };
    var previousPage = function() {
        if (currentPage > 0) {
        currentPage--;
            // Rotate the page to closed position and move it to its place in the closed page stack.
        setTransform(pages[currentPage], 'translate3d(0px,0px,' + (-currentPage) + 'px) rotateY(0deg)');
        }
    };
    var nextPage = function() {
        if (currentPage < pages.length) {
            // Rotate the page to open position and move it to its place in the opened stack.
        setTransform(pages[currentPage], 'translate3d(0px,0px,' + currentPage + 'px) rotateY(-150deg)');
        currentPage++;
        }
    };
})();

وبفضل ذلك، حصلنا على تكنولوجيا "الكتاب" ويمكننا إخلاء أبراج الكريستال في العالم العلوي وترك الوهج الأعمى وحرائق نووية شرسة من Achenar، النجم الأزرق العظيم في رابطة العالم العلوي. ونعود إلى منازلنا منتصرين، ونلوّح بالكتب فوق رؤوسنا، ونحن على استعداد للمشاركة في المسيرات والاحتفالات التي تقام تكريماً لنا.

يمكنك الاطّلاع على مثال على الإنترنت هنا والحصول على المصدر الكامل للأمثلة. إذا لم يكن لديك CSS Regions في المتصفّح، سيبدو المثال مُعطلاً تمامًا. في هذه الحالة، يمكنك تجربة هذا المثال بدلاً من ذلك.