Thread: [Feature request] - Ctrl+Click on classes
View Single Post
Old 01-27-2021, 07:12 AM   #4
thiago.eec
Wizard
thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.thiago.eec ought to be getting tired of karma fortunes by now.
 
Posts: 1,196
Karma: 1355861
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite, Kindle Oasis
Sorry, maybe I wasn't specific enough. The Ctrl+Click would be on the actual class name, not in any part of the element.

This is what I had in mind (just like Sigil):

1) Code example:
Spoiler:

Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR" xml:lang="pt-BR">

<head>
  <title>part0002</title>
  <link href="../stylesheet.css" rel="stylesheet" type="text/css"/>
  <link href="../page_styles.css" rel="stylesheet" type="text/css"/>
</head>

<body class="calibre">

  <div id="Table_of_Content" class="class2">

    <div class="class3 class8">Sumário</div>

    <div class="class4"><a href="part0003.xhtml" class="class5">1. O caminho amplo e o caminho profundo</a></div>

    <div class="class4"><a href="part0004.xhtml" class="class5">2. Pistas antigas</a></div>

    <div class="class4"><a href="part0005.xhtml" class="class5">3. O depois é o antes do durante seguinte</a></div>

    <div class="class4"><a href="part0006.xhtml" class="class5">4. O melhor que tínhamos</a></div>

    <div class="class4"><a href="part0007.xhtml" class="class5">5. Uma mente imperturbável</a></div>

    <div class="class4"><a href="part0008.xhtml" class="class5">6. Preparado para amar</a></div>

    <div class="class4"><a href="part0009.xhtml" class="class5">7. Atenção!</a></div>

    <div class="class4"><a href="part0010.xhtml" class="class5">8. Leveza de ser</a></div>

    <div class="class4"><a href="part0011.xhtml" class="class5">9. Mente, corpo e genoma</a></div>

    <div class="class4"><a href="part0012.xhtml" class="class5">10. A meditação como psicoterapia</a></div>

    <div class="class4"><a href="part0013.xhtml" class="class5">11. O cérebro de um iogue</a></div>

    <div class="class4"><a href="part0014.xhtml" class="class5">12. Tesouro escondido</a></div>

    <div class="class4"><a href="part0015.xhtml" class="class5">13. Alterando traços</a></div>

    <div class="class4"><a href="part0016.xhtml" class="class5">14. Uma mente saudável</a></div>

    <div class="class6"><a href="part0017.xhtml" class="class7">Agradecimentos</a></div>

    <div class="class4"><a href="part0018.xhtml" class="class7">Notas</a></div>

    <div class="class4"><a href="part0019.xhtml" class="class7">Outras fontes</a></div>

  </div>

</body>

</html>


2) CSS stylesheet:
Spoiler:

