CSS examples: example needed for vertical-align

[wbamberg]

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

There are already a couple of examples in the page that could be interactivised:

The trick is, these are two quite different contexts. Which one should we choose for the example? Which is a more common usage?

[LLyaudet]

Hello,
I would like to give a try at creating an interactive example for vertical-align.
You asked "Which one should we choose for the example?".
Why not allow to have multiple interactive examples for one page ?
I could create vertical-align.html/vertical-align.css and vertical-align2.html/vertical-align2.css for covering the two contexts.
I have no clue whether it would be complicated to allow multiple examples.

Best regards,
Laurent Lyaudet

[wbamberg]

@LLyaudet , thanks for offering to have a go!

Why not allow to have multiple interactive examples for one page ?

It's a good idea, but unfortunately, for technical reasons, we can't have >1 example on a page yet. I think we should probably choose the first example here.

[LLyaudet]

Hello,
I have a problem, I cannot install nodejs on my Debian.
I first installed the Debian package nodejs but it doesn't contain npm and is outdated as it appears when you google it.
Then I purged it and tried to install nodejs from nodejs.org, but the download fails in the middle anytime I try.
I did the code anyway but couldn't test it.
I don't know if it may help you if I send a pull request anyway.
The file star2.png is from https://mdn.mozillademos.org/files/15189/star.png
It is joined to this comment.

Here is my commit log (below the commit log are the texts one-more time so that it is easier to copy-paste if needed):

commit f4f383b5d3c2071c8fff790b905777bc26b70ffa
Author: Laurent Lyaudet <Laurent.Lyaudet@gmail.com>
Date:   Sun Feb 11 14:32:40 2018 +0100

    Added example for vertical-align in text context

diff --git a/live-examples/css-examples/text/meta.json b/live-examples/css-examples/text/meta.json
index aebd640..0bff617 100644
--- a/live-examples/css-examples/text/meta.json
+++ b/live-examples/css-examples/text/meta.json
@@ -46,6 +46,14 @@
             "title": "CSS Demo: text-transform",
             "type": "css"
         },
