Answered css numbering and cross referencing

[JohanHu]

Hi all,
I have succeeded with css numbering. But now, I would like to be able to reference to the whole numbering (like Figure 1). Here is the code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Report</title>
        <style type="text/css">
            body {
                counter-reset: fignum;
            }
            body figcaption {
                counter-increment: fignum 1;
            }
            body figcaption:before {
                content: "Figure " counter(fignum) ". ";
            }
        </style>
    </head>
    <body>
        <p>
            <figure>
                <img   src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/>
                <figcaption   id="test_fig">A nice car made in SVG.</figcaption>
            </figure>
        </p>
        <p>
            Here is a reference to an SVG, see <a href="#test_fig"></a>.
        </p>
    </body>
</html>

I would like the reference to be printed out (automatically of course): "Here is a reference to an SVG, see Figure 1.
Is this possible in html/css?
And how is it done?
Thanks!
/Johan

 

[Johna]

Hey @JohanHu,
You've mentioned Figure 1 twice, but I don't see any image or anything.

 

[JohanHu]

Hi @Johna,
In my browser the code render to a figure with a caption (with an ID) that is automatically numbered to Figure 1. The image is shown in the html line below:

<img   src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/>

The problem is that the cross reference I would like to use below the <figcaption> should automatically render to Figure 1 when using the same ID.
Thanks!
/Johan

 

[JohanHu]

The problem is quite easily solved by javascript!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Report</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <figure>
            <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/>
            <figcaption id="test_fig">A nice car made in SVG.</figcaption>
        </figure>
        <p>
            Here is a reference to an SVG, see <a href="#test_fig"></a>.
        </p>
        <script>
            $(document).ready(function(){
                $("figcaption").each(function(index,value){
                    $(this).prepend("Figure "+(++index)+". ");
                    $('[href="#'+$(this).attr("id")+'"]').text("Figure "+index)
                });
            });
        </script>
    </body>
</html>

Hope that this can help someone!
/Johan

 

[JohanHu]

And here is the result of the fully automated figure numbering and cross referencing:


/Johan