.calibre {
display: block;
font-size: 1em;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin: 0 5pt
}
.calibre1 {
display: block
}
.calibre2 {
display: block;
line-height: 1.2
}
.class {
display: block;
text-align: center
}
.class1 {
font-size: 1em;
height: 100%;
line-height: 1.2;
width: auto
}
.class2 {
display: block;
font-size: 1em;
line-height: 1.2;
padding: 1.07083em 5%
}
.class3 {
display: block;
font-family: "02-Ines Book";
font-size: 1.5em;
line-height: 1.2;
margin-bottom: 3.9047em;
text-align: center
}
.class4 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2
}
.class5 {
text-decoration-color: rgba(255, 255, 255, 0)
}
.class6 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
margin-top: 0.743737em
}
.class7 {
font-style: italic;
font-weight: normal;
text-decoration-color: rgba(255, 255, 255, 0)
}
.class8 {
display: block;
font-family: "02-Ines Book";
font-size: 1.5em;
line-height: 1.2;
margin-bottom: 3.32004em;
text-align: center
}
.class9 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
text-align: justify
}
.class10 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
text-align: justify;
text-indent: 1.823%
}
.class11 {
font-size: 0.75em;
line-height: 1.2
}
.class12 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-style: italic;
line-height: 1.2;
text-align: justify;
text-indent: 1.823%
}
.class13 {
font-style: italic;
font-weight: normal
}
.class14 {
display: block;
font-family: "Ines Light";
font-size: 0.875em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.589085em;
margin-top: 1.17817em
}
.class15 {
font-size: 0.75em;
line-height: 1.2;
text-decoration-color: rgba(255, 255, 255, 0);
vertical-align: text-top
}
.class16 {
display: block;
line-height: 1.2;
margin-left: 7.5%;
margin-right: 7.5%;
margin-top: 1.542em;
width: 85%
}
.class17 {
display: block;
line-height: 1.2;
text-align: center
}
.class18 {
height: auto;
line-height: 1.2;
width: 100%
}
.class19 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
margin-top: 0.743737em;
text-align: justify;
text-indent: 1.823%
}
.class20 {
font-size: 0.75em;
line-height: 1.2;
text-decoration: underline;
vertical-align: text-top
}
.class21 {
display: block;
font-family: "Ines Light";
font-size: 0.875em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.574458em;
margin-left: 1.823%;
margin-top: 0.574458em
}
.class22 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
margin-left: 3.646%;
margin-top: 0.39144em;
text-align: justify;
text-indent: -1.301%
}
.class23 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
margin-left: 3.646%;
text-align: justify;
text-indent: -1.301%
}
.class24 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.39144em;
margin-left: 3.646%;
margin-right: 1.302%;
text-align: justify;
text-indent: -1.301%
}
.class25 {
display: block;
font-family: "Ines Light";
font-size: 1em;
font-weight: 200;
line-height: 1.2;
margin-left: 3.646%;
margin-right: 1.302%;
text-align: justify;
text-indent: -1.301%
}
.class26 {
font-size: 0.75em;
line-height: 1.2;
vertical-align: text-top
}
.class27 {
font-size: 0.85714em;
line-height: 1.2;
text-decoration-color: rgba(255, 255, 255, 0);
vertical-align: text-top
}
.class28 {
color: gray;
display: block;
height: 2px;
line-height: 1.2;
border: currentColor inset 1px;
margin: 1.60625em auto 0.200782em
}
.class29 {
display: block;
font-family: "Ines Light";
font-size: 0.875em;
font-weight: 200;
line-height: 1.2;
text-align: justify
}
.class30 {
display: block;
font-family: "02-Ines Book";
font-size: 1.5em;
line-height: 1.2;
text-align: center
}
.class31 {
display: block;
font-family: "Ines Light";
font-size: 0.75em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.685021em;
margin-top: 9.14993em
}
.class32 {
display: oeb-page-foot;
font-family: "Ines Light";
font-size: 0.875em;
font-weight: 200;
line-height: 1.2;
text-align: justify;
text-indent: 1.823%
}
.class33 {
font-size: 0.85714em;
line-height: 1.2
}
.class34 {
display: block;
font-family: "Ines Light";
font-size: 0.75em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.685021em;
margin-top: 0.978601em
}
.class35 {
display: block;
font-family: "Ines Light";
font-size: 0.875em;
font-weight: 200;
line-height: 1.2;
text-align: justify;
text-indent: 1.823%
}
.class36 {
display: block;
font-family: "Ines Light";
font-size: 0.75em;
line-height: 1.2
}
.class37 {
display: block;
font-size: 1.16667em;
font-weight: 200;
line-height: 1.2;
text-align: justify;
text-indent: 1.823%
}
.class38 {
display: block;
font-weight: 200;
margin-bottom: 0.685021em;
margin-top: 0.978601em
}
.class39 {
display: block;
font-family: "Ines Light";
font-size: 0.875em;
line-height: 1.2
}
.class40 {
display: block;
font-weight: 200;
text-align: justify;
text-indent: 1.823%
}
.class41 {
display: block;
font-size: 0.85714em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.685021em;
margin-top: 0.978601em
}
.class42 {
font-family: "02-symbol";
font-weight: normal
}
.class43 {
font-size: 0.85714em;
line-height: 1.2;
text-decoration: underline;
vertical-align: text-top
}
.class44 {
display: block;
font-family: "Ines Light";
font-size: 0.875em;
font-weight: 200;
line-height: 1.2;
margin-left: 1.823%;
text-align: justify;
text-indent: -1.823%
}
.class45 {
text-decoration: underline
}
.class46 {
display: block;
font-size: 1em;
line-height: 1.2;
padding-left: 5%;
padding-right: 5%;
padding-top: 1.07083em
}
.class47 {
display: block;
line-height: 1.2;
margin-left: 25%;
margin-right: 25%;
width: 50%
}
.class48 {
display: block;
line-height: 1.2;
margin-left: 15%;
margin-right: 15%;
margin-top: 1.36531em;
width: 70%
}
.class49 {
display: block;
font-size: 1em;
line-height: 1.2;
padding-bottom: 1.07083em;
padding-left: 5%;
padding-right: 5%
}
.class50 {
display: block;
font-family: "Ines Light";
font-size: 0.75em;
font-weight: 200;
line-height: 1.2;
text-align: right;
text-indent: 3.647%
}
.class51 {
display: block;
font-family: "Ines Light";
font-size: 0.75em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.495502em
}
.class52 {
display: block;
font-family: "Ines Light";
font-size: 0.75em;
font-style: italic;
line-height: 1.2;
margin-bottom: 0.495502em
}
.class53 {
font-style: italic;
font-weight: normal;
line-height: 1.2
}
.class54 {
font-size: 1em;
line-height: 1.2
}
.class55 {
display: block;
font-family: "Ines Light";
font-size: 0.75em;
font-weight: 200;
line-height: 1.2;
margin-bottom: 0.495502em;
margin-top: 5.06513em
}
.class56 {
display: block;
margin-top: 1.028em
}
.class57 {
font-size: 1em;
height: auto;
line-height: 1.2;
width: 58.594%
}
.class58 {
display: block;
font-size: 1.5em;
line-height: 1.2;
margin-top: 1.028em
}
.class59 {
display: block;
font-family: sans-serif;
font-size: 0.875em;
line-height: 1.2;
margin-left: 3.656%;
margin-top: 0.506304em;
text-indent: -3.656%
}
.class60 {
display: block;
font-family: sans-serif;
font-size: 0.875em;
line-height: 1.2;
margin-left: 3.656%;
margin-top: 0.182269em;
text-indent: -3.656%
}
.class61 {
display: block;
font-family: sans-serif;
font-size: 1em;
line-height: 1.2;
margin-top: 1.77241em
}
.class62 {
color: #008383;
text-decoration: underline
}
.class63 {
display: block;
font-family: sans-serif;
font-size: 1em;
line-height: 1.2;
margin-top: 1.32931em
}
.class64 {
display: block;
font-family: sans-serif;
font-size: 1em;
line-height: 1.2;
margin-bottom: 0.850759em;
margin-top: 1.77241em
}
.class65 {
display: block;
font-size: 1em;
height: 100%;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
text-align: center;
margin: 0 5pt
}
.class66 {
font-size: 1em;
height: 100%;
line-height: 1.2;
max-width: 100%;
width: auto
}


3) Now, if I Ctrl+Click on any of the class names, it would take me to the corresponding rule on the CSS Stylesheet.

4) If there are more than one rule applied, like the second example on the code (class="class3 class8"), this wouldn't be a problem, since I have to click on one or the other. If I click on on 'class3', it would take me to '.class3 {...}' on the CSS stylesheet. If I click on 'class8', then it would take me to '.class8 {...}'.

Like I said, this is how it works on Sigil. it's very useful and time saving.
On calibre Editor, this already work opening files through their links on the code.
Last edited by thiago.eec; 01-27-2021 at 07:15 AM.
thiago.eec is offline   Reply With Quote