{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "# expand the width of a code block and its output\n",
        "\n",
        "# expand to full `page` width\n",
        "\n",
        "## 1. `::: {.column-page}`\n",
        "\n",
        "Use this to wrap a code block to span it and its output to `page` width.\n",
        "\n",
        "### Syntax\n",
        "\n",
        "```` default\n",
        "::: {.column-page}\n",
        "```{.python}\n",
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)\n",
        "```\n",
        ":::\n",
        "````\n",
        "\n",
        "### Example\n",
        "\n",
        "``` python\n",
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)\n",
        "```\n",
        "\n",
        "<div><style>\n",
        ".dataframe > thead > tr,\n",
        ".dataframe > tbody > tr {\n",
        "  text-align: right;\n",
        "  white-space: pre-wrap;\n",
        "}\n",
        "</style>\n",
        "<small>shape: (5, 20)</small>\n",
        "\n",
        "| string_idx | string_name | string_name_x | string_name_y | string_box_idx | CB_name | Phase | string_num | string_box_v1_x | string_box_v1_y | string_box_v2_x | string_box_v2_y | string_box_v3_x | string_box_v3_y | string_box_v4_x | string_box_v4_y | num_modules | module_orientation | num_module_along_x | num_module_along_y |\n",
        "|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|\n",
        "| i64 | str | f64 | f64 | i64 | i64 | i64 | i64 | f64 | f64 | f64 | f64 | f64 | f64 | f64 | f64 | i64 | str | i64 | i64 |\n",
        "| 0 | \"20-9\" | 5228.161911 | 724.563534 | 0 | 0 | 0 | 0 | 5217.39348 | 723.963534 | 5238.930342 | 723.963534 | 5238.930342 | 725.163534 | 5217.39348 | 725.163534 | 362 | \"L\" | 10 | 1 |\n",
        "| 0 | \"20-9\" | 5228.161911 | 725.867048 | 1 | 0 | 0 | 0 | 5217.39348 | 725.267048 | 5238.930342 | 725.267048 | 5238.930342 | 726.467048 | 5217.39348 | 726.467048 | 361 | \"L\" | 10 | 1 |\n",
        "| 1 | \"21-3\" | 5206.643309 | 724.563534 | 0 | 0 | 0 | 0 | 5195.874878 | 723.963534 | 5217.41174 | 723.963534 | 5217.41174 | 725.163534 | 5195.874878 | 725.163534 | 360 | \"L\" | 10 | 1 |\n",
        "| 1 | \"21-3\" | 5206.643309 | 725.867048 | 1 | 0 | 0 | 0 | 5195.874878 | 725.267048 | 5217.41174 | 725.267048 | 5217.41174 | 726.467048 | 5195.874878 | 726.467048 | 359 | \"L\" | 10 | 1 |\n",
        "| 2 | \"20-8\" | 5228.161911 | 727.170562 | 0 | 0 | 0 | 0 | 5217.39348 | 726.570562 | 5238.930342 | 726.570562 | 5238.930342 | 727.770562 | 5217.39348 | 727.770562 | 358 | \"L\" | 10 | 1 |\n",
        "\n",
        "</div>\n",
        "\n",
        "## 2. `#| column: page`\n",
        "\n",
        "Use it inside a code block and only its output will span `page` width.\n",
        "\n",
        "### Syntax\n",
        "\n",
        "```` default\n",
        "```{.python}\n",
        "#| column: page\n",
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)\n",
        "```\n",
        "````\n",
        "\n",
        "### Example"
      ],
      "id": "d15b2a7f-f7ad-4dfe-a40e-3e5786a7c050"
    },
    {
      "cell_type": "code",
      "execution_count": 2,
      "metadata": {},
      "outputs": [],
      "source": [
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)"
      ],
      "id": "8f8d3b7b"
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "# expand to full `screen` width\n",
        "\n",
        "You can have content span the full width of the page with no margin\n",
        "(full bleed).\n",
        "\n",
        "## 1. `::: {.column-screen}`\n",
        "\n",
        "Use it to wrap a code block to expand it and its output to full screen\n",
        "width.\n",
        "\n",
        "### Syntax\n",
        "\n",
        "```` default\n",
        "::: {.column-screen}\n",
        "```python\n",
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)\n",
        "```\n",
        ":::\n",
        "````\n",
        "\n",
        "### Example\n",
        "\n",
        "``` python\n",
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)\n",
        "```\n",
        "\n",
        "<div><style>\n",
        ".dataframe > thead > tr,\n",
        ".dataframe > tbody > tr {\n",
        "  text-align: right;\n",
        "  white-space: pre-wrap;\n",
        "}\n",
        "</style>\n",
        "<small>shape: (5, 20)</small>\n",
        "\n",
        "| string_idx | string_name | string_name_x | string_name_y | string_box_idx | CB_name | Phase | string_num | string_box_v1_x | string_box_v1_y | string_box_v2_x | string_box_v2_y | string_box_v3_x | string_box_v3_y | string_box_v4_x | string_box_v4_y | num_modules | module_orientation | num_module_along_x | num_module_along_y |\n",
        "|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|----|\n",
        "| i64 | str | f64 | f64 | i64 | i64 | i64 | i64 | f64 | f64 | f64 | f64 | f64 | f64 | f64 | f64 | i64 | str | i64 | i64 |\n",
        "| 0 | \"20-9\" | 5228.161911 | 724.563534 | 0 | 0 | 0 | 0 | 5217.39348 | 723.963534 | 5238.930342 | 723.963534 | 5238.930342 | 725.163534 | 5217.39348 | 725.163534 | 362 | \"L\" | 10 | 1 |\n",
        "| 0 | \"20-9\" | 5228.161911 | 725.867048 | 1 | 0 | 0 | 0 | 5217.39348 | 725.267048 | 5238.930342 | 725.267048 | 5238.930342 | 726.467048 | 5217.39348 | 726.467048 | 361 | \"L\" | 10 | 1 |\n",
        "| 1 | \"21-3\" | 5206.643309 | 724.563534 | 0 | 0 | 0 | 0 | 5195.874878 | 723.963534 | 5217.41174 | 723.963534 | 5217.41174 | 725.163534 | 5195.874878 | 725.163534 | 360 | \"L\" | 10 | 1 |\n",
        "| 1 | \"21-3\" | 5206.643309 | 725.867048 | 1 | 0 | 0 | 0 | 5195.874878 | 725.267048 | 5217.41174 | 725.267048 | 5217.41174 | 726.467048 | 5195.874878 | 726.467048 | 359 | \"L\" | 10 | 1 |\n",
        "| 2 | \"20-8\" | 5228.161911 | 727.170562 | 0 | 0 | 0 | 0 | 5217.39348 | 726.570562 | 5238.930342 | 726.570562 | 5238.930342 | 727.770562 | 5217.39348 | 727.770562 | 358 | \"L\" | 10 | 1 |\n",
        "\n",
        "</div>\n",
        "\n",
        "## 2. `#| column: screen`\n",
        "\n",
        "Use it inside a code block to expand only its output to full width of\n",
        "screen.\n",
        "\n",
        "### Syntax\n",
        "\n",
        "```` default\n",
        "```python\n",
        "#| column: screen\n",
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)\n",
        "```\n",
        "````\n",
        "\n",
        "### Example"
      ],
      "id": "fa796ddc-4c89-4a6f-b570-67bced570144"
    },
    {
      "cell_type": "code",
      "execution_count": 4,
      "metadata": {},
      "outputs": [],
      "source": [
        "import polars as pl\n",
        "csv_path = \"./data/tw_taoyuan_cankun_merged_updated.csv\"\n",
        "df = pl.read_csv(csv_path)\n",
        "df.head(5)"
      ],
      "id": "31beec3d"
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "------------------------------------------------------------------------\n",
        "\n",
        "# Ref\n",
        "\n",
        "-   https://quarto.org/docs/authoring/article-layout.html#screen-column\n",
        "-"
      ],
      "id": "a72dbfd0-4d1d-4b5e-b729-d17d21eacd2e"
    }
  ],
  "nbformat": 4,
  "nbformat_minor": 5,
  "metadata": {
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3 (ipykernel)",
      "language": "python",
      "path": "/opt/anaconda3/envs/ai/share/jupyter/kernels/python3"
    },
    "language_info": {
      "name": "python",
      "codemirror_mode": {
        "name": "ipython",
        "version": "3"
      },
      "file_extension": ".py",
      "mimetype": "text/x-python",
      "nbconvert_exporter": "python",
      "pygments_lexer": "ipython3",
      "version": "3.11.8"
    }
  }
}