+        "vertical-align": {^M
+            "baseTmpl": "tmpl/live-css-tmpl.html",^M
+            "cssExampleSrc": "../../live-examples/css-examples/text/vertical-align.css",^M
+            "exampleCode": "live-examples/css-examples/text/vertical-align.html",^M
+            "fileName": "vertical-align.html",^M
+            "title": "CSS Demo: vertical-align",^M
+            "type": "css"^M
+        },^M
         "white-space": {
             "baseTmpl": "tmpl/live-css-tmpl.html",
             "cssExampleSrc":
diff --git a/live-examples/css-examples/text/vertical-align.css b/live-examples/css-examples/text/vertical-align.css
new file mode 100755
index 0000000..4854760
--- /dev/null
+++ b/live-examples/css-examples/text/vertical-align.css
@@ -0,0 +1,9 @@
+p.starInside {
+  height: 3em;
+  padding: 0 0.5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
diff --git a/live-examples/css-examples/text/vertical-align.html b/live-examples/css-examples/text/vertical-align.html
new file mode 100644
index 0000000..ed42e62
--- /dev/null
+++ b/live-examples/css-examples/text/vertical-align.html
@@ -0,0 +1,79 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="vertical-align">
+    <div class="example-choice" initial-choice="true">
+        <pre><code class="language-css">vertical-align: baseline;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: top;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: middle;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: bottom;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: super;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: sub;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: text-top;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: text-bottom;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: 0.2em;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: -1em;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: 20%;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: -100%;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+</section>
+<div id="output" class="output large hidden">
+    <section id="default-example" class="default-example">
+      <p id="starInside">The following star will align vertically:<img id="example-element" src="/media/examples/star2.png"></p>
+    </section>
+</div>
diff --git a/media/examples/star2.png b/media/examples/star2.png
new file mode 100644
index 0000000..bee01b9
Binary files /dev/null and b/media/examples/star2.png differ

END of commit log

=================
vertical-align.css
=================
p.starInside {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
==================

=================
vertical-align.html
=================
<section id="example-choice-list" class="example-choice-list large" data-property="vertical-align">
    <div class="example-choice" initial-choice="true">
        <pre><code class="language-css">vertical-align: baseline;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: middle;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: bottom;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: super;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: sub;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: text-top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: text-bottom;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: 0.2em;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: -1em;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: 20%;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: -100%;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
</section>
<div id="output" class="output large hidden">
    <section id="default-example" class="default-example">
      <p id="starInside">The following star will align vertically:<img id="example-element" src="/media/examples/star2.png"></p>
    </section>
</div>
==================


=================
meta.json
=================
        "vertical-align": {
            "baseTmpl": "tmpl/live-css-tmpl.html",
            "cssExampleSrc": "../../live-examples/css-examples/text/vertical-align.css",
            "exampleCode": "live-examples/css-examples/text/vertical-align.html",
            "fileName": "vertical-align.html",
            "title": "CSS Demo: vertical-align",
            "type": "css"
        },
=================

Best regards,
Laurent

[LLyaudet]

Hello,
I found an error by reading my code.
Here is a correction for the css:

=================
vertical-align.css
=================
#starInside {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
==================

Best regards,
Laurent

[wbamberg]

Hey @LLyaudet . I'm afraid I can't help with your Debian/node issue, but I'll take a look at your example and try to get it into the repo :).

[LLyaudet]

Hello @wbamberg ,
Good news that you'll try to put it in the repo :).
Let me know when it's done so that I can check in your commit if you corrected something that was wrong with my code.
Best regards,
Laurent

[wbamberg]

Sorry to be slow getting to this. Thanks for the contribution!

I tried it out. It works well, but a few comments:

• you have 12 choices here: you should restrict yourself to 6 choices, so choose 6 that are representative of the syntax.

• I think it works better if the text does not wrap, so I'd choose something shorter, like:

<p id="starInside">Align <img id="example-element" src="/media/examples/star2.png"> the star</p>

• think the text could be a little bigger, like 1.2em or so.

• I might be missing something, but I don't think you need most of the styles. I think just this:

p {
    font-family: monospace;
    font-size: 1.2em;
    text-decoration: underline overline;
}

...should work, and then you don't need the id="starInside" either. But like I say, I might be missing something.

[LLyaudet]

Hello @wbamberg,

Thanks for the feedback.

I chose 6 examples that are representative I think, as you suggested.

I had no idea it would wrap since I didn't knew which width the id="output" div would have.
Can you style the id="output" div also? Or is it fixed by the JS of the framework for interactive-examples?
I shortened the text as you suggested.

Again since I don't know how the framework for interactive-examples works and the styles applied interactively are aimed at the element with id="example-element", I thought that it would be safer to give an id to the paragraph and style it that way. I couldn't know if it would conflict or not with the whole css of the page unless reading the source code of the framework.
From your comment, I assume it is safe to simplify the code.

For the CSS,
margin-left: auto;
margin-right: auto;
width: 80%;
is for centering horizontally the paragraph. Since I don't know how it displays when you test it I assume that it is safe to remove it as you suggested.

height: 3em;
was a mistake I meant "line-height: 3em;" since it helps to see the difference between the examples (top and text-top, etc.).

Here is the code:

=================
vertical-align.html
=================
<section id="example-choice-list" class="example-choice-list large" data-property="vertical-align">
    <div class="example-choice" initial-choice="true">
        <pre><code class="language-css">vertical-align: baseline;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: middle;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: bottom;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: sub;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: text-top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
</section>
<div id="output" class="output large hidden">
    <section id="default-example" class="default-example">
      <p>Align the star: <img id="example-element" src="/media/examples/star2.png"></p>
    </section>
</div>
==================

=================
vertical-align.css
=================
p {
  line-height: 3em;
  font-family: monospace;
  font-size: 1.2em;
  text-decoration: underline overline;
}
==================

Best regards,
Laurent Lyaudet

[wbamberg]

@LLyaudet , this looks good! The only problem I can see is that you need 4 spaces indentation for the CSS file.

Could you open a PR with these changes in, so I can review it properly and get it merged? Thanks!

[wbamberg]

Fixed: #606