if there 2 layouts same data should try find semantic layout fits both or pick 1 semantic , other stylistic only? ideas appreciated since @ moment, i'm doing neither.
i'm trying put sacred texts online ability have them styled various ways. there 2 main styles: paragraph form , verse form. verse form easy. paragraph form giving me headache since conflicts verse form and, seemingly, itself. in paragraph form verse numbers , chapter numbers can toggled on , off, loading new page when choosing between 2 forms not ideal. going non-semantic route easy. fixing confusing me though. i'd keep valid html if possible.
here's have far:
<article> <h2>book</h2> <div> <h3>chapter 1</h3> <span class="verse-num">1 </span>lorem ipsum dolor sit amet, duo ei aliquam tincidunt, ut eos electram elaboraret, no nec falli omnesque. <span class="verse-num">2 </span>eu cum nisl alia aeterno. mediocrem eloquentiam ad mel, no idque moderatius mei, sed legere inciderint no. et nec brute essent sententiae. </div> <div> <span class="verse-num">3 </span>sea ea omnes explicari repudiare, et eam graeco alterum eruditi, vim consulatu referrentur ad. id eros nostrud mei, nibh adipisci has eu. ei pri ipsum primis accommodare. <span class="verse-num">4 </span>ignota copiosae theophrastus ne qui, te suas essent molestiae nam. tacimates patrioque quo ad. </div> <div> <span class="verse-num">5 </span>nusquam appareat comprehensam has in. qui melius labitur persequeris cu, no brute elitr libris eum. <h3>chapter 2</h3> <span class="verse-num">1 </span>voluptaria reformidans @ sed, mollis ullamcorper sea id. usu cu oblique voluptaria definitiones, dicant corpora iudicabit an. </div> <div> <span class="verse-num">2 </span>cum @ illum facete corrumpit, aeque repudiare ad vim, cu has inimicus iudicabit. qui eu interesset eloquentiam. est ei nisl atqui, amet intellegat ea per. integre adolescens id has, adhuc tibique corrumpit ut quo. facer assum singulis eu per, et mea vulputate necessitatibus. <span class="verse-num">3 </span>ut ius facer tamquam erroribus, duo ei atqui dicunt liberavisse. </div> <div> quo mundi offendit adolescens ut, nisl illum vis an. ne vis luptatum legendos, docendi vulputate omittantur usu eu. @ mea luptatum iracundia, ridens laoreet contentiones pro, eu diam partem inciderint mea. <span class="verse-num">4 </span>veri sanctus mel te, no vero etiam iudicabit vis, cu dicat explicari reformidans vix. </div> <div> <h3>chapter 3</h3> <span class="verse-num">1 </span>pri homero comprehensam ex, ad nemore suscipit appetere mel. ex simul albucius vel. no est hinc graeco nominavi. <span class="verse-num">2 </span>erat fabulas ex qui. eu vis nonumy omnium scaevola, audiam elaboraret eos in. </div> </article>i'd rid of div's, have no idea make them. i'd keep valid html if possible. can't use p tags since h3 tag enclosed in one. can't use sections because not sections have h3 tag.
i'm open redoing html (and css), avoid javascript don't believe fits. ideas appreciated.
for clarity: should ignore semantics (use have), try make 1 of them semantic , ignore other, or make both of them semantically valid? if either of later two, how?
/* paragraph mode styling = makes div act <p> tag */ div { -webkit-margin-before: 1rem; -webkit-margin-after: 1rem; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -moz-margin-start: 0px; -moz-margin-end: 0px; margin-bottom: 1rem; margin-top: 1rem; } /* simple toggle styling */ label { text-decoration: underline; } input[type=checkbox]:checked + label { color: blue; } /* chapter styling */ input[type=checkbox]#verses:not(:checked) ~ article h3 { display: inline; font-size: 1rem; font-weight: normal; } input[type=checkbox]#verses:not(:checked) ~ article h3:before { content: "["; } input[type=checkbox]#verses:not(:checked) ~ article h3:after { content: "]"; } /* main toggle changes - makes things disappear */ input[type=checkbox]#verses:checked ~ #super-label, input[type=checkbox]#verses:checked ~ #super, input[type=checkbox]#verses:checked ~ #chapters-label, input[type=checkbox]#verses:checked ~ #chapters, input[type=checkbox]#chapters:not(:checked) ~ article h3, span.verse-num { display: none; } /* more chapter styling - not grouped above due precedence issues i'm lazy fix @ moment */ input[type=checkbox]#verses:checked ~ article h3 { display: block; margin-bottom: 0; } /* verse mode styling - make spans simulate <p> tags */ input[type=checkbox]#verses:checked ~ article span.verse-num:before { content: '\a'; white-space: pre; display: block; } input[type=checkbox]#verses:checked ~ article span.verse-num:after { content: ''; display: inline-block; width: .5rem; } /* paragraph mode styling - not grouped above due precedence issues i'm lazy fix @ moment */ input[type=checkbox]#verses:checked ~ article div, input[type=checkbox]#verses:checked ~ article span.verse-num, input[type=checkbox]#super:checked ~ article span.verse-num { display: inline; } input[type=checkbox]#super:checked ~ article span.verse-num { font-size: .83rem; vertical-align: super; } /* verse mode styling - not grouped above due precedence issues i'm lazy fix @ moment */ input[type=checkbox]#verses:checked ~ article span.verse-num { font-size: 1rem; vertical-align: baseline; }<input type="checkbox" id="verses"> <label for="verses">toggle verses</label> <input type="checkbox" id="chapters"> <label for="chapters" id="chapters-label">toggle chapters</label> <input type="checkbox" id="super"> <label for="super" id="super-label">verse numbers superscript</label> <article> <h2>book</h2> <div> <h3>chapter 1</h3> <span class="verse-num">1 </span>lorem ipsum dolor sit amet, duo ei aliquam tincidunt, ut eos electram elaboraret, no nec falli omnesque. <span class="verse-num">2 </span>eu cum nisl alia aeterno. mediocrem eloquentiam ad mel, no idque moderatius mei, sed legere inciderint no. et nec brute essent sententiae.</div> <div><span class="verse-num">3 </span>sea ea omnes explicari repudiare, et eam graeco alterum eruditi, vim consulatu referrentur ad. id eros nostrud mei, nibh adipisci has eu. ei pri ipsum primis accommodare. <span class="verse-num">4 </span>ignota copiosae theophrastus ne qui, te suas essent molestiae nam. tacimates patrioque quo ad.</div> <div><span class="verse-num">5 </span>nusquam appareat comprehensam has in. qui melius labitur persequeris cu, no brute elitr libris eum. <h3>chapter 2</h3> <span class="verse-num">1 </span>voluptaria reformidans @ sed, mollis ullamcorper sea id. usu cu oblique voluptaria definitiones, dicant corpora iudicabit an.</div> <div><span class="verse-num">2 </span>cum @ illum facete corrumpit, aeque repudiare ad vim, cu has inimicus iudicabit. qui eu interesset eloquentiam. est ei nisl atqui, amet intellegat ea per. integre adolescens id has, adhuc tibique corrumpit ut quo. facer assum singulis eu per, et mea vulputate necessitatibus. <span class="verse-num">3 </span>ut ius facer tamquam erroribus, duo ei atqui dicunt liberavisse.</div> <div>quo mundi offendit adolescens ut, nisl illum vis an. ne vis luptatum legendos, docendi vulputate omittantur usu eu. @ mea luptatum iracundia, ridens laoreet contentiones pro, eu diam partem inciderint mea. <span class="verse-num">4 </span>veri sanctus mel te, no vero etiam iudicabit vis, cu dicat explicari reformidans vix.</div> <div> <h3>chapter 3</h3> <span class="verse-num">1 </span>pri homero comprehensam ex, ad nemore suscipit appetere mel. ex simul albucius vel. no est hinc graeco nominavi. <span class="verse-num">2 </span>erat fabulas ex qui. eu vis nonumy omnium scaevola, audiam elaboraret eos in. </div> </article>
passing non-semantic snippet w3 html validator reveals valid html, apart missing title tag, not doing.
as semantic validity, opinion-based question, i'll try explain reason behind opinions.
i never started bothering semantics, because there way many things can achieved ugly workaround, of somehow involve abusing tables (e.g. making element fill whatever parent placed in, or vertically centering multi-line text in div).
try build html makes sense, quite not possible bits.
, things there no concept, draggable blocks. example, if click "flag" link under post here on so, sort of popup. popup div, @ least @ time of writing.
now, div correct element? on w3 documentation, there 2 lines in "definition & usage":
the
<div>tag defines division or section in html document.
according this, should used in same manner <p>, block elements <p> text.
the
<div>tag used group block-elements format them css.
according this, can used pretty everywhere, long contains block elements.
the same goes <span> tag, inline elements.
so if want, can replace divs don't spans, hardly want, right?
i think example impossible semantically valid other having couple of pre-formatted hidden divs of show 1 @ time. believe impossible because trying use the same elements multiple purposes. once have flowing text, , once have ordered list of verses, , same elements?
syntactically? - no problem. semantically? - no chance.
i go have, if want semantically valid too, believe either have create 1 hidden div each display state, , when options changed, show corresponding div, or (as doveyg suggested) store text in javascript in form , create displayed elements on fly.
Comments
Post a Comment