I’m building a template for writing some technical documentation. I’d love to do this with as little Javascript as possible. I am including a minimal example
When the screen is wide, it floats references in span tags to the left margin. When the screen gets narrow (e.g., on mobile devices), there’s not enough digital real estate to display a left margin, and I would like to display the references immediately after the paragraph (or, perhaps, at the end of the <section>). I have seen other people suggest doing this with some absolute positioning, but I don’t think that works in my case, since there might be multiple references in a single paragraph. Another option that I’ve seen presented is to put all of the margin notes for a paragraph in a single <aside> block that gets floated to the margin. For various reasons, I’d love to be able to put the span tag as close as possible to the text that it refers to. In a perfect world, I want to keep the html as semantic as possible, so I don’t want to wrap each paragraph in another div tag or table tag.
One near solution that I’ve been able to do (shown in the Codepen example) is to display the paragraph as a flexbox, and change the order of the reference spans so that they display after the main text. This almost works, except that by changing the paragraph to display as a flexbox, every continuous line of text between a span gets rendered as a block, which creates awkward line breaks. I’ve tried a number of CSS tricks to try to get the remaining text to wrap as it normally would if there were no span tags, but I’m beginning to be convinced that this is not supported (perhaps with some clever CSS selectors display: content)
article {
margin-left: 25%;
padding: 5px;
}
main {
margin-left: auto;
margin-right: auto;
max-width: 800px;
flex-wrap:wrap;
}
section {
margin-top: 40px;
}
h1 {
width: calc(125% - 10px);
margin-left: -25%;
text-align: center;
}
h2 {
width: calc(125%);
margin-left: calc(-33%);
border-top: 1px solid gray;
padding-top: 10px;
padding-left: 40px;
}
span.ref {
float: left;
clear: both;
width: calc(33% - 8px);
margin-left: -33%;
hyphens: auto;
font-size: 14px;
color: #666;
text-align: left;
}
@media only screen and (max-width: 500px) {
article {
margin-left: 0px;
}
h1, h2 {
margin-left: 0;
padding-left: 0;
width: 100%;
}
p {
display: flex;
flex-direction: column;
}
span.ref {
order: 2;
float: none;
margin-left: 0px;
}
p > span.ref:first-of-type {margin-top: 10px;}
}<body>
<main>
<article>
<h1>Document Title</h1>
<section>
<h2>First section of the document</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in massa hendrerit [1], <span class="ref">[1] Wikipedia. </span>non condimentum augue pharetra. Etiam in lorem eu nibh sagittis [2] <span class="ref">[2] A fancy textbook</span> lacinia sit amet eu odio. Quisque ultricies lacinia dignissim. Suspendisse blandit urna justo, et blandit metus tincidunt at. Quisque vel varius enim.
</p>
<p>
Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.
</p>
</section>
<section>
<h2>A second section</h2>
</section>
</article>
</main>
</body>
2
Answers
As you dont want javascript, the only way I could think of is to have the references duplicated, one visible only for desktop other visible only for mobile:
I had a crack and was able to get it working with a single version (with some caveats). No need to duplicate the references.
Side note: When marking up content I strongly advise to stick with a single version. I have been caught out before when making updates, not doing them to both versions mobile & desktop.
Desktop: This CSS uses a 2 column grid layout where the left column is a fixed width and right column consumes the residual space. Spans are positioned absolute. Used absolute to be able to hide wrapping overflow in references. Text line wrapping was causing overlapping to the second reference.
Mobile: Paragraphs are display flex, direction column with spans getting an order of 1 to put them at the